From e91e0cbe27be5033befd130ad6531179c0d4c795 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 13 Apr 2026 14:54:32 +0200
Subject: [PATCH 001/257] Remove TW theme font overrides

---
 docs/src/css/index.css | 45 ------------------------------------------
 1 file changed, 45 deletions(-)

diff --git a/docs/src/css/index.css b/docs/src/css/index.css
index f33f1542aed..fd469718acd 100644
--- a/docs/src/css/index.css
+++ b/docs/src/css/index.css
@@ -91,46 +91,6 @@
   --font-sans: 'die grotesk a', system-ui, sans-serif;
   --font-sans-b: 'die grotesk b', system-ui, sans-serif;
   --font-serif: Georgia, 'Times New Roman', Times, 'Noto Serif', 'DejaVu Serif', serif;
-
-  --text-xs: 0.8125rem;
-  --text-xs--line-height: 1.25rem;
-  --text-xs--letter-spacing: 0.001em;
-
-  --text-sm: 0.875rem;
-  --text-sm--line-height: 1.25rem;
-  --text-sm--letter-spacing: 0.016em;
-
-  --text-base: 1rem;
-  --text-base--line-height: 1.5rem;
-  --text-base--letter-spacing: 0em;
-
-  --text-lg: 1.125rem;
-  --text-lg--line-height: 1.75rem;
-  --text-lg--letter-spacing: -0.0025em;
-
-  --text-xl: 1.3125rem;
-  --text-xl--line-height: 1.625rem;
-  --text-xl--letter-spacing: -0.005em;
-
-  --text-2xl: 1.5rem;
-  --text-2xl--line-height: 1.25;
-  --text-2xl--letter-spacing: -0.0125em;
-
-  --text-3xl: 1.875rem;
-  --text-3xl--line-height: 1.2;
-  --text-3xl--letter-spacing: -0.015em;
-
-  --text-4xl: 2.25rem;
-  --text-4xl--line-height: 2.5rem;
-  --text-4xl--letter-spacing: -0.015em;
-
-  --text-5xl: 3rem;
-  --text-5xl--line-height: 1;
-  --text-5xl--letter-spacing: -0.015em;
-
-  --text-6xl: 3.75rem;
-  --text-6xl--line-height: 0.95;
-  --text-6xl--letter-spacing: -0.015em;
 }
 
 /* ═══ Demo isolation ═══ */
@@ -150,11 +110,6 @@
   [data-demo]:not([data-demo='tailwind']) * {
     all: revert-layer;
   }
-
-  [data-demo='tailwind'] {
-    --text-sm--letter-spacing: 0em;
-    --text-md--letter-spacing: 0em;
-  }
 }
 
 /* ═══ Docs-only theme tokens ═══ */

From 21f15d8a945f7b79d60593bd5c1b50c73e8a1fd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 14 Apr 2026 09:28:29 +0200
Subject: [PATCH 002/257] Remove negative letter-spacing instances from demos

---
 .../react/components/alert-dialog/demos/_index.module.css       | 1 -
 .../alert-dialog/demos/hero/css-modules/index.module.css        | 1 -
 .../combobox/demos/creatable/css-modules/index.module.css       | 1 -
 .../app/(docs)/react/components/dialog/demos/_index.module.css  | 1 -
 .../demos/close-confirmation/css-modules/index.module.css       | 1 -
 .../components/dialog/demos/hero/css-modules/index.module.css   | 1 -
 .../components/dialog/demos/nested/css-modules/index.module.css | 1 -
 .../components/drawer/demos/hero/css-modules/index.module.css   | 1 -
 .../drawer/demos/indent-provider/css-modules/index.module.css   | 1 -
 .../drawer/demos/mobile-nav/css-modules/index.module.css        | 1 -
 .../components/drawer/demos/nested/css-modules/index.module.css | 1 -
 .../drawer/demos/non-modal/css-modules/index.module.css         | 1 -
 .../drawer/demos/position/css-modules/index.module.css          | 1 -
 .../drawer/demos/snap-points/css-modules/index.module.css       | 1 -
 .../drawer/demos/swipe-area/css-modules/index.module.css        | 1 -
 .../components/fieldset/demos/hero/css-modules/index.module.css | 1 -
 .../(private)/experiments/combobox/dialog-combobox.module.css   | 1 -
 .../(private)/experiments/drawer/cross-axis-scroll.module.css   | 1 -
 .../src/app/(private)/experiments/mobile-scroll-lock.module.css | 1 -
 .../(private)/experiments/popups/popups-in-popups.module.css    | 2 --
 20 files changed, 21 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
index 5a951b645d6..254424a9378 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
@@ -92,7 +92,6 @@
   margin-bottom: 0.25rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   font-weight: 700;
 }
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
index 0ced260ed99..174c2966cc2 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
@@ -92,7 +92,6 @@
   margin-bottom: 0.25rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   font-weight: 700;
 }
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
index 30b3eb7e909..156330ce4a6 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
@@ -286,7 +286,6 @@
   margin-bottom: 0.25rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   font-weight: 700;
 }
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
index 1333505dec0..0c9cf47d5a6 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
@@ -88,7 +88,6 @@
   margin-bottom: 0.25rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   font-weight: 700;
 }
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
index 78fb16a8762..050d5dbd325 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
@@ -100,7 +100,6 @@
   margin-bottom: 0.25rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   font-weight: 700;
 }
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
index d9b961bd89a..ca1b5d7f685 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
@@ -90,7 +90,6 @@
   margin-bottom: 0.25rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   font-weight: 700;
 }
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
index edb5745928b..2da1423743a 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
@@ -144,7 +144,6 @@
   margin-bottom: 0.25rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   font-weight: 700;
 }
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
index ae39c518f54..6b089d85d70 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
@@ -135,7 +135,6 @@
   margin-bottom: 0.25rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   font-weight: 700;
 }
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
index f0f675ed925..7d965c62fb0 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
@@ -176,7 +176,6 @@
   margin-bottom: 0.25rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   font-weight: 700;
   text-align: center;
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
index 6e5596d6007..531943ce478 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
@@ -228,7 +228,6 @@
   margin: 0 0 0.25rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   font-weight: 700;
 }
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
index eed70eea366..a21b03b8ef7 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
@@ -239,7 +239,6 @@
   margin-bottom: 0.25rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   font-weight: 700;
   text-align: center;
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
index f4180f58a6f..2c532940f2e 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
@@ -145,7 +145,6 @@
   margin-bottom: 0.25rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   font-weight: 700;
 }
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
index 976f255ea0d..1521aa7f0aa 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
@@ -126,7 +126,6 @@
   margin-bottom: 0.25rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   font-weight: 700;
   text-align: center;
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
index 66db4cbbb04..18228a3458b 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
@@ -167,7 +167,6 @@
   margin: 0;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   font-weight: 700;
   text-align: center;
   cursor: default;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
index 34ce64366dd..1ffd125dedd 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
@@ -194,7 +194,6 @@
   margin-bottom: 0.25rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   font-weight: 700;
 }
 
diff --git a/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
index d32e4a07f26..c1ca2c9a3fa 100644
--- a/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
@@ -15,7 +15,6 @@
   font-weight: 700;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   color: var(--color-gray-900);
 }
 
diff --git a/docs/src/app/(private)/experiments/combobox/dialog-combobox.module.css b/docs/src/app/(private)/experiments/combobox/dialog-combobox.module.css
index 3fdd39c641b..2edae647bd8 100644
--- a/docs/src/app/(private)/experiments/combobox/dialog-combobox.module.css
+++ b/docs/src/app/(private)/experiments/combobox/dialog-combobox.module.css
@@ -91,7 +91,6 @@
   margin-bottom: 0.25rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   font-weight: 500;
 }
 
diff --git a/docs/src/app/(private)/experiments/drawer/cross-axis-scroll.module.css b/docs/src/app/(private)/experiments/drawer/cross-axis-scroll.module.css
index 53332400934..6bb9c880ce9 100644
--- a/docs/src/app/(private)/experiments/drawer/cross-axis-scroll.module.css
+++ b/docs/src/app/(private)/experiments/drawer/cross-axis-scroll.module.css
@@ -10,7 +10,6 @@
   margin: 0;
   font-size: 1.5rem;
   line-height: 2rem;
-  letter-spacing: -0.01em;
 }
 
 .Description {
diff --git a/docs/src/app/(private)/experiments/mobile-scroll-lock.module.css b/docs/src/app/(private)/experiments/mobile-scroll-lock.module.css
index 7d75dec8d5c..2852a2a2cb5 100644
--- a/docs/src/app/(private)/experiments/mobile-scroll-lock.module.css
+++ b/docs/src/app/(private)/experiments/mobile-scroll-lock.module.css
@@ -82,7 +82,6 @@
   margin-bottom: 0.25rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   font-weight: 500;
 }
 
diff --git a/docs/src/app/(private)/experiments/popups/popups-in-popups.module.css b/docs/src/app/(private)/experiments/popups/popups-in-popups.module.css
index 547ea019dcf..fe720c91be3 100644
--- a/docs/src/app/(private)/experiments/popups/popups-in-popups.module.css
+++ b/docs/src/app/(private)/experiments/popups/popups-in-popups.module.css
@@ -122,7 +122,6 @@
   margin-bottom: 0.25rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   font-weight: 500;
 }
 
@@ -236,7 +235,6 @@
   margin-bottom: 0.25rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
-  letter-spacing: -0.0025em;
   font-weight: 500;
   text-align: center;
 }

From 5761d12a612f2b7dfed3a4aa87a332bf1e425508 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 14 Apr 2026 09:28:50 +0200
Subject: [PATCH 003/257] Equate letter-spacing in TW demo

---
 .../components/autocomplete/demos/grouped/tailwind/index.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
index 80ffb03bedb..312a09c529e 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
@@ -23,7 +23,7 @@ export default function ExampleGroupAutocomplete() {
             <Autocomplete.List className="outline-0 overflow-y-auto scroll-pt-[2.25rem] scroll-pb-[0.5rem] overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-[empty]:p-0">
               {(group: TagGroup) => (
                 <Autocomplete.Group key={group.value} items={group.items} className="block pb-2">
-                  <Autocomplete.GroupLabel className="sticky top-0 z-[1] mb-0 mr-2 mt-0 ml-0 w-[calc(100%-0.5rem)] bg-[canvas] px-4 pb-1 pt-2 text-xs font-bold uppercase tracking-wider">
+                  <Autocomplete.GroupLabel className="sticky top-0 z-[1] mb-0 mr-2 mt-0 ml-0 w-[calc(100%-0.5rem)] bg-[canvas] px-4 pb-1 pt-2 text-xs font-bold uppercase tracking-wide">
                     {group.value}
                   </Autocomplete.GroupLabel>
                   <Autocomplete.Collection>

From 82f0ab817f81dfe89e6a04a3d354c5c593dde4ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 14 Apr 2026 16:48:51 +0200
Subject: [PATCH 004/257] Move Die Grotesk B outside Tailwind's theme
 definition

---
 docs/src/css/index.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/src/css/index.css b/docs/src/css/index.css
index fd469718acd..ad425023d74 100644
--- a/docs/src/css/index.css
+++ b/docs/src/css/index.css
@@ -89,7 +89,6 @@
   /* Typography */
   --font-mono: 'Paper Mono', monospace;
   --font-sans: 'die grotesk a', system-ui, sans-serif;
-  --font-sans-b: 'die grotesk b', system-ui, sans-serif;
   --font-serif: Georgia, 'Times New Roman', Times, 'Noto Serif', 'DejaVu Serif', serif;
 }
 
@@ -169,6 +168,9 @@
     --color-green: oklch(46% 30% 150deg);
     --color-violet: oklch(40% 60% 300deg);
 
+    /* Font family */
+    --font-sans-b: 'die grotesk b', system-ui, sans-serif;
+
     /* Font size */
     --font-size-13: 0.8125rem; /* 13px */
     --font-size-14: 0.875rem; /* 14px */

From 0c1d7a5c969014a4afa712daea3f1f1fb8be5aa7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 14 Apr 2026 17:15:11 +0200
Subject: [PATCH 005/257] Equate font-sizes in CSS modules demos with Tailwind
 counterpart

---
 .../select/demos/object-values/css-modules/index.module.css   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
index c612b0fe32f..4be68eeffe5 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
@@ -65,7 +65,7 @@
 }
 
 .ValueSecondary {
-  font-size: 0.825rem;
+  font-size: 0.75rem;
   line-height: 1rem;
   color: var(--color-gray-600);
 }
@@ -205,7 +205,7 @@
 }
 
 .ItemDescription {
-  font-size: 0.825rem;
+  font-size: 0.75rem;
   line-height: 1rem;
   opacity: 0.8;
 }

From ede34e12443cd1d8c722a7e40b9e7a5d6442b3b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 16 Apr 2026 15:13:13 +0200
Subject: [PATCH 006/257] Remove unused styles

---
 .../multiple/css-modules/index.module.css     | 30 -------------------
 1 file changed, 30 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
index 57548773b57..b28a83c31f6 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
@@ -122,36 +122,6 @@
   }
 }
 
-.Trigger {
-  box-sizing: border-box;
-  position: absolute;
-  right: 0.75rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  border: none;
-  background: none;
-  color: var(--color-gray-500);
-  border-radius: 0.25rem;
-
-  &:hover {
-    color: var(--color-gray-700);
-    background-color: var(--color-gray-100);
-  }
-
-  &:focus {
-    outline: 2px solid var(--color-blue-500);
-    outline-offset: 2px;
-  }
-}
-
-.TriggerIcon {
-  width: 1rem;
-  height: 1rem;
-}
-
 .Positioner {
   outline: 0;
   z-index: 50;

From 1deff58ab356e4b6e41113dcd67c91dd33e9dade Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 17 Apr 2026 08:58:23 +0200
Subject: [PATCH 007/257] Remove custom TW color palette

---
 .../toast/demos/hero/tailwind/index.tsx       |  2 +-
 .../toast/demos/position/tailwind/index.tsx   |  2 +-
 docs/src/css/index.css                        | 45 +++++++++----------
 docs/src/demo-data/theme/css-modules/index.ts |  5 ---
 docs/src/demo-data/theme/index.ts             |  7 ---
 docs/src/utils/createDemo.ts                  |  5 ---
 docs/src/utils/demoExportOptions.ts           | 35 +++------------
 7 files changed, 29 insertions(+), 72 deletions(-)
 delete mode 100644 docs/src/demo-data/theme/css-modules/index.ts
 delete mode 100644 docs/src/demo-data/theme/index.ts

diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
index da9be0ed7ea..a3fc4128812 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
@@ -30,7 +30,7 @@ function ToastButton() {
   return (
     <button
       type="button"
-      className="box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 py-0 font-normal text-gray-900 outline-0 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue active:bg-gray-100"
+      className="box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 py-0 font-normal text-gray-900 outline-0 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
       onClick={createToast}
     >
       Create toast
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
index e7c8af6e299..fb3fb1c2d07 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
@@ -30,7 +30,7 @@ function ToastButton() {
   return (
     <button
       type="button"
-      className="box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 py-0 font-normal text-gray-900 outline-0 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue active:bg-gray-100"
+      className="box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 py-0 font-normal text-gray-900 outline-0 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100"
       onClick={createToast}
     >
       Create toast
diff --git a/docs/src/css/index.css b/docs/src/css/index.css
index ad425023d74..0ba2e83d8c4 100644
--- a/docs/src/css/index.css
+++ b/docs/src/css/index.css
@@ -25,12 +25,6 @@
 /* `source(none)` disables automatic detection of sources to generate Tailwind classes. Use the safelist below instead. */
 @import 'tailwindcss/utilities' layer(utilities) source(none);
 
-/* ═══ Demo-specific theme ═══ */
-/* We defined grays, red, and blue in the theme used for demos. */
-/* Uses gray scale that is roughly compatible with Tailwind's grays. */
-/* This is injected in demos when opening in a sandbox like StackBlitz. */
-@import '../demo-data/theme/css-modules/theme.css' layer(theme);
-
 /* ═══ Docs-only imports ═══ */
 
 @import './fonts/index.css';
@@ -67,24 +61,20 @@
   --color-white: white;
   --color-black: black;
 
-  /* Gray, red and blue colors defined in file://../demo-data/theme/css-modules/theme.css */
-  --color-gray-50: inherit;
-  --color-gray-100: inherit;
-  --color-gray-200: inherit;
-  --color-gray-300: inherit;
-  --color-gray-400: inherit;
-  --color-gray-500: inherit;
-  --color-gray-600: inherit;
-  --color-gray-700: inherit;
-  --color-gray-800: inherit;
-  --color-gray-900: inherit;
-  --color-gray-950: inherit;
-
-  --color-blue: inherit;
-  --color-red: inherit;
-
-  --color-blue-800: var(--color-blue);
-  --color-red-800: var(--color-red);
+  --color-gray-50: oklch(98.5% 0.002 247.839deg);
+  --color-gray-100: oklch(96.7% 0.003 264.542deg);
+  --color-gray-200: oklch(92.8% 0.006 264.531deg);
+  --color-gray-300: oklch(87.2% 0.01 258.338deg);
+  --color-gray-400: oklch(70.7% 0.022 261.325deg);
+  --color-gray-500: oklch(55.1% 0.027 264.364deg);
+  --color-gray-600: oklch(44.6% 0.03 256.802deg);
+  --color-gray-700: oklch(37.3% 0.034 259.733deg);
+  --color-gray-800: oklch(27.8% 0.033 256.848deg);
+  --color-gray-900: oklch(21% 0.034 264.665deg);
+  --color-gray-950: oklch(13% 0.028 261.692deg);
+
+  --color-blue-800: oklch(42.4% 0.199 265.638deg);
+  --color-red-800: oklch(44.4% 0.177 26.899deg);
 
   /* Typography */
   --font-mono: 'Paper Mono', monospace;
@@ -151,6 +141,10 @@
     --grape-t1: hsl(276deg 66% 54%);
     --lime-t1: hsl(91deg 64% 38.75%);
 
+    /* Legacy colors */
+    --color-blue: oklch(45% 50% 264deg);
+    --color-red: oklch(50% 55% 31deg);
+
     /* Functional colors */
     --color-content: white;
     --color-background: var(--gray-s2);
@@ -271,6 +265,9 @@
       --grape-t1: hsl(276deg 86% 70%);
       --lime-t1: hsl(91deg 72% 56%);
 
+      --color-blue: oklch(69% 50% 264deg);
+      --color-red: oklch(80% 55% 31deg);
+
       /* Functional colors */
       --color-content: black;
       --color-background: black;
diff --git a/docs/src/demo-data/theme/css-modules/index.ts b/docs/src/demo-data/theme/css-modules/index.ts
deleted file mode 100644
index 937e32ead26..00000000000
--- a/docs/src/demo-data/theme/css-modules/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import './theme.css';
-
-export function DemoThemeProvider({ children }: { children: React.ReactNode }) {
-  return children;
-}
diff --git a/docs/src/demo-data/theme/index.ts b/docs/src/demo-data/theme/index.ts
deleted file mode 100644
index 907d2be93cd..00000000000
--- a/docs/src/demo-data/theme/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { createDemoGlobalWithVariants } from '@mui/internal-docs-infra/createDemoData';
-import type { DemoGlobalData } from '@mui/internal-docs-infra/createDemoData/types';
-import { DemoThemeProvider as CssModules } from './css-modules';
-
-export const DemoDataTheme: DemoGlobalData = createDemoGlobalWithVariants(import.meta.url, {
-  CssModules,
-});
diff --git a/docs/src/utils/createDemo.ts b/docs/src/utils/createDemo.ts
index 438dfcaf873..fb6aa536bc8 100644
--- a/docs/src/utils/createDemo.ts
+++ b/docs/src/utils/createDemo.ts
@@ -6,9 +6,6 @@ import {
 } from '@mui/internal-docs-infra/abstractCreateDemo';
 
 import { Demo as DemoContent } from '../components/Demo/Demo';
-import { DemoDataTheme } from '../demo-data/theme';
-
-const demoGlobalData = [DemoDataTheme];
 
 /**
  * Creates a demo component for displaying code examples with syntax highlighting.
@@ -18,7 +15,6 @@ const demoGlobalData = [DemoDataTheme];
  */
 export const createDemo = createDemoFactory({
   DemoContent,
-  demoGlobalData,
 });
 
 /**
@@ -30,5 +26,4 @@ export const createDemo = createDemoFactory({
  */
 export const createDemoWithVariants = createDemoWithVariantsFactory({
   DemoContent,
-  demoGlobalData,
 });
diff --git a/docs/src/utils/demoExportOptions.ts b/docs/src/utils/demoExportOptions.ts
index daa74fb89f3..2b42717db1b 100644
--- a/docs/src/utils/demoExportOptions.ts
+++ b/docs/src/utils/demoExportOptions.ts
@@ -8,7 +8,11 @@ import { ExportConfig } from '@mui/internal-docs-infra/useDemo';
 
 const defaultStylesLink = `<link rel="stylesheet" href="demo.css" />`;
 const htmlHeadWithDefaultStyles: ExportConfig['headTemplate'] = () => defaultStylesLink;
-const demoCss = `body {
+const demoCss = `:root {
+  color-scheme: light dark;
+}
+
+body {
   font-family: system-ui;
   margin: 0;
 
@@ -26,10 +30,6 @@ const demoCss = `body {
 }
 `;
 
-// CSS Modules Theme Styles (src/demo-data/theme)
-const themeStylesLink = `<link rel="stylesheet" href="theme.css" />`;
-const htmlHeadWithCssModulesTheme: ExportConfig['headTemplate'] = () => themeStylesLink;
-
 // Tailwind CSS Setup
 const tailwindSetup = `
 <!-- Check out the Tailwind CSS' installation guide for setting it up: https://tailwindcss.com/docs/installation/framework-guides -->
@@ -637,9 +637,7 @@ const htmlHeadWithTailwind: ExportConfig['headTemplate'] = ({ variant }) => {
 const htmlHeadTemplate: ExportConfig['headTemplate'] = (props) => {
   const head = [htmlHeadWithDefaultStyles(props)];
 
-  if (props.variantName === 'CssModules') {
-    head.push(htmlHeadWithCssModulesTheme(props));
-  } else if (props.variantName === 'Tailwind') {
+  if (props.variantName === 'Tailwind') {
     head.push(htmlHeadWithTailwind(props));
   }
 
@@ -651,23 +649,6 @@ const transformVariant: ExportConfig['transformVariant'] = (variant, variantName
   globals = { ...globals };
   globals['demo.css'] = { source: demoCss };
 
-  // Add color-scheme to the theme file if it exists
-  if (variantName === 'CssModules' && globals['theme.css']) {
-    const cssTheme = globals['theme.css'];
-    const source =
-      typeof cssTheme === 'object' && cssTheme.source && stringOrHastToString(cssTheme.source);
-    if (source) {
-      if (!source.includes(':root {')) {
-        throw new Error('Expected to find a ":root" selector in the demo theme file');
-      }
-
-      globals['theme.css'] = {
-        ...cssTheme,
-        source: source.replace(':root {', `:root {\n  color-scheme: light dark;\n`),
-      };
-    }
-  }
-
   return { globals };
 };
 
@@ -705,10 +686,6 @@ const transformVariantForCRA: ExportConfig['transformVariant'] = (
 
   const transformedGlobalsForCRA = { ...transformedGlobals };
 
-  if (variantName === 'CssModules') {
-    exposeMetadataToPublic(transformedGlobalsForCRA, 'theme.css');
-  }
-
   exposeMetadataToPublic(transformedGlobalsForCRA, 'demo.css');
 
   return {

From 53e60c90acfe1e2490843d7844f1f0def2ba4cb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 17 Apr 2026 09:21:20 +0200
Subject: [PATCH 008/257] Button brutalist

---
 .../demos/hero/css-modules/index.module.css   | 26 +++++++++----------
 .../button/demos/hero/tailwind/index.tsx      |  2 +-
 .../loading/css-modules/index.module.css      | 26 +++++++++----------
 .../button/demos/loading/tailwind/index.tsx   |  2 +-
 4 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
index 67d48898127..16f5e03f3e1 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
@@ -3,38 +3,36 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
+  height: 2rem;
   padding: 0 0.875rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: none;
+  border-radius: 0;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-900), var(--color-gray-50));
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-gray-200);
-    box-shadow: inset 0 1px 3px var(--color-gray-200);
-    border-top-color: var(--color-gray-300);
+    background-color: light-dark(var(--color-gray-400), var(--color-gray-600));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline-width: 2px;
+    outline-style: solid;
+    outline-offset: 2px;
   }
 
   &[data-disabled] {
-    color: var(--color-gray-500);
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 }
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
index 890e78bdbda..ebb7becd2f9 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Button } from '@base-ui/react/button';
 
 export default function ExampleButton() {
   return (
-    <Button className="flex items-center justify-center h-10 px-3.5 m-0 outline-0 border border-gray-200 rounded-md bg-gray-50 font-inherit text-base font-normal leading-6 text-gray-900 select-none hover:data-[disabled]:bg-gray-50 hover:bg-gray-100 active:data-[disabled]:bg-gray-50 active:bg-gray-200 active:shadow-[inset_0_1px_3px_rgba(0,0,0,0.1)] active:border-t-gray-300 active:data-[disabled]:shadow-none active:data-[disabled]:border-t-gray-200 focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1 data-[disabled]:text-gray-500">
+    <Button className="flex items-center justify-center h-8 px-3.5 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-900 dark:text-gray-50 select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 active:not-data-disabled:bg-gray-400 dark:active:not-data-disabled:bg-gray-600 focus-visible:outline-2 focus-visible:outline-offset-2 data-disabled:text-gray-500 dark:data-disabled:text-gray-400">
       Submit
     </Button>
   );
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
index 67d48898127..16f5e03f3e1 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
@@ -3,38 +3,36 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
+  height: 2rem;
   padding: 0 0.875rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: none;
+  border-radius: 0;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-900), var(--color-gray-50));
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-gray-200);
-    box-shadow: inset 0 1px 3px var(--color-gray-200);
-    border-top-color: var(--color-gray-300);
+    background-color: light-dark(var(--color-gray-400), var(--color-gray-600));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline-width: 2px;
+    outline-style: solid;
+    outline-offset: 2px;
   }
 
   &[data-disabled] {
-    color: var(--color-gray-500);
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 }
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
index 4656d339c7f..59cc4fe48ad 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleButton() {
 
   return (
     <Button
-      className="flex items-center justify-center h-10 px-3.5 m-0 outline-0 border border-gray-200 rounded-md bg-gray-50 font-inherit text-base font-normal leading-6 text-gray-900 select-none hover:data-[disabled]:bg-gray-50 hover:bg-gray-100 active:data-[disabled]:bg-gray-50 active:bg-gray-200 active:shadow-[inset_0_1px_3px_rgba(0,0,0,0.1)] active:border-t-gray-300 active:data-[disabled]:shadow-none active:data-[disabled]:border-t-gray-200 focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1 data-[disabled]:text-gray-500"
+      className="flex items-center justify-center h-8 px-3.5 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-900 dark:text-gray-50 select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 active:not-data-disabled:bg-gray-400 dark:active:not-data-disabled:bg-gray-600 focus-visible:outline-2 focus-visible:outline-offset-2 data-disabled:text-gray-500 dark:data-disabled:text-gray-400"
       disabled={loading}
       focusableWhenDisabled
       onClick={() => {

From 9eb399916e3dc74c1f2e503dddd694e8472f2409 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 17 Apr 2026 11:17:56 +0200
Subject: [PATCH 009/257] Checkbox brutalist

---
 .../demos/hero/css-modules/index.module.css   | 32 ++++++++-------
 .../demos/hero/css-modules/index.tsx          | 14 ++++++-
 .../demos/hero/tailwind/index.tsx             | 36 ++++++++++-------
 .../demos/nested/css-modules/index.module.css | 39 ++++++++-----------
 .../demos/nested/css-modules/index.tsx        | 16 ++++++--
 .../demos/parent/css-modules/index.module.css | 39 ++++++++-----------
 .../demos/parent/css-modules/index.tsx        | 16 ++++++--
 .../demos/hero/css-modules/index.module.css   | 32 +++++++--------
 .../checkbox/demos/hero/css-modules/index.tsx | 14 ++++++-
 .../checkbox/demos/hero/tailwind/index.tsx    | 20 +++++++---
 10 files changed, 152 insertions(+), 106 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
index dc3b49674cb..1761779a03b 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
@@ -3,10 +3,12 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-900), var(--color-gray-50));
 }
 
 .Caption {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
@@ -14,40 +16,40 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
 }
 
 .Checkbox {
   box-sizing: border-box;
   display: flex;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1rem;
+  height: 1rem;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
-  outline: 0;
+  border: 1px solid light-dark(var(--color-gray-900), var(--color-gray-50));
+  border-radius: 0;
+  background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+  color: light-dark(var(--color-gray-50), var(--color-gray-900));
   padding: 0;
   margin: 0;
-  border: none;
 
-  &[data-unchecked] {
-    border: 1px solid var(--color-gray-300);
-    background-color: transparent;
-  }
-
-  &[data-checked] {
-    background-color: var(--color-gray-900);
+  &[data-checked],
+  &[data-indeterminate] {
+    background-color: light-dark(var(--color-gray-900), var(--color-gray-50));
+    color: light-dark(var(--color-gray-50), var(--color-gray-900));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline-width: 2px;
+    outline-style: solid;
     outline-offset: 2px;
   }
 }
 
 .Indicator {
   display: flex;
-  color: var(--color-gray-50);
 
   &[data-unchecked] {
     display: none;
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
index 2c1bf6eea69..7b51ed74f80 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
@@ -48,8 +48,18 @@ export default function ExampleCheckboxGroup() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
index f544fa923c3..ac8c96c05dd 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
@@ -9,45 +9,45 @@ export default function ExampleCheckboxGroup() {
     <CheckboxGroup
       aria-labelledby={id}
       defaultValue={['fuji-apple']}
-      className="flex flex-col items-start gap-1 text-gray-900"
+      className="flex flex-col items-start gap-1 text-gray-900 dark:text-gray-50"
     >
-      <div className="font-bold" id={id}>
+      <div className="text-sm leading-5 font-bold" id={id}>
         Apples
       </div>
 
-      <label className="flex items-center gap-2 font-normal">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
         <Checkbox.Root
           name="apple"
           value="fuji-apple"
-          className="flex size-5 items-center justify-center rounded-xs 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-4 items-center justify-center border rounded-none p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
         >
-          <Checkbox.Indicator className="flex text-gray-50 data-[unchecked]:hidden">
+          <Checkbox.Indicator className="flex data-unchecked:hidden">
             <CheckIcon className="size-3" />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Fuji
       </label>
 
-      <label className="flex items-center gap-2 font-normal">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
         <Checkbox.Root
           name="apple"
           value="gala-apple"
-          className="flex size-5 items-center justify-center rounded-xs 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-4 items-center justify-center border rounded-none p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
         >
-          <Checkbox.Indicator className="flex text-gray-50 data-[unchecked]:hidden">
+          <Checkbox.Indicator className="flex data-unchecked:hidden">
             <CheckIcon className="size-3" />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Gala
       </label>
 
-      <label className="flex items-center gap-2 font-normal">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
         <Checkbox.Root
           name="apple"
           value="granny-smith-apple"
-          className="flex size-5 items-center justify-center rounded-xs 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-4 items-center justify-center border rounded-none p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
         >
-          <Checkbox.Indicator className="flex text-gray-50 data-[unchecked]:hidden">
+          <Checkbox.Indicator className="flex data-unchecked:hidden">
             <CheckIcon className="size-3" />
           </Checkbox.Indicator>
         </Checkbox.Root>
@@ -59,8 +59,18 @@ export default function ExampleCheckboxGroup() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
index 5da37f280ec..1761779a03b 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
@@ -3,10 +3,12 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-900), var(--color-gray-50));
 }
 
 .Caption {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
@@ -14,53 +16,44 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
 }
 
 .Checkbox {
   box-sizing: border-box;
   display: flex;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1rem;
+  height: 1rem;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
-  outline: 0;
+  border: 1px solid light-dark(var(--color-gray-900), var(--color-gray-50));
+  border-radius: 0;
+  background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+  color: light-dark(var(--color-gray-50), var(--color-gray-900));
   padding: 0;
   margin: 0;
-  border: none;
-
-  &[data-unchecked] {
-    border: 1px solid var(--color-gray-300);
-    background-color: transparent;
-  }
-
-  &[data-checked] {
-    background-color: var(--color-gray-900);
-  }
 
+  &[data-checked],
   &[data-indeterminate] {
-    border: 1px solid var(--color-gray-300);
-    background-color: canvas;
+    background-color: light-dark(var(--color-gray-900), var(--color-gray-50));
+    color: light-dark(var(--color-gray-50), var(--color-gray-900));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline-width: 2px;
+    outline-style: solid;
     outline-offset: 2px;
   }
 }
 
 .Indicator {
   display: flex;
-  color: var(--color-gray-50);
 
   &[data-unchecked] {
     display: none;
   }
-
-  &[data-indeterminate] {
-    color: var(--color-gray-900);
-  }
 }
 
 .Icon {
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
index 4c2a2e8f04f..3baf057636a 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
@@ -146,8 +146,18 @@ export default function PermissionsForm() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
     </svg>
   );
 }
@@ -161,7 +171,7 @@ function HorizontalRuleIcon(props: React.ComponentProps<'svg'>) {
         x2="21"
         y2="12"
         stroke="currentColor"
-        strokeWidth={3}
+        strokeWidth={2}
         strokeLinecap="round"
       />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
index 5da37f280ec..1761779a03b 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
@@ -3,10 +3,12 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-900), var(--color-gray-50));
 }
 
 .Caption {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
@@ -14,53 +16,44 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
 }
 
 .Checkbox {
   box-sizing: border-box;
   display: flex;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1rem;
+  height: 1rem;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
-  outline: 0;
+  border: 1px solid light-dark(var(--color-gray-900), var(--color-gray-50));
+  border-radius: 0;
+  background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+  color: light-dark(var(--color-gray-50), var(--color-gray-900));
   padding: 0;
   margin: 0;
-  border: none;
-
-  &[data-unchecked] {
-    border: 1px solid var(--color-gray-300);
-    background-color: transparent;
-  }
-
-  &[data-checked] {
-    background-color: var(--color-gray-900);
-  }
 
+  &[data-checked],
   &[data-indeterminate] {
-    border: 1px solid var(--color-gray-300);
-    background-color: canvas;
+    background-color: light-dark(var(--color-gray-900), var(--color-gray-50));
+    color: light-dark(var(--color-gray-50), var(--color-gray-900));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline-width: 2px;
+    outline-style: solid;
     outline-offset: 2px;
   }
 }
 
 .Indicator {
   display: flex;
-  color: var(--color-gray-50);
 
   &[data-unchecked] {
     display: none;
   }
-
-  &[data-indeterminate] {
-    color: var(--color-gray-900);
-  }
 }
 
 .Icon {
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
index 375ab84636c..052712e813e 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
@@ -69,8 +69,18 @@ export default function ExampleCheckboxGroup() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
     </svg>
   );
 }
@@ -84,7 +94,7 @@ function HorizontalRuleIcon(props: React.ComponentProps<'svg'>) {
         x2="21"
         y2="12"
         stroke="currentColor"
-        strokeWidth={3}
+        strokeWidth={2}
         strokeLinecap="round"
       />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
index 48f2e3229f8..f565f19134e 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
@@ -2,43 +2,41 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
+  color: light-dark(var(--color-gray-900), var(--color-gray-50));
 }
 
 .Checkbox {
   box-sizing: border-box;
   display: flex;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1rem;
+  height: 1rem;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
-  outline: 0;
+  border: 1px solid light-dark(var(--color-gray-900), var(--color-gray-50));
+  border-radius: 0;
+  background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+  color: light-dark(var(--color-gray-50), var(--color-gray-900));
   padding: 0;
   margin: 0;
-  border: none;
 
-  &[data-unchecked] {
-    border: 1px solid var(--color-gray-300);
-    background-color: transparent;
-  }
-
-  &[data-checked] {
-    background-color: var(--color-gray-900);
+  &[data-checked],
+  &[data-indeterminate] {
+    background-color: light-dark(var(--color-gray-900), var(--color-gray-50));
+    color: light-dark(var(--color-gray-50), var(--color-gray-900));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline-width: 2px;
+    outline-style: solid;
     outline-offset: 2px;
   }
 }
 
 .Indicator {
   display: flex;
-  color: var(--color-gray-50);
 
   &[data-unchecked] {
     display: none;
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
index 3fa0d995157..ab337b96ab5 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
@@ -17,8 +17,18 @@ export default function ExampleCheckbox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
index 30a9b0d80c1..0b79a9cee49 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
@@ -3,12 +3,12 @@ import { Checkbox } from '@base-ui/react/checkbox';
 
 export default function ExampleCheckbox() {
   return (
-    <label className="flex items-center gap-2 text-base text-gray-900 font-normal">
+    <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
       <Checkbox.Root
         defaultChecked
-        className="flex size-5 items-center justify-center rounded-xs 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-4 items-center justify-center border rounded-none p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
       >
-        <Checkbox.Indicator className="flex text-gray-50 data-[unchecked]:hidden">
+        <Checkbox.Indicator className="flex data-unchecked:hidden">
           <CheckIcon className="size-3" />
         </Checkbox.Indicator>
       </Checkbox.Root>
@@ -19,8 +19,18 @@ export default function ExampleCheckbox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
     </svg>
   );
 }

From ae8b3ea5de06e2dcf00182f0af95d1461126d8c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 17 Apr 2026 11:39:52 +0200
Subject: [PATCH 010/257] Radio brutalist

---
 .../demos/hero/css-modules/index.module.css   | 28 ++++++++++---------
 .../radio/demos/hero/tailwind/index.tsx       | 22 +++++++--------
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
index 7b1827cb722..58833d8687c 100644
--- a/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
@@ -3,10 +3,12 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-900), var(--color-gray-50));
 }
 
 .Caption {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
@@ -14,33 +16,33 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
 }
 
 .Radio {
   box-sizing: border-box;
   display: flex;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1rem;
+  height: 1rem;
   align-items: center;
   justify-content: center;
+  border: 1px solid light-dark(var(--color-gray-900), var(--color-gray-50));
   border-radius: 100%;
-  outline: 0;
+  background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+  color: light-dark(var(--color-gray-50), var(--color-gray-900));
   padding: 0;
   margin: 0;
-  border: none;
-
-  &[data-unchecked] {
-    border: 1px solid var(--color-gray-300);
-    background-color: transparent;
-  }
 
   &[data-checked] {
-    background-color: var(--color-gray-900);
+    background-color: light-dark(var(--color-gray-900), var(--color-gray-50));
+    color: light-dark(var(--color-gray-50), var(--color-gray-900));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline-width: 2px;
+    outline-style: solid;
     outline-offset: 2px;
   }
 }
@@ -59,6 +61,6 @@
     border-radius: 100%;
     width: 0.5rem;
     height: 0.5rem;
-    background-color: var(--color-gray-50);
+    background-color: currentcolor;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
index d2137cd2bf7..b55957a7c6b 100644
--- a/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
@@ -9,38 +9,38 @@ export default function ExampleRadioGroup() {
     <RadioGroup
       aria-labelledby={id}
       defaultValue="fuji-apple"
-      className="flex flex-col items-start gap-1 text-gray-900"
+      className="flex flex-col items-start gap-1 text-gray-900 dark:text-gray-50"
     >
-      <div className="font-bold" id={id}>
+      <div className="text-sm leading-5 font-bold" id={id}>
         Best apple
       </div>
 
-      <label className="flex items-center gap-2 font-normal">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
         <Radio.Root
           value="fuji-apple"
-          className="flex size-5 items-center justify-center rounded-full 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-4 items-center justify-center border rounded-full p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
         >
-          <Radio.Indicator className="flex before:size-2 before:rounded-full before:bg-gray-50 data-[unchecked]:hidden" />
+          <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>
         Fuji
       </label>
 
-      <label className="flex items-center gap-2 font-normal">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
         <Radio.Root
           value="gala-apple"
-          className="flex size-5 items-center justify-center rounded-full 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-4 items-center justify-center border rounded-full p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
         >
-          <Radio.Indicator className="flex before:size-2 before:rounded-full before:bg-gray-50 data-[unchecked]:hidden" />
+          <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>
         Gala
       </label>
 
-      <label className="flex items-center gap-2 font-normal">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
         <Radio.Root
           value="granny-smith-apple"
-          className="flex size-5 items-center justify-center rounded-full 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-4 items-center justify-center border rounded-full p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
         >
-          <Radio.Indicator className="flex before:size-2 before:rounded-full before:bg-gray-50 data-[unchecked]:hidden" />
+          <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>
         Granny Smith
       </label>

From 9d7a1808937fe0e558ad3568fe0fce97922eaa4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 17 Apr 2026 11:40:33 +0200
Subject: [PATCH 011/257] Meter brutalist

---
 .../demos/hero/css-modules/index.module.css      | 16 +++++++---------
 .../meter/demos/hero/tailwind/index.tsx          | 12 +++++++-----
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
index 672e538c15b..76f5d986600 100644
--- a/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
@@ -2,35 +2,33 @@
   box-sizing: border-box;
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-row-gap: 0.5rem;
-  width: 12rem;
+  row-gap: 0.5rem;
+  width: 15rem;
 }
 
 .Label {
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-900), var(--color-gray-50));
 }
 
 .Value {
-  grid-column-start: 2;
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-900), var(--color-gray-50));
   text-align: right;
 }
 
 .Track {
   grid-column: 1 / 3;
   overflow: hidden;
-  background-color: var(--color-gray-100);
-  box-shadow: inset 0 0 0 1px var(--color-gray-200);
-  height: 0.5rem;
+  height: 0.75rem;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
 }
 
 .Indicator {
-  background-color: var(--color-gray-500);
+  background-color: light-dark(var(--color-gray-900), var(--color-gray-50));
   transition: width 500ms;
 }
diff --git a/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx
index d42148d8482..fda7f0900fd 100644
--- a/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx
@@ -2,11 +2,13 @@ import { Meter } from '@base-ui/react/meter';
 
 export default function ExampleMeter() {
   return (
-    <Meter.Root className="box-border grid w-48 grid-cols-2 gap-y-2" value={24}>
-      <Meter.Label className="text-sm font-normal text-gray-900">Storage Used</Meter.Label>
-      <Meter.Value className="col-start-2 m-0 text-right text-sm leading-5 text-gray-900" />
-      <Meter.Track className="col-span-2 block h-2 w-48 overflow-hidden bg-gray-100 shadow-[inset_0_0_0_1px] shadow-gray-200">
-        <Meter.Indicator className="block bg-gray-500 transition-all duration-500" />
+    <Meter.Root className="box-border grid max-w-full w-60 grid-cols-2 gap-y-2" value={24}>
+      <Meter.Label className="text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
+        Storage Used
+      </Meter.Label>
+      <Meter.Value className="text-right text-sm leading-5 text-gray-900 dark:text-gray-50" />
+      <Meter.Track className="col-span-2 block h-3 overflow-hidden bg-gray-200 dark:bg-gray-800">
+        <Meter.Indicator className="block bg-gray-900 transition-[width] duration-500 dark:bg-gray-50" />
       </Meter.Track>
     </Meter.Root>
   );

From c96afc7848c07e5ae687a938825f4f86b5c133b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 17 Apr 2026 16:19:20 +0200
Subject: [PATCH 012/257] Switch brutalist

---
 .../demos/hero/css-modules/index.module.css   | 93 ++++---------------
 .../switch/demos/hero/tailwind/index.tsx      |  6 +-
 2 files changed, 21 insertions(+), 78 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
index c9ddd8f7f5b..e31e5d7fcae 100644
--- a/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
@@ -2,98 +2,41 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  color: light-dark(var(--color-gray-900), var(--color-gray-50));
 }
 
 .Switch {
   box-sizing: border-box;
-  position: relative;
   display: flex;
-  appearance: none;
-  border: 0;
-  margin: 0;
-  padding: 1px;
-  width: 2.5rem;
-  height: 1.5rem;
-  border-radius: 1.5rem;
-  outline: 1px solid;
-  outline-offset: -1px;
-  background-color: transparent;
-  background-image: linear-gradient(to right, var(--color-gray-700) 35%, var(--color-gray-200) 65%);
-  background-size: 6.5rem 100%;
-  background-position-x: 100%;
-  background-repeat: no-repeat;
-  transition-property: background-position, box-shadow;
-  transition-timing-function: cubic-bezier(0.26, 0.75, 0.38, 0.45);
-  transition-duration: 125ms;
-
-  &:active {
-    background-color: var(--color-gray-100);
-  }
+  flex-shrink: 0;
+  border: 1px solid light-dark(var(--color-gray-900), var(--color-gray-50));
+  padding: 0.125rem;
+  width: 2.25rem;
+  height: 1.25rem;
+  background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
 
   &[data-checked] {
-    background-position-x: 0%;
-  }
-
-  &[data-checked]:active {
-    background-color: var(--color-gray-500);
-  }
-
-  @media (prefers-color-scheme: light) {
-    box-shadow: var(--color-gray-200) 0 1.5px 2px inset;
-    outline-color: var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: rgb(0 0 0 / 75%) 0 1.5px 2px inset;
-    outline-color: rgb(255 255 255 / 15%);
-    background-image: linear-gradient(
-      to right,
-      var(--color-gray-500) 35%,
-      var(--color-gray-200) 65%
-    );
-
-    &[data-checked] {
-      box-shadow: none;
-    }
+    background-color: light-dark(var(--color-gray-900), var(--color-gray-50));
   }
 
   &:focus-visible {
-    &::before {
-      content: '';
-      inset: 0;
-      position: absolute;
-      border-radius: inherit;
-      outline: 2px solid var(--color-blue);
-      outline-offset: 2px;
-    }
+    outline-width: 2px;
+    outline-style: solid;
+    outline-offset: 2px;
   }
 }
 
 .Thumb {
-  aspect-ratio: 1 / 1;
-  height: 100%;
-  border-radius: 100%;
-  background-color: white;
+  width: 0.875rem;
+  height: 0.875rem;
+  background-color: light-dark(var(--color-gray-900), var(--color-gray-50));
   transition: translate 150ms ease;
 
   &[data-checked] {
     translate: 1rem 0;
-  }
-
-  @media (prefers-color-scheme: light) {
-    box-shadow:
-      0 0 1px 1px var(--color-gray-100),
-      0 1px 1px var(--color-gray-100),
-      1px 2px 4px -1px var(--color-gray-100);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow:
-      0 0 1px 1px rgb(0 0 0 / 25%),
-      0 1px 1px rgb(0 0 0 / 25%),
-      1px 2px 4px -1px rgb(0 0 0 / 25%);
+    background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
   }
 }
diff --git a/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
index 082a68f2999..a9725c6f3a9 100644
--- a/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
@@ -2,12 +2,12 @@ import { Switch } from '@base-ui/react/switch';
 
 export default function ExampleSwitch() {
   return (
-    <label className="flex items-center gap-2 text-base text-gray-900">
+    <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
       <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-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"
+        className="box-border flex h-5 w-9 shrink-0 border border-gray-900 bg-gray-50 p-0.5 dark:border-gray-50 dark:bg-gray-900 data-checked:bg-gray-900 dark:data-checked:bg-gray-50 focus-visible:outline-2 focus-visible:outline-offset-2"
       >
-        <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.Thumb className="size-3.5 bg-gray-900 transition-transform duration-150 data-checked:translate-x-4 data-checked:bg-gray-50 dark:bg-gray-50 dark:data-checked:bg-gray-900" />
       </Switch.Root>
       Notifications
     </label>

From fa18771ba20cfa13a4bd3ecb0b99ab3c8e2ba68f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 17 Apr 2026 16:23:44 +0200
Subject: [PATCH 013/257] Button demos: remove active state

---
 .../components/button/demos/hero/css-modules/index.module.css | 4 ----
 .../react/components/button/demos/hero/tailwind/index.tsx     | 2 +-
 .../button/demos/loading/css-modules/index.module.css         | 4 ----
 .../react/components/button/demos/loading/tailwind/index.tsx  | 2 +-
 4 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
index 16f5e03f3e1..a5787eedc75 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
@@ -22,10 +22,6 @@
     }
   }
 
-  &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-400), var(--color-gray-600));
-  }
-
   &:focus-visible {
     outline-width: 2px;
     outline-style: solid;
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
index ebb7becd2f9..33ef86ef93a 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Button } from '@base-ui/react/button';
 
 export default function ExampleButton() {
   return (
-    <Button className="flex items-center justify-center h-8 px-3.5 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-900 dark:text-gray-50 select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 active:not-data-disabled:bg-gray-400 dark:active:not-data-disabled:bg-gray-600 focus-visible:outline-2 focus-visible:outline-offset-2 data-disabled:text-gray-500 dark:data-disabled:text-gray-400">
+    <Button className="flex items-center justify-center h-8 px-3.5 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-900 dark:text-gray-50 select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 data-disabled:text-gray-500 dark:data-disabled:text-gray-400">
       Submit
     </Button>
   );
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
index 16f5e03f3e1..a5787eedc75 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
@@ -22,10 +22,6 @@
     }
   }
 
-  &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-400), var(--color-gray-600));
-  }
-
   &:focus-visible {
     outline-width: 2px;
     outline-style: solid;
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
index 59cc4fe48ad..f15ab19b55b 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleButton() {
 
   return (
     <Button
-      className="flex items-center justify-center h-8 px-3.5 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-900 dark:text-gray-50 select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 active:not-data-disabled:bg-gray-400 dark:active:not-data-disabled:bg-gray-600 focus-visible:outline-2 focus-visible:outline-offset-2 data-disabled:text-gray-500 dark:data-disabled:text-gray-400"
+      className="flex items-center justify-center h-8 px-3.5 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-900 dark:text-gray-50 select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 data-disabled:text-gray-500 dark:data-disabled:text-gray-400"
       disabled={loading}
       focusableWhenDisabled
       onClick={() => {

From 6a4048520e4e7e2a8f0d7a79946d98112817d8ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 17 Apr 2026 16:31:08 +0200
Subject: [PATCH 014/257] Checkbox / Radio demos: avoid shrinking

---
 .../checkbox-group/demos/hero/css-modules/index.module.css  | 1 +
 .../components/checkbox-group/demos/hero/tailwind/index.tsx | 6 +++---
 .../demos/nested/css-modules/index.module.css               | 1 +
 .../demos/parent/css-modules/index.module.css               | 1 +
 .../checkbox/demos/hero/css-modules/index.module.css        | 1 +
 .../react/components/checkbox/demos/hero/tailwind/index.tsx | 2 +-
 .../radio/demos/hero/css-modules/index.module.css           | 1 +
 .../react/components/radio/demos/hero/tailwind/index.tsx    | 6 +++---
 8 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
index 1761779a03b..dc976a73e36 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
@@ -24,6 +24,7 @@
 .Checkbox {
   box-sizing: border-box;
   display: flex;
+  flex-shrink: 0;
   width: 1rem;
   height: 1rem;
   align-items: center;
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
index ac8c96c05dd..53e128bf7dd 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
@@ -19,7 +19,7 @@ export default function ExampleCheckboxGroup() {
         <Checkbox.Root
           name="apple"
           value="fuji-apple"
-          className="flex size-4 items-center justify-center border rounded-none p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
         >
           <Checkbox.Indicator className="flex data-unchecked:hidden">
             <CheckIcon className="size-3" />
@@ -32,7 +32,7 @@ export default function ExampleCheckboxGroup() {
         <Checkbox.Root
           name="apple"
           value="gala-apple"
-          className="flex size-4 items-center justify-center border rounded-none p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
         >
           <Checkbox.Indicator className="flex data-unchecked:hidden">
             <CheckIcon className="size-3" />
@@ -45,7 +45,7 @@ export default function ExampleCheckboxGroup() {
         <Checkbox.Root
           name="apple"
           value="granny-smith-apple"
-          className="flex size-4 items-center justify-center border rounded-none p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
         >
           <Checkbox.Indicator className="flex data-unchecked:hidden">
             <CheckIcon className="size-3" />
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
index 1761779a03b..dc976a73e36 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
@@ -24,6 +24,7 @@
 .Checkbox {
   box-sizing: border-box;
   display: flex;
+  flex-shrink: 0;
   width: 1rem;
   height: 1rem;
   align-items: center;
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
index 1761779a03b..dc976a73e36 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
@@ -24,6 +24,7 @@
 .Checkbox {
   box-sizing: border-box;
   display: flex;
+  flex-shrink: 0;
   width: 1rem;
   height: 1rem;
   align-items: center;
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
index f565f19134e..d9c470c0ce4 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
@@ -11,6 +11,7 @@
 .Checkbox {
   box-sizing: border-box;
   display: flex;
+  flex-shrink: 0;
   width: 1rem;
   height: 1rem;
   align-items: center;
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
index 0b79a9cee49..28d9ffb16c6 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleCheckbox() {
     <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
       <Checkbox.Root
         defaultChecked
-        className="flex size-4 items-center justify-center border rounded-none p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
+        className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
       >
         <Checkbox.Indicator className="flex data-unchecked:hidden">
           <CheckIcon className="size-3" />
diff --git a/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
index 58833d8687c..e1e3726fa9c 100644
--- a/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
@@ -24,6 +24,7 @@
 .Radio {
   box-sizing: border-box;
   display: flex;
+  flex-shrink: 0;
   width: 1rem;
   height: 1rem;
   align-items: center;
diff --git a/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
index b55957a7c6b..3557bd1496c 100644
--- a/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function ExampleRadioGroup() {
       <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
         <Radio.Root
           value="fuji-apple"
-          className="flex size-4 items-center justify-center border rounded-full p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
         >
           <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>
@@ -28,7 +28,7 @@ export default function ExampleRadioGroup() {
       <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
         <Radio.Root
           value="gala-apple"
-          className="flex size-4 items-center justify-center border rounded-full p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
         >
           <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>
@@ -38,7 +38,7 @@ export default function ExampleRadioGroup() {
       <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
         <Radio.Root
           value="granny-smith-apple"
-          className="flex size-4 items-center justify-center border rounded-full p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
         >
           <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>

From 30a8d940e12c3add035667fe71b28ae2bf7d5bb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 22 Apr 2026 09:37:25 +0200
Subject: [PATCH 015/257] Move styles around

---
 .../button/demos/hero/css-modules/index.module.css        | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
index a5787eedc75..ccfe3435def 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
@@ -22,13 +22,13 @@
     }
   }
 
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
+
   &:focus-visible {
     outline-width: 2px;
     outline-style: solid;
     outline-offset: 2px;
   }
-
-  &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-  }
 }

From 0406cf7c5db9f19e4dc7306410379f6604bf756f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 22 Apr 2026 09:42:56 +0200
Subject: [PATCH 016/257] Toggle and ToggleGroup brutalist

---
 .../demos/hero/css-modules/index.module.css   | 33 ++++++++-------
 .../demos/hero/tailwind/index.tsx             |  8 ++--
 .../multiple/css-modules/index.module.css     | 40 ++++++++++---------
 .../demos/multiple/tailwind/index.tsx         |  8 ++--
 .../demos/hero/css-modules/index.module.css   | 36 +++++------------
 .../toggle/demos/hero/tailwind/index.tsx      | 32 +++++++--------
 .../toolbar/demos/hero/tailwind/index.tsx     |  8 ++--
 7 files changed, 75 insertions(+), 90 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
index eecbeaa6581..ba88bc5c6fe 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
@@ -1,10 +1,8 @@
 .Panel {
   display: flex;
   gap: 1px;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  border-radius: 0.375rem;
-  padding: 0.125rem;
+  padding: 1px;
+  border: 1px solid light-dark(var(--color-gray-900), var(--color-gray-50));
 }
 
 .Button {
@@ -16,26 +14,27 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  outline: 0;
-  border: 0;
-  border-radius: 0.25rem;
+  border: none;
+  border-radius: 0;
   background-color: transparent;
-  color: var(--color-gray-600);
+  color: light-dark(var(--color-gray-900), var(--color-gray-50));
   user-select: none;
 
-  &:focus-visible {
-    background-color: transparent;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    }
   }
 
-  &:active {
-    background-color: var(--color-gray-200);
+  &[data-pressed] {
+    background-color: light-dark(var(--color-gray-900), var(--color-gray-50));
+    color: light-dark(var(--color-gray-50), var(--color-gray-900));
   }
 
-  &[data-pressed] {
-    background-color: var(--color-gray-100);
-    color: var(--color-gray-900);
+  &:focus-visible {
+    outline-width: 2px;
+    outline-style: solid;
+    outline-offset: 2px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
index 2bcbca66a09..62a61cb0e56 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
@@ -6,26 +6,26 @@ export default function ExampleToggleGroup() {
   return (
     <ToggleGroup
       defaultValue={['left']}
-      className="flex gap-px rounded-md border border-gray-200 bg-gray-50 p-0.5"
+      className="flex gap-px p-px border border-gray-900 dark:border-gray-50"
     >
       <Toggle
         aria-label="Align left"
         value="left"
-        className="flex size-8 items-center justify-center rounded-sm text-gray-600 select-none 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 border-none rounded-none bg-transparent text-gray-900 dark:text-gray-50 select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-gray-50 dark:data-pressed:bg-gray-50 dark: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 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 border-none rounded-none bg-transparent text-gray-900 dark:text-gray-50 select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-gray-50 dark:data-pressed:bg-gray-50 dark: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 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 border-none rounded-none bg-transparent text-gray-900 dark:text-gray-50 select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-gray-50 dark:data-pressed:bg-gray-50 dark:data-pressed:text-gray-900"
       >
         <AlignRightIcon className="size-4" />
       </Toggle>
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
index fec16a36816..ba88bc5c6fe 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
@@ -1,10 +1,8 @@
 .Panel {
   display: flex;
   gap: 1px;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  border-radius: 0.375rem;
-  padding: 0.125rem;
+  padding: 1px;
+  border: 1px solid light-dark(var(--color-gray-900), var(--color-gray-50));
 }
 
 .Button {
@@ -16,27 +14,31 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  outline: 0;
-  border: 0;
-  border-radius: 0.25rem;
+  border: none;
+  border-radius: 0;
   background-color: transparent;
-  font-family: inherit;
-  font-size: 1rem;
-  color: var(--color-gray-600);
+  color: light-dark(var(--color-gray-900), var(--color-gray-50));
   user-select: none;
 
-  &:focus-visible {
-    background-color: transparent;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    }
   }
 
-  &:active {
-    background-color: var(--color-gray-200);
+  &[data-pressed] {
+    background-color: light-dark(var(--color-gray-900), var(--color-gray-50));
+    color: light-dark(var(--color-gray-50), var(--color-gray-900));
   }
 
-  &[data-pressed] {
-    background-color: var(--color-gray-100);
-    color: var(--color-gray-900);
+  &:focus-visible {
+    outline-width: 2px;
+    outline-style: solid;
+    outline-offset: 2px;
   }
 }
+
+.Icon {
+  width: 1rem;
+  height: 1rem;
+}
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
index c0894576520..87a1bcdfef0 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
@@ -7,26 +7,26 @@ export default function ExampleToggleGroupMultiple() {
       multiple
       defaultValue={['bold', 'italic']}
       aria-label="Text formatting options"
-      className="flex gap-px rounded-md border border-gray-200 bg-gray-50 p-0.5"
+      className="flex gap-px p-px border border-gray-900 dark:border-gray-50"
     >
       <Toggle
         aria-label="Bold"
         value="bold"
-        className="flex size-8 items-center justify-center rounded-sm text-gray-600 select-none 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 border-none rounded-none bg-transparent text-gray-900 dark:text-gray-50 select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-gray-50 dark:data-pressed:bg-gray-50 dark:data-pressed:text-gray-900"
       >
         <BoldIcon />
       </Toggle>
       <Toggle
         aria-label="Italic"
         value="italic"
-        className="flex size-8 items-center justify-center rounded-sm text-gray-600 select-none 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 border-none rounded-none bg-transparent text-gray-900 dark:text-gray-50 select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-gray-50 dark:data-pressed:bg-gray-50 dark:data-pressed:text-gray-900"
       >
         <ItalicIcon />
       </Toggle>
       <Toggle
         aria-label="Underline"
         value="underline"
-        className="flex size-8 items-center justify-center rounded-sm text-gray-600 select-none 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 border-none rounded-none bg-transparent text-gray-900 dark:text-gray-50 select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-gray-50 dark:data-pressed:bg-gray-50 dark:data-pressed:text-gray-900"
       >
         <UnderlineIcon />
       </Toggle>
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
index c9b1897717c..e5c8c10a2aa 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
@@ -1,12 +1,3 @@
-.Panel {
-  display: flex;
-  gap: 1px;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  border-radius: 0.375rem;
-  padding: 0.125rem;
-}
-
 .Button {
   box-sizing: border-box;
   display: flex;
@@ -16,31 +7,26 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  outline: 0;
-  border: 0;
-  border-radius: 0.25rem;
+  border: none;
+  border-radius: 0;
   background-color: transparent;
-  color: var(--color-gray-600);
+  color: light-dark(var(--color-gray-900), var(--color-gray-50));
   user-select: none;
 
-  &:focus-visible {
-    background-color: transparent;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-200);
+  &[data-pressed] {
+    color: light-dark(var(--color-gray-900), var(--color-gray-50));
   }
 
-  &[data-pressed] {
-    color: var(--color-gray-900);
+  &:focus-visible {
+    outline-width: 2px;
+    outline-style: solid;
+    outline-offset: 2px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
index d6aa1dd3d81..2cd91748007 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
@@ -4,27 +4,25 @@ import { Toggle } from '@base-ui/react/toggle';
 
 export default function ExampleToggle() {
   return (
-    <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-xs 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"
-        render={(props, state) => {
-          if (state.pressed) {
-            return (
-              <button type="button" {...props}>
-                <HeartFilledIcon className="size-5" />
-              </button>
-            );
-          }
-
+    <Toggle
+      aria-label="Favorite"
+      className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-gray-50 select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:text-gray-900 dark:data-pressed:text-gray-50"
+      render={(props, state) => {
+        if (state.pressed) {
           return (
             <button type="button" {...props}>
-              <HeartOutlineIcon className="size-5" />
+              <HeartFilledIcon className="size-5" />
             </button>
           );
-        }}
-      />
-    </div>
+        }
+
+        return (
+          <button type="button" {...props}>
+            <HeartOutlineIcon className="size-5" />
+          </button>
+        );
+      }}
+    />
   );
 }
 
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
index fdd6b779292..588c6957673 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleToolbar() {
           render={<Toggle />}
           aria-label="Align left"
           value="align-left"
-          className="flex h-8 items-center justify-center rounded-xs px-[0.75rem] font-[inherit] text-sm font-normal 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 h-8 items-center justify-center rounded-xs px-[0.75rem] font-[inherit] text-sm font-normal 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"
         >
           Align Left
         </Toolbar.Button>
@@ -20,7 +20,7 @@ export default function ExampleToolbar() {
           render={<Toggle />}
           aria-label="Align right"
           value="align-right"
-          className="flex h-8 items-center justify-center rounded-xs px-[0.75rem] font-[inherit] text-sm font-normal 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 h-8 items-center justify-center rounded-xs px-[0.75rem] font-[inherit] text-sm font-normal 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"
         >
           Align Right
         </Toolbar.Button>
@@ -28,13 +28,13 @@ export default function ExampleToolbar() {
       <Toolbar.Separator className="m-1 h-4 w-px bg-gray-300" />
       <Toolbar.Group className="flex gap-1" aria-label="Numerical format">
         <Toolbar.Button
-          className="flex size-8 items-center justify-center rounded-xs px-[0.75rem] font-[inherit] text-sm font-normal 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-xs px-[0.75rem] font-[inherit] text-sm font-normal 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"
           aria-label="Format as currency"
         >
           $
         </Toolbar.Button>
         <Toolbar.Button
-          className="flex size-8 items-center justify-center rounded-xs px-[0.75rem] font-[inherit] text-sm font-normal 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-xs px-[0.75rem] font-[inherit] text-sm font-normal 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"
           aria-label="Format as percent"
         >
           %

From 3cbdbf812d6800d9d767ef94745ae4820f3e1823 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 22 Apr 2026 12:13:06 +0200
Subject: [PATCH 017/257] Accordion brutalist

---
 .../accordion/demos/_index.module.css         | 56 ++++++++-----------
 .../demos/hero/css-modules/index.tsx          |  5 +-
 .../accordion/demos/hero/tailwind/index.tsx   | 37 ++++++------
 .../demos/multiple/css-modules/index.tsx      |  5 +-
 .../demos/multiple/tailwind/index.tsx         | 37 ++++++------
 5 files changed, 67 insertions(+), 73 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
index 002f68bc865..6cc7c905e22 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
@@ -1,15 +1,11 @@
 .Accordion {
   box-sizing: border-box;
   display: flex;
-  width: 24rem;
-  max-width: calc(100vw - 8rem);
+  width: 20rem;
+  max-width: 100%;
   flex-direction: column;
-  justify-content: center;
-  color: var(--color-gray-900);
-}
-
-.Item {
-  border-bottom: 1px solid var(--color-gray-200);
+  border-bottom: 1px solid light-dark(var(--color-gray-900), var(--color-gray-50));
+  color: light-dark(var(--color-gray-900), var(--color-gray-50));
 }
 
 .Header {
@@ -18,32 +14,28 @@
 
 .Trigger {
   box-sizing: border-box;
-  position: relative;
   display: flex;
   width: 100%;
-  gap: 1rem;
-  align-items: baseline;
+  align-items: center;
   justify-content: space-between;
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem 0.25rem;
-  color: var(--color-gray-900);
+  gap: 1rem;
+  padding: 0.5rem 0;
+  margin: 0;
+  border: none;
+  border-top: 1px solid light-dark(var(--color-gray-900), var(--color-gray-50));
+  border-radius: 0;
+  background-color: transparent;
+  color: light-dark(var(--color-gray-900), var(--color-gray-50));
   font-family: inherit;
+  font-size: 0.875rem;
   font-weight: 400;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  background: var(--color-gray-50);
-  border: none;
-  outline: none;
+  line-height: 1.25rem;
   text-align: left;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
+  user-select: none;
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline-width: 2px;
+    outline-style: solid;
     z-index: 1;
   }
 }
@@ -53,11 +45,10 @@
   flex-shrink: 0;
   width: 0.75rem;
   height: 0.75rem;
-  margin-right: 0.5rem;
-  transition: transform 150ms ease-out;
+  transition: transform 100ms ease-out;
 
   [data-panel-open] > & {
-    transform: rotate(45deg) scale(1.1);
+    transform: rotate(45deg);
   }
 }
 
@@ -65,9 +56,8 @@
   box-sizing: border-box;
   height: var(--accordion-panel-height);
   overflow: hidden;
-  color: var(--color-gray-600);
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   transition: height 150ms ease-out;
 
   &[data-starting-style],
@@ -77,5 +67,5 @@
 }
 
 .Content {
-  padding: 0.75rem;
+  padding: 0.5rem 0;
 }
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/hero/css-modules/index.tsx
index d60c7c3e6c2..e18100da67e 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/hero/css-modules/index.tsx
@@ -52,8 +52,9 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="currentColor" {...props}>
-      <path d="M6.75 0H5.25V5.25H0V6.75L5.25 6.75V12H6.75V6.75L12 6.75V5.25H6.75V0Z" />
+    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+      <path d="M6 0.5V11.5" />
+      <path d="M0.5 6H11.5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
index df4ac5bf32e..625e89ab46a 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
@@ -3,46 +3,46 @@ import { Accordion } from '@base-ui/react/accordion';
 
 export default function ExampleAccordion() {
   return (
-    <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.Root className="flex w-80 max-w-full flex-col border-b border-gray-900 text-gray-900 dark:border-gray-50 dark:text-gray-50">
+      <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-gray-50 dark:text-gray-50">
             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" />
+            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out 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-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm leading-5 transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="py-2">
             Base UI is a library of high-quality unstyled React components for design systems and
             web apps.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item className="border-b border-gray-200">
+      <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-gray-50 dark:text-gray-50">
             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" />
+            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out 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-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm leading-5 transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="py-2">
             Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before,
             you’ll feel at home.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item className="border-b border-gray-200">
+      <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-gray-50 dark:text-gray-50">
             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" />
+            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out 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-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">Of course! Base UI is free and open source.</div>
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm leading-5 transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="py-2">Of course! Base UI is free and open source.</div>
         </Accordion.Panel>
       </Accordion.Item>
     </Accordion.Root>
@@ -51,8 +51,9 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="currentColor" {...props}>
-      <path d="M6.75 0H5.25V5.25H0V6.75L5.25 6.75V12H6.75V6.75L12 6.75V5.25H6.75V0Z" />
+    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+      <path d="M6 0.5V11.5" />
+      <path d="M0.5 6H11.5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/multiple/css-modules/index.tsx
index 0ab74c0a935..564ab43b5c8 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/multiple/css-modules/index.tsx
@@ -52,8 +52,9 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="currentColor" {...props}>
-      <path d="M6.75 0H5.25V5.25H0V6.75L5.25 6.75V12H6.75V6.75L12 6.75V5.25H6.75V0Z" />
+    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+      <path d="M6 0.5V11.5" />
+      <path d="M0.5 6H11.5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
index 922d0761478..ad20b344111 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
@@ -5,47 +5,47 @@ export default function ExampleAccordion() {
   return (
     <Accordion.Root
       multiple
-      className="flex w-96 max-w-[calc(100vw-8rem)] flex-col justify-center text-gray-900"
+      className="flex w-80 max-w-full flex-col border-b border-gray-900 text-gray-900 dark:border-gray-50 dark:text-gray-50"
     >
-      <Accordion.Item className="border-b border-gray-200">
+      <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-gray-50 dark:text-gray-50">
             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" />
+            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out 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-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm leading-5 transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="py-2">
             Base UI is a library of high-quality unstyled React components for design systems and
             web apps.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item className="border-b border-gray-200">
+      <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-gray-50 dark:text-gray-50">
             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" />
+            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out 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-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm leading-5 transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="py-2">
             Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before,
             you’ll feel at home.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item className="border-b border-gray-200">
+      <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-gray-50 dark:text-gray-50">
             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" />
+            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out 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-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">Of course! Base UI is free and open source.</div>
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm leading-5 transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="py-2">Of course! Base UI is free and open source.</div>
         </Accordion.Panel>
       </Accordion.Item>
     </Accordion.Root>
@@ -54,8 +54,9 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="currentColor" {...props}>
-      <path d="M6.75 0H5.25V5.25H0V6.75L5.25 6.75V12H6.75V6.75L12 6.75V5.25H6.75V0Z" />
+    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+      <path d="M6 0.5V11.5" />
+      <path d="M0.5 6H11.5" />
     </svg>
   );
 }

From 884255fbbf03be7fe9c94cdf08b7f5392547b17b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 22 Apr 2026 12:17:13 +0200
Subject: [PATCH 018/257] Toggle: adjust icon size

---
 .../components/toggle/demos/hero/css-modules/index.module.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
index e5c8c10a2aa..a310f786d2c 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
@@ -31,6 +31,6 @@
 }
 
 .Icon {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1rem;
+  height: 1rem;
 }

From 23c49e4cb9764c786ea4b601614f4e6256f66c83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 22 Apr 2026 12:24:15 +0200
Subject: [PATCH 019/257] Toggle: adjust icon size

---
 .../react/components/toggle/demos/hero/tailwind/index.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
index 2cd91748007..67ca2b6a04a 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
@@ -11,14 +11,14 @@ export default function ExampleToggle() {
         if (state.pressed) {
           return (
             <button type="button" {...props}>
-              <HeartFilledIcon className="size-5" />
+              <HeartFilledIcon className="size-4" />
             </button>
           );
         }
 
         return (
           <button type="button" {...props}>
-            <HeartOutlineIcon className="size-5" />
+            <HeartOutlineIcon className="size-4" />
           </button>
         );
       }}

From 9058b90114e2da1c4293b9626c70dfd711005e05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 22 Apr 2026 12:58:37 +0200
Subject: [PATCH 020/257] mergeProps brutalist

---
 .../css-modules/index.module.css              | 74 +++++++------------
 .../css-modules/index.tsx                     | 34 ++++-----
 2 files changed, 42 insertions(+), 66 deletions(-)

diff --git a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
index 34d90ef0cb0..694e1908ba8 100644
--- a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
@@ -7,25 +7,16 @@
 .ToggleRow {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.5rem;
 }
 
 .Label {
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-900), var(--color-gray-50));
 }
 
-.Panel {
-  display: flex;
-  gap: 1px;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  border-radius: 0.375rem;
-  padding: 0.125rem;
-}
-
-.Button {
+.Toggle {
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -34,70 +25,57 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  outline: 0;
-  border: 0;
-  border-radius: 0.25rem;
+  border: none;
+  border-radius: 0;
   background-color: transparent;
-  color: var(--color-gray-600);
+  color: light-dark(var(--color-gray-900), var(--color-gray-50));
   user-select: none;
 
-  &:focus-visible {
-    background-color: transparent;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-200);
-  }
-
-  &[data-pressed] {
-    color: var(--color-gray-900);
+  &:focus-visible {
+    outline-width: 2px;
+    outline-style: solid;
+    outline-offset: 2px;
   }
 }
 
 .Icon {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1rem;
+  height: 1rem;
 }
 
-.LockButton {
+.Button {
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
+  height: 2rem;
   padding: 0 0.875rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: none;
+  border-radius: 0;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-900), var(--color-gray-50));
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline-width: 2px;
+    outline-style: solid;
+    outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.tsx b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.tsx
index a2f998a9b4b..11a25703c87 100644
--- a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.tsx
@@ -19,26 +19,24 @@ export default function ExamplePreventBaseUIHandler() {
   return (
     <div className={styles.Container}>
       <div className={styles.ToggleRow}>
-        <div className={styles.Panel}>
-          <Toggle
-            aria-label="Favorite"
-            pressed={pressed}
-            onPressedChange={setPressed}
-            className={styles.Button}
-            render={(props, state) => (
-              <button type="button" {...getToggleProps(props)}>
-                {state.pressed ? (
-                  <HeartFilledIcon className={styles.Icon} />
-                ) : (
-                  <HeartOutlineIcon className={styles.Icon} />
-                )}
-              </button>
-            )}
-          />
-        </div>
+        <Toggle
+          aria-label="Favorite"
+          pressed={pressed}
+          onPressedChange={setPressed}
+          className={styles.Toggle}
+          render={(props, state) => (
+            <button type="button" {...getToggleProps(props)}>
+              {state.pressed ? (
+                <HeartFilledIcon className={styles.Icon} />
+              ) : (
+                <HeartOutlineIcon className={styles.Icon} />
+              )}
+            </button>
+          )}
+        />
         <span className={styles.Label}>Favorite {locked ? '(locked)' : '(unlocked)'}</span>
       </div>
-      <button type="button" className={styles.LockButton} onClick={() => setLocked((l) => !l)}>
+      <button type="button" className={styles.Button} onClick={() => setLocked((l) => !l)}>
         {locked ? 'Unlock' : 'Lock'}
       </button>
     </div>

From 491f867a3cb4f266ec01b53fe152881910eb9d4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 22 Apr 2026 13:06:49 +0200
Subject: [PATCH 021/257] Avatar brutalist

---
 .../avatar/demos/hero/css-modules/index.module.css   | 12 ++++++------
 .../avatar/demos/hero/css-modules/index.tsx          |  2 +-
 .../components/avatar/demos/hero/tailwind/index.tsx  | 11 ++++-------
 3 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css
index bf5e9c66394..01ca208821e 100644
--- a/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css
@@ -6,13 +6,13 @@
   border-radius: 100%;
   user-select: none;
   font-weight: 400;
-  color: var(--color-gray-900);
-  background-color: var(--color-gray-100);
-  font-size: 1rem;
+  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  font-size: 0.875rem;
   line-height: 1;
   overflow: hidden;
-  height: 3rem;
-  width: 3rem;
+  height: 2rem;
+  width: 2rem;
 }
 
 .Image {
@@ -27,5 +27,5 @@
   justify-content: center;
   height: 100%;
   width: 100%;
-  font-size: 1rem;
+  font-size: 0.875rem;
 }
diff --git a/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.tsx
index 3fccf92002f..a747c847965 100644
--- a/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.tsx
@@ -3,7 +3,7 @@ import styles from './index.module.css';
 
 export default function ExampleAvatar() {
   return (
-    <div style={{ display: 'flex', gap: 20 }}>
+    <div style={{ display: 'flex', gap: '1rem' }}>
       <Avatar.Root className={styles.Root}>
         <Avatar.Image
           src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
diff --git a/docs/src/app/(docs)/react/components/avatar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/avatar/demos/hero/tailwind/index.tsx
index a88e7763a35..ae4175c91c9 100644
--- a/docs/src/app/(docs)/react/components/avatar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/avatar/demos/hero/tailwind/index.tsx
@@ -2,22 +2,19 @@ import { Avatar } from '@base-ui/react/avatar';
 
 export default function ExampleAvatar() {
   return (
-    <div style={{ display: 'flex', gap: 20 }}>
-      <Avatar.Root className="inline-flex size-12 items-center justify-center overflow-hidden rounded-full bg-gray-100 align-middle text-base text-gray-900 select-none">
+    <div className="flex gap-4">
+      <Avatar.Root className="inline-flex size-8 items-center justify-center overflow-hidden rounded-full bg-gray-200 align-middle text-sm leading-none font-normal text-gray-900 select-none dark:bg-gray-800 dark:text-gray-50">
         <Avatar.Image
           src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
           width="48"
           height="48"
           className="size-full object-cover"
         />
-        <Avatar.Fallback
-          delay={600}
-          className="flex size-full items-center justify-center text-base"
-        >
+        <Avatar.Fallback delay={600} className="flex size-full items-center justify-center text-sm">
           LT
         </Avatar.Fallback>
       </Avatar.Root>
-      <Avatar.Root className="inline-flex size-12 items-center justify-center overflow-hidden rounded-full bg-gray-100 align-middle text-base text-gray-900 select-none">
+      <Avatar.Root className="inline-flex size-8 items-center justify-center overflow-hidden rounded-full bg-gray-200 align-middle text-sm leading-none font-normal text-gray-900 select-none dark:bg-gray-800 dark:text-gray-50">
         LT
       </Avatar.Root>
     </div>

From 1394a3acf5814dbb86d7c583a92943f19702d721 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 22 Apr 2026 14:57:25 +0200
Subject: [PATCH 022/257] Collapsible brutalist

---
 .../demos/hero/css-modules/index.module.css   | 39 +++++++++----------
 .../demos/hero/css-modules/index.tsx          |  2 +-
 .../collapsible/demos/hero/tailwind/index.tsx | 10 ++---
 3 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
index 6281d386434..c1e73789fb5 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
@@ -4,43 +4,44 @@
   min-height: 9rem;
   flex-direction: column;
   justify-content: center;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-900), var(--color-gray-50));
 }
 
 .Icon {
   width: 0.75rem;
   height: 0.75rem;
-  transition: transform 150ms ease-out;
+  transition: transform 100ms ease-out;
 }
 
 .Trigger {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 0.5rem;
+  height: 2rem;
+  padding: 0 0.875rem;
   margin: 0;
-  border: 0;
-  outline: 0;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  background-color: var(--color-gray-100);
-  color: var(--color-gray-900);
+  border: none;
+  border-radius: 0;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  color: light-dark(var(--color-gray-900), var(--color-gray-50));
   font-family: inherit;
   font-size: 0.875rem;
-  line-height: 1.25rem;
   font-weight: 400;
+  line-height: 1.25rem;
+  user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-200);
+      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-200);
-  }
-
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline-width: 2px;
+    outline-style: solid;
+    outline-offset: 2px;
   }
 
   &[data-panel-open] .Icon {
@@ -56,7 +57,7 @@
   overflow: hidden;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  transition: all 150ms ease-out;
+  transition: height 150ms ease-out;
 
   &[hidden]:not([hidden='until-found']) {
     display: none;
@@ -72,9 +73,5 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  margin-top: 0.25rem;
-  padding: 0.5rem 0 0.5rem 1.75rem;
-  border-radius: 0.25rem;
-  background-color: var(--color-gray-100);
-  cursor: text;
+  padding: 0.5rem 0.875rem;
 }
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx
index 6bf5515d83f..75436bc6bdc 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx
@@ -6,8 +6,8 @@ export default function ExampleCollapsible() {
   return (
     <Collapsible.Root className={styles.Collapsible}>
       <Collapsible.Trigger className={styles.Trigger}>
-        <ChevronIcon className={styles.Icon} />
         Recovery keys
+        <ChevronIcon className={styles.Icon} />
       </Collapsible.Trigger>
       <Collapsible.Panel className={styles.Panel}>
         <div className={styles.Content}>
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
index 47129af3866..2f8239beab9 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
@@ -3,13 +3,13 @@ import { Collapsible } from '@base-ui/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-xs bg-gray-100 px-2 py-1 text-sm font-normal hover:bg-gray-200 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" />
+    <Collapsible.Root className="flex min-h-36 w-56 flex-col justify-center text-gray-900 dark:text-gray-50">
+      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none bg-gray-200 px-3.5 text-sm leading-5 font-normal text-gray-900 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-700">
         Recovery keys
+        <ChevronIcon className="size-3 transition-transform duration-100 ease-out group-data-panel-open:rotate-90" />
       </Collapsible.Trigger>
-      <Collapsible.Panel className="flex [&[hidden]:not([hidden='until-found'])]:hidden 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 duration-150">
-        <div className="mt-1 flex cursor-text flex-col gap-2 rounded-xs bg-gray-100 py-2 pl-7">
+      <Collapsible.Panel className="flex h-[var(--collapsible-panel-height)] flex-col justify-end overflow-hidden text-sm leading-5 transition-[height] duration-150 ease-out [&[hidden]:not([hidden='until-found'])]:hidden data-ending-style:h-0 data-starting-style:h-0">
+        <div className="flex flex-col gap-2 px-3.5 py-2">
           <div>alien-bean-pasta</div>
           <div>wild-irish-burrito</div>
           <div>horse-battery-staple</div>

From 662cdd646854d2b4d88c99345e15335ebd69d917 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 22 Apr 2026 15:14:45 +0200
Subject: [PATCH 023/257] Meter tweaks

---
 .../meter/demos/hero/css-modules/index.module.css           | 3 +--
 .../react/components/meter/demos/hero/tailwind/index.tsx    | 6 +++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
index 76f5d986600..f9ff4e62978 100644
--- a/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
@@ -1,9 +1,9 @@
 .Meter {
-  box-sizing: border-box;
   display: grid;
   grid-template-columns: 1fr 1fr;
   row-gap: 0.5rem;
   width: 15rem;
+  max-width: 100%;
 }
 
 .Label {
@@ -14,7 +14,6 @@
 }
 
 .Value {
-  margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: light-dark(var(--color-gray-900), var(--color-gray-50));
diff --git a/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx
index fda7f0900fd..727edcaec94 100644
--- a/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx
@@ -2,13 +2,13 @@ import { Meter } from '@base-ui/react/meter';
 
 export default function ExampleMeter() {
   return (
-    <Meter.Root className="box-border grid max-w-full w-60 grid-cols-2 gap-y-2" value={24}>
+    <Meter.Root className="grid max-w-full w-60 grid-cols-2 gap-y-2" value={24}>
       <Meter.Label className="text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
         Storage Used
       </Meter.Label>
       <Meter.Value className="text-right text-sm leading-5 text-gray-900 dark:text-gray-50" />
-      <Meter.Track className="col-span-2 block h-3 overflow-hidden bg-gray-200 dark:bg-gray-800">
-        <Meter.Indicator className="block bg-gray-900 transition-[width] duration-500 dark:bg-gray-50" />
+      <Meter.Track className="col-span-2 h-3 overflow-hidden bg-gray-200 dark:bg-gray-800">
+        <Meter.Indicator className="bg-gray-900 transition-[width] duration-500 dark:bg-gray-50" />
       </Meter.Track>
     </Meter.Root>
   );

From df0142b1065c411c4499450f46439879dd139456 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 22 Apr 2026 15:15:05 +0200
Subject: [PATCH 024/257] Progress brutalist

---
 .../demos/hero/css-modules/index.module.css   | 19 +++++++------------
 .../progress/demos/hero/tailwind/index.tsx    | 12 +++++++-----
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css
index 97471a4a18f..59bee552635 100644
--- a/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css
@@ -1,38 +1,33 @@
 .Progress {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-gap: 0.25rem;
-  grid-row-gap: 0.5rem;
-  width: 12rem;
+  row-gap: 0.5rem;
+  width: 15rem;
+  max-width: 100%;
 }
 
 .Label {
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-900), var(--color-gray-50));
 }
 
 .Value {
-  grid-column-start: 2;
-  margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-900), var(--color-gray-50));
   text-align: right;
 }
 
 .Track {
   grid-column: 1 / 3;
   overflow: hidden;
-  background-color: var(--color-gray-200);
-  box-shadow: inset 0 0 0 1px var(--color-gray-200);
   height: 0.25rem;
-  border-radius: 0.25rem;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
 }
 
 .Indicator {
-  display: block;
-  background-color: var(--color-gray-500);
+  background-color: light-dark(var(--color-gray-900), var(--color-gray-50));
   transition: width 500ms;
 }
diff --git a/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx
index da8cd8a1409..9de0a6ed79f 100644
--- a/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx
@@ -14,11 +14,13 @@ export default function ExampleProgress() {
   }, []);
 
   return (
-    <Progress.Root className="grid w-48 grid-cols-2 gap-y-2" value={value}>
-      <Progress.Label className="text-sm font-normal text-gray-900">Export data</Progress.Label>
-      <Progress.Value className="col-start-2 text-right text-sm text-gray-900" />
-      <Progress.Track className="col-span-full h-1 overflow-hidden rounded-sm bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200">
-        <Progress.Indicator className="block bg-gray-500 transition-all duration-500" />
+    <Progress.Root className="grid max-w-full w-60 grid-cols-2 gap-y-2" value={value}>
+      <Progress.Label className="text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
+        Export data
+      </Progress.Label>
+      <Progress.Value className="text-right text-sm leading-5 text-gray-900 dark:text-gray-50" />
+      <Progress.Track className="col-span-2 h-1 overflow-hidden bg-gray-200 dark:bg-gray-800">
+        <Progress.Indicator className="bg-gray-900 transition-[width] duration-500 dark:bg-gray-50" />
       </Progress.Track>
     </Progress.Root>
   );

From a83d5c30612428c2777d440a508bbe4b1b73632e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 23 Apr 2026 10:05:49 +0200
Subject: [PATCH 025/257] Slider brutalist

---
 .../edge-alignment/css-modules/index.module.css  | 16 +++++++---------
 .../demos/edge-alignment/tailwind/index.tsx      |  6 +++---
 .../demos/hero/css-modules/index.module.css      | 16 +++++++---------
 .../slider/demos/hero/tailwind/index.tsx         |  6 +++---
 .../range-slider/css-modules/index.module.css    | 16 +++++++---------
 .../slider/demos/range-slider/tailwind/index.tsx |  8 ++++----
 .../demos/vertical/css-modules/index.module.css  | 16 +++++++---------
 .../slider/demos/vertical/tailwind/index.tsx     |  6 +++---
 8 files changed, 41 insertions(+), 49 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css
index ae9aa629dee..9a173c08c13 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css
@@ -11,27 +11,25 @@
 .Track {
   width: 100%;
   height: 0.25rem;
-  background-color: var(--color-gray-200);
-  box-shadow: inset 0 0 0 1px var(--color-gray-200);
-  border-radius: 0.25rem;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   user-select: none;
 }
 
 .Indicator {
-  border-radius: 0.25rem;
-  background-color: var(--color-gray-700);
+  background-color: light-dark(var(--color-gray-900), white);
   user-select: none;
 }
 
 .Thumb {
+  box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border-radius: 100%;
-  background-color: white;
-  outline: 1px solid var(--color-gray-300);
+  border: 1px solid light-dark(var(--color-gray-900), white);
+  background-color: light-dark(white, var(--color-gray-900));
   user-select: none;
 
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx
index 3d4351277ef..c434ff5db94 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx
@@ -4,9 +4,9 @@ export default function EdgeAlignedThumb() {
   return (
     <Slider.Root thumbAlignment="edge" defaultValue={25}>
       <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
-        <Slider.Track className="h-1 w-full rounded-sm bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200 select-none">
-          <Slider.Indicator className="rounded-sm bg-gray-700 select-none" />
-          <Slider.Thumb className="size-4 rounded-full bg-white outline-1 outline-gray-300 select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800" />
+        <Slider.Track className="h-1 w-full bg-gray-200 select-none dark:bg-gray-800">
+          <Slider.Indicator className="bg-gray-900 select-none dark:bg-white" />
+          <Slider.Thumb className="box-border size-4 border border-gray-900 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-gray-900" />
         </Slider.Track>
       </Slider.Control>
     </Slider.Root>
diff --git a/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css
index ae9aa629dee..9a173c08c13 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css
@@ -11,27 +11,25 @@
 .Track {
   width: 100%;
   height: 0.25rem;
-  background-color: var(--color-gray-200);
-  box-shadow: inset 0 0 0 1px var(--color-gray-200);
-  border-radius: 0.25rem;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   user-select: none;
 }
 
 .Indicator {
-  border-radius: 0.25rem;
-  background-color: var(--color-gray-700);
+  background-color: light-dark(var(--color-gray-900), white);
   user-select: none;
 }
 
 .Thumb {
+  box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border-radius: 100%;
-  background-color: white;
-  outline: 1px solid var(--color-gray-300);
+  border: 1px solid light-dark(var(--color-gray-900), white);
+  background-color: light-dark(white, var(--color-gray-900));
   user-select: none;
 
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx
index aa7db73bf0b..9f03888f65a 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx
@@ -4,11 +4,11 @@ export default function ExampleSlider() {
   return (
     <Slider.Root defaultValue={25}>
       <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
-        <Slider.Track className="h-1 w-full rounded-sm bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200 select-none">
-          <Slider.Indicator className="rounded-sm bg-gray-700 select-none" />
+        <Slider.Track className="h-1 w-full bg-gray-200 select-none dark:bg-gray-800">
+          <Slider.Indicator className="bg-gray-900 select-none dark:bg-white" />
           <Slider.Thumb
             aria-label="Volume"
-            className="size-4 rounded-full bg-white outline-1 outline-gray-300 select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800"
+            className="box-border size-4 border border-gray-900 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-gray-900"
           />
         </Slider.Track>
       </Slider.Control>
diff --git a/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css
index ae9aa629dee..9a173c08c13 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css
@@ -11,27 +11,25 @@
 .Track {
   width: 100%;
   height: 0.25rem;
-  background-color: var(--color-gray-200);
-  box-shadow: inset 0 0 0 1px var(--color-gray-200);
-  border-radius: 0.25rem;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   user-select: none;
 }
 
 .Indicator {
-  border-radius: 0.25rem;
-  background-color: var(--color-gray-700);
+  background-color: light-dark(var(--color-gray-900), white);
   user-select: none;
 }
 
 .Thumb {
+  box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border-radius: 100%;
-  background-color: white;
-  outline: 1px solid var(--color-gray-300);
+  border: 1px solid light-dark(var(--color-gray-900), white);
+  background-color: light-dark(white, var(--color-gray-900));
   user-select: none;
 
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx
index a6302490890..bc1f3487f44 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx
@@ -4,17 +4,17 @@ export default function RangeSlider() {
   return (
     <Slider.Root defaultValue={[25, 45]}>
       <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
-        <Slider.Track className="h-1 w-full rounded-sm bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200 select-none">
-          <Slider.Indicator className="rounded-sm bg-gray-700 select-none" />
+        <Slider.Track className="h-1 w-full bg-gray-200 select-none dark:bg-gray-800">
+          <Slider.Indicator className="bg-gray-900 select-none dark:bg-white" />
           <Slider.Thumb
             index={0}
             aria-label="Minimum value"
-            className="size-4 rounded-full bg-white outline-1 outline-gray-300 select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800"
+            className="box-border size-4 border border-gray-900 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-gray-900"
           />
           <Slider.Thumb
             index={1}
             aria-label="Maximum value"
-            className="size-4 rounded-full bg-white outline-1 outline-gray-300 select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800"
+            className="box-border size-4 border border-gray-900 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-gray-900"
           />
         </Slider.Track>
       </Slider.Control>
diff --git a/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css
index 117746a3cf9..33ddcd60e97 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css
@@ -11,9 +11,7 @@
 }
 
 .Track {
-  background-color: var(--color-gray-200);
-  box-shadow: inset 0 0 0 1px var(--color-gray-200);
-  border-radius: 0.25rem;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   user-select: none;
 
   &[data-orientation='vertical'] {
@@ -23,20 +21,20 @@
 }
 
 .Indicator {
-  border-radius: 0.25rem;
-  background-color: var(--color-gray-700);
+  background-color: light-dark(var(--color-gray-900), white);
   user-select: none;
 }
 
 .Thumb {
+  box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border-radius: 100%;
-  background-color: white;
-  outline: 1px solid var(--color-gray-300);
+  border: 1px solid light-dark(var(--color-gray-900), white);
+  background-color: light-dark(white, var(--color-gray-900));
   user-select: none;
 
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx
index afabb86cc1b..c010cde6353 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx
@@ -4,11 +4,11 @@ export default function VerticalSlider() {
   return (
     <Slider.Root orientation="vertical" defaultValue={35}>
       <Slider.Control className="flex touch-none select-none data-[orientation=vertical]:h-32 data-[orientation=vertical]:px-3">
-        <Slider.Track className="rounded-sm bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200 select-none data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1">
-          <Slider.Indicator className="rounded-sm bg-gray-700 select-none" />
+        <Slider.Track className="bg-gray-200 select-none dark:bg-gray-800 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1">
+          <Slider.Indicator className="bg-gray-900 select-none dark:bg-white" />
           <Slider.Thumb
             aria-label="Volume"
-            className="size-4 rounded-full bg-white outline-1 outline-gray-300 select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800"
+            className="box-border size-4 border border-gray-900 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-gray-900"
           />
         </Slider.Track>
       </Slider.Control>

From 3719e1754c908c22e390cfab5af628f251947d3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 23 Apr 2026 10:33:38 +0200
Subject: [PATCH 026/257] gray-50 -> white

---
 .../components/accordion/demos/_index.module.css   |  8 ++++----
 .../accordion/demos/hero/tailwind/index.tsx        |  8 ++++----
 .../accordion/demos/multiple/tailwind/index.tsx    |  8 ++++----
 .../avatar/demos/hero/css-modules/index.module.css |  2 +-
 .../avatar/demos/hero/tailwind/index.tsx           |  4 ++--
 .../button/demos/hero/css-modules/index.module.css |  2 +-
 .../button/demos/hero/tailwind/index.tsx           |  2 +-
 .../demos/loading/css-modules/index.module.css     |  2 +-
 .../button/demos/loading/tailwind/index.tsx        |  2 +-
 .../demos/hero/css-modules/index.module.css        | 12 ++++++------
 .../checkbox/demos/hero/tailwind/index.tsx         |  4 ++--
 .../demos/hero/css-modules/index.module.css        |  4 ++--
 .../collapsible/demos/hero/tailwind/index.tsx      |  4 ++--
 .../meter/demos/hero/css-modules/index.module.css  |  6 +++---
 .../components/meter/demos/hero/tailwind/index.tsx |  6 +++---
 .../demos/hero/css-modules/index.module.css        |  6 +++---
 .../progress/demos/hero/tailwind/index.tsx         |  6 +++---
 .../radio/demos/hero/css-modules/index.module.css  | 12 ++++++------
 .../components/radio/demos/hero/tailwind/index.tsx | 14 +++++++-------
 .../demos/hero/css-modules/index.module.css        |  8 ++++----
 .../toggle-group/demos/hero/tailwind/index.tsx     |  8 ++++----
 .../demos/multiple/css-modules/index.module.css    |  8 ++++----
 .../toggle-group/demos/multiple/tailwind/index.tsx |  8 ++++----
 .../toggle/demos/hero/css-modules/index.module.css |  4 ++--
 .../toggle/demos/hero/tailwind/index.tsx           |  2 +-
 25 files changed, 75 insertions(+), 75 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
index 6cc7c905e22..9ae56dbc67c 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
@@ -4,8 +4,8 @@
   width: 20rem;
   max-width: 100%;
   flex-direction: column;
-  border-bottom: 1px solid light-dark(var(--color-gray-900), var(--color-gray-50));
-  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  border-bottom: 1px solid light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-900), white);
 }
 
 .Header {
@@ -22,10 +22,10 @@
   padding: 0.5rem 0;
   margin: 0;
   border: none;
-  border-top: 1px solid light-dark(var(--color-gray-900), var(--color-gray-50));
+  border-top: 1px solid light-dark(var(--color-gray-900), white);
   border-radius: 0;
   background-color: transparent;
-  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  color: light-dark(var(--color-gray-900), white);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
index 625e89ab46a..9b316f02bd1 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
@@ -3,10 +3,10 @@ import { Accordion } from '@base-ui/react/accordion';
 
 export default function ExampleAccordion() {
   return (
-    <Accordion.Root className="flex w-80 max-w-full flex-col border-b border-gray-900 text-gray-900 dark:border-gray-50 dark:text-gray-50">
+    <Accordion.Root className="flex w-80 max-w-full flex-col border-b border-gray-900 text-gray-900 dark:border-white dark:text-white">
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-gray-50 dark:text-gray-50">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-white dark:text-white">
             What is Base UI?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -21,7 +21,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-gray-50 dark:text-gray-50">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-white dark:text-white">
             How do I get started?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -36,7 +36,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-gray-50 dark:text-gray-50">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-white dark:text-white">
             Can I use it for my project?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
index ad20b344111..299fa45c799 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
@@ -5,11 +5,11 @@ export default function ExampleAccordion() {
   return (
     <Accordion.Root
       multiple
-      className="flex w-80 max-w-full flex-col border-b border-gray-900 text-gray-900 dark:border-gray-50 dark:text-gray-50"
+      className="flex w-80 max-w-full flex-col border-b border-gray-900 text-gray-900 dark:border-white dark:text-white"
     >
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-gray-50 dark:text-gray-50">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-white dark:text-white">
             What is Base UI?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -24,7 +24,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-gray-50 dark:text-gray-50">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-white dark:text-white">
             How do I get started?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -39,7 +39,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-gray-50 dark:text-gray-50">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-white dark:text-white">
             Can I use it for my project?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
diff --git a/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css
index 01ca208821e..171bde8510d 100644
--- a/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css
@@ -6,7 +6,7 @@
   border-radius: 100%;
   user-select: none;
   font-weight: 400;
-  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  color: light-dark(var(--color-gray-900), white);
   background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   font-size: 0.875rem;
   line-height: 1;
diff --git a/docs/src/app/(docs)/react/components/avatar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/avatar/demos/hero/tailwind/index.tsx
index ae4175c91c9..d91a3a7567f 100644
--- a/docs/src/app/(docs)/react/components/avatar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/avatar/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Avatar } from '@base-ui/react/avatar';
 export default function ExampleAvatar() {
   return (
     <div className="flex gap-4">
-      <Avatar.Root className="inline-flex size-8 items-center justify-center overflow-hidden rounded-full bg-gray-200 align-middle text-sm leading-none font-normal text-gray-900 select-none dark:bg-gray-800 dark:text-gray-50">
+      <Avatar.Root className="inline-flex size-8 items-center justify-center overflow-hidden rounded-full bg-gray-200 align-middle text-sm leading-none font-normal text-gray-900 select-none dark:bg-gray-800 dark:text-white">
         <Avatar.Image
           src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
           width="48"
@@ -14,7 +14,7 @@ export default function ExampleAvatar() {
           LT
         </Avatar.Fallback>
       </Avatar.Root>
-      <Avatar.Root className="inline-flex size-8 items-center justify-center overflow-hidden rounded-full bg-gray-200 align-middle text-sm leading-none font-normal text-gray-900 select-none dark:bg-gray-800 dark:text-gray-50">
+      <Avatar.Root className="inline-flex size-8 items-center justify-center overflow-hidden rounded-full bg-gray-200 align-middle text-sm leading-none font-normal text-gray-900 select-none dark:bg-gray-800 dark:text-white">
         LT
       </Avatar.Root>
     </div>
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
index ccfe3435def..2eefa335ebe 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
@@ -13,7 +13,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5rem;
-  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  color: light-dark(var(--color-gray-900), white);
   user-select: none;
 
   @media (hover: hover) {
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
index 33ef86ef93a..a2f17de8ff3 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Button } from '@base-ui/react/button';
 
 export default function ExampleButton() {
   return (
-    <Button className="flex items-center justify-center h-8 px-3.5 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-900 dark:text-gray-50 select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 data-disabled:text-gray-500 dark:data-disabled:text-gray-400">
+    <Button className="flex items-center justify-center h-8 px-3.5 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-900 dark:text-white select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 data-disabled:text-gray-500 dark:data-disabled:text-gray-400">
       Submit
     </Button>
   );
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
index a5787eedc75..94a51214e79 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
@@ -13,7 +13,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5rem;
-  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  color: light-dark(var(--color-gray-900), white);
   user-select: none;
 
   @media (hover: hover) {
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
index f15ab19b55b..b7b544339b7 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleButton() {
 
   return (
     <Button
-      className="flex items-center justify-center h-8 px-3.5 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-900 dark:text-gray-50 select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 data-disabled:text-gray-500 dark:data-disabled:text-gray-400"
+      className="flex items-center justify-center h-8 px-3.5 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-900 dark:text-white select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 data-disabled:text-gray-500 dark:data-disabled:text-gray-400"
       disabled={loading}
       focusableWhenDisabled
       onClick={() => {
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
index d9c470c0ce4..74436a3275c 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
@@ -5,7 +5,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  color: light-dark(var(--color-gray-900), white);
 }
 
 .Checkbox {
@@ -16,17 +16,17 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid light-dark(var(--color-gray-900), var(--color-gray-50));
+  border: 1px solid light-dark(var(--color-gray-900), white);
   border-radius: 0;
-  background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
-  color: light-dark(var(--color-gray-50), var(--color-gray-900));
+  background-color: light-dark(white, var(--color-gray-900));
+  color: light-dark(white, var(--color-gray-900));
   padding: 0;
   margin: 0;
 
   &[data-checked],
   &[data-indeterminate] {
-    background-color: light-dark(var(--color-gray-900), var(--color-gray-50));
-    color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    background-color: light-dark(var(--color-gray-900), white);
+    color: light-dark(white, var(--color-gray-900));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
index 28d9ffb16c6..ecfa4a26ca8 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
@@ -3,10 +3,10 @@ import { Checkbox } from '@base-ui/react/checkbox';
 
 export default function ExampleCheckbox() {
   return (
-    <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
+    <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-white">
       <Checkbox.Root
         defaultChecked
-        className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
+        className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-900 bg-white text-white dark:border-white dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
       >
         <Checkbox.Indicator className="flex data-unchecked:hidden">
           <CheckIcon className="size-3" />
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
index c1e73789fb5..1452e52258f 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
@@ -4,7 +4,7 @@
   min-height: 9rem;
   flex-direction: column;
   justify-content: center;
-  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  color: light-dark(var(--color-gray-900), white);
 }
 
 .Icon {
@@ -25,7 +25,7 @@
   border: none;
   border-radius: 0;
   background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
-  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  color: light-dark(var(--color-gray-900), white);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
index 2f8239beab9..e9d4b1fcaf8 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
@@ -3,8 +3,8 @@ import { Collapsible } from '@base-ui/react/collapsible';
 
 export default function ExampleCollapsible() {
   return (
-    <Collapsible.Root className="flex min-h-36 w-56 flex-col justify-center text-gray-900 dark:text-gray-50">
-      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none bg-gray-200 px-3.5 text-sm leading-5 font-normal text-gray-900 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-700">
+    <Collapsible.Root className="flex min-h-36 w-56 flex-col justify-center text-gray-900 dark:text-white">
+      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none bg-gray-200 px-3.5 text-sm leading-5 font-normal text-gray-900 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700">
         Recovery keys
         <ChevronIcon className="size-3 transition-transform duration-100 ease-out group-data-panel-open:rotate-90" />
       </Collapsible.Trigger>
diff --git a/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
index f9ff4e62978..9a6792447e7 100644
--- a/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
@@ -10,13 +10,13 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  color: light-dark(var(--color-gray-900), white);
 }
 
 .Value {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  color: light-dark(var(--color-gray-900), white);
   text-align: right;
 }
 
@@ -28,6 +28,6 @@
 }
 
 .Indicator {
-  background-color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  background-color: light-dark(var(--color-gray-900), white);
   transition: width 500ms;
 }
diff --git a/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx
index 727edcaec94..e9a2d04ec62 100644
--- a/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx
@@ -3,12 +3,12 @@ import { Meter } from '@base-ui/react/meter';
 export default function ExampleMeter() {
   return (
     <Meter.Root className="grid max-w-full w-60 grid-cols-2 gap-y-2" value={24}>
-      <Meter.Label className="text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
+      <Meter.Label className="text-sm leading-5 font-normal text-gray-900 dark:text-white">
         Storage Used
       </Meter.Label>
-      <Meter.Value className="text-right text-sm leading-5 text-gray-900 dark:text-gray-50" />
+      <Meter.Value className="text-right text-sm leading-5 text-gray-900 dark:text-white" />
       <Meter.Track className="col-span-2 h-3 overflow-hidden bg-gray-200 dark:bg-gray-800">
-        <Meter.Indicator className="bg-gray-900 transition-[width] duration-500 dark:bg-gray-50" />
+        <Meter.Indicator className="bg-gray-900 transition-[width] duration-500 dark:bg-white" />
       </Meter.Track>
     </Meter.Root>
   );
diff --git a/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css
index 59bee552635..c46770c8aa7 100644
--- a/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css
@@ -10,13 +10,13 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  color: light-dark(var(--color-gray-900), white);
 }
 
 .Value {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  color: light-dark(var(--color-gray-900), white);
   text-align: right;
 }
 
@@ -28,6 +28,6 @@
 }
 
 .Indicator {
-  background-color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  background-color: light-dark(var(--color-gray-900), white);
   transition: width 500ms;
 }
diff --git a/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx
index 9de0a6ed79f..54bc5ab9650 100644
--- a/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx
@@ -15,12 +15,12 @@ export default function ExampleProgress() {
 
   return (
     <Progress.Root className="grid max-w-full w-60 grid-cols-2 gap-y-2" value={value}>
-      <Progress.Label className="text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
+      <Progress.Label className="text-sm leading-5 font-normal text-gray-900 dark:text-white">
         Export data
       </Progress.Label>
-      <Progress.Value className="text-right text-sm leading-5 text-gray-900 dark:text-gray-50" />
+      <Progress.Value className="text-right text-sm leading-5 text-gray-900 dark:text-white" />
       <Progress.Track className="col-span-2 h-1 overflow-hidden bg-gray-200 dark:bg-gray-800">
-        <Progress.Indicator className="bg-gray-900 transition-[width] duration-500 dark:bg-gray-50" />
+        <Progress.Indicator className="bg-gray-900 transition-[width] duration-500 dark:bg-white" />
       </Progress.Track>
     </Progress.Root>
   );
diff --git a/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
index e1e3726fa9c..10446f97184 100644
--- a/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  color: light-dark(var(--color-gray-900), white);
 }
 
 .Caption {
@@ -29,16 +29,16 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid light-dark(var(--color-gray-900), var(--color-gray-50));
+  border: 1px solid light-dark(var(--color-gray-900), white);
   border-radius: 100%;
-  background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
-  color: light-dark(var(--color-gray-50), var(--color-gray-900));
+  background-color: light-dark(white, var(--color-gray-900));
+  color: light-dark(white, var(--color-gray-900));
   padding: 0;
   margin: 0;
 
   &[data-checked] {
-    background-color: light-dark(var(--color-gray-900), var(--color-gray-50));
-    color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    background-color: light-dark(var(--color-gray-900), white);
+    color: light-dark(white, var(--color-gray-900));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
index 3557bd1496c..5b5d27605c4 100644
--- a/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
@@ -9,36 +9,36 @@ export default function ExampleRadioGroup() {
     <RadioGroup
       aria-labelledby={id}
       defaultValue="fuji-apple"
-      className="flex flex-col items-start gap-1 text-gray-900 dark:text-gray-50"
+      className="flex flex-col items-start gap-1 text-gray-900 dark:text-white"
     >
       <div className="text-sm leading-5 font-bold" id={id}>
         Best apple
       </div>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-white">
         <Radio.Root
           value="fuji-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-900 bg-white text-white dark:border-white dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
         >
           <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>
         Fuji
       </label>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-white">
         <Radio.Root
           value="gala-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-900 bg-white text-white dark:border-white dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
         >
           <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>
         Gala
       </label>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-white">
         <Radio.Root
           value="granny-smith-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-900 bg-white text-white dark:border-white dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
         >
           <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
index ba88bc5c6fe..27a43533d3a 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
@@ -2,7 +2,7 @@
   display: flex;
   gap: 1px;
   padding: 1px;
-  border: 1px solid light-dark(var(--color-gray-900), var(--color-gray-50));
+  border: 1px solid light-dark(var(--color-gray-900), white);
 }
 
 .Button {
@@ -17,7 +17,7 @@
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  color: light-dark(var(--color-gray-900), white);
   user-select: none;
 
   @media (hover: hover) {
@@ -27,8 +27,8 @@
   }
 
   &[data-pressed] {
-    background-color: light-dark(var(--color-gray-900), var(--color-gray-50));
-    color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    background-color: light-dark(var(--color-gray-900), white);
+    color: light-dark(white, var(--color-gray-900));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
index 62a61cb0e56..3c345992b86 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
@@ -6,26 +6,26 @@ export default function ExampleToggleGroup() {
   return (
     <ToggleGroup
       defaultValue={['left']}
-      className="flex gap-px p-px border border-gray-900 dark:border-gray-50"
+      className="flex gap-px p-px border border-gray-900 dark:border-white"
     >
       <Toggle
         aria-label="Align left"
         value="left"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-gray-50 select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-gray-50 dark:data-pressed:bg-gray-50 dark:data-pressed:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark: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 border-none rounded-none bg-transparent text-gray-900 dark:text-gray-50 select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-gray-50 dark:data-pressed:bg-gray-50 dark:data-pressed:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark: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 border-none rounded-none bg-transparent text-gray-900 dark:text-gray-50 select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-gray-50 dark:data-pressed:bg-gray-50 dark:data-pressed:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-900"
       >
         <AlignRightIcon className="size-4" />
       </Toggle>
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
index ba88bc5c6fe..27a43533d3a 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
@@ -2,7 +2,7 @@
   display: flex;
   gap: 1px;
   padding: 1px;
-  border: 1px solid light-dark(var(--color-gray-900), var(--color-gray-50));
+  border: 1px solid light-dark(var(--color-gray-900), white);
 }
 
 .Button {
@@ -17,7 +17,7 @@
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  color: light-dark(var(--color-gray-900), white);
   user-select: none;
 
   @media (hover: hover) {
@@ -27,8 +27,8 @@
   }
 
   &[data-pressed] {
-    background-color: light-dark(var(--color-gray-900), var(--color-gray-50));
-    color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    background-color: light-dark(var(--color-gray-900), white);
+    color: light-dark(white, var(--color-gray-900));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
index 87a1bcdfef0..b3cbdc8aa7b 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
@@ -7,26 +7,26 @@ export default function ExampleToggleGroupMultiple() {
       multiple
       defaultValue={['bold', 'italic']}
       aria-label="Text formatting options"
-      className="flex gap-px p-px border border-gray-900 dark:border-gray-50"
+      className="flex gap-px p-px border border-gray-900 dark:border-white"
     >
       <Toggle
         aria-label="Bold"
         value="bold"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-gray-50 select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-gray-50 dark:data-pressed:bg-gray-50 dark:data-pressed:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-900"
       >
         <BoldIcon />
       </Toggle>
       <Toggle
         aria-label="Italic"
         value="italic"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-gray-50 select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-gray-50 dark:data-pressed:bg-gray-50 dark:data-pressed:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-900"
       >
         <ItalicIcon />
       </Toggle>
       <Toggle
         aria-label="Underline"
         value="underline"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-gray-50 select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-gray-50 dark:data-pressed:bg-gray-50 dark:data-pressed:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-900"
       >
         <UnderlineIcon />
       </Toggle>
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
index a310f786d2c..d83582526e5 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
@@ -10,7 +10,7 @@
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  color: light-dark(var(--color-gray-900), white);
   user-select: none;
 
   @media (hover: hover) {
@@ -20,7 +20,7 @@
   }
 
   &[data-pressed] {
-    color: light-dark(var(--color-gray-900), var(--color-gray-50));
+    color: light-dark(var(--color-gray-900), white);
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
index 67ca2b6a04a..1a65b4b9218 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleToggle() {
   return (
     <Toggle
       aria-label="Favorite"
-      className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-gray-50 select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:text-gray-900 dark:data-pressed:text-gray-50"
+      className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:text-gray-900 dark:data-pressed:text-white"
       render={(props, state) => {
         if (state.pressed) {
           return (

From 5f3973902238502f1a114f16daf4ba43da032185 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 23 Apr 2026 10:38:22 +0200
Subject: [PATCH 027/257] Explicit focus outline color

---
 .../react/components/accordion/demos/_index.module.css      | 3 +--
 .../components/accordion/demos/hero/tailwind/index.tsx      | 6 +++---
 .../components/accordion/demos/multiple/tailwind/index.tsx  | 6 +++---
 .../button/demos/hero/css-modules/index.module.css          | 3 +--
 .../react/components/button/demos/hero/tailwind/index.tsx   | 2 +-
 .../button/demos/loading/css-modules/index.module.css       | 3 +--
 .../components/button/demos/loading/tailwind/index.tsx      | 2 +-
 .../checkbox/demos/hero/css-modules/index.module.css        | 3 +--
 .../react/components/checkbox/demos/hero/tailwind/index.tsx | 2 +-
 .../collapsible/demos/hero/css-modules/index.module.css     | 3 +--
 .../components/collapsible/demos/hero/tailwind/index.tsx    | 2 +-
 .../radio/demos/hero/css-modules/index.module.css           | 3 +--
 .../react/components/radio/demos/hero/tailwind/index.tsx    | 6 +++---
 .../toggle-group/demos/hero/css-modules/index.module.css    | 3 +--
 .../components/toggle-group/demos/hero/tailwind/index.tsx   | 6 +++---
 .../demos/multiple/css-modules/index.module.css             | 3 +--
 .../toggle-group/demos/multiple/tailwind/index.tsx          | 6 +++---
 .../toggle/demos/hero/css-modules/index.module.css          | 3 +--
 .../react/components/toggle/demos/hero/tailwind/index.tsx   | 2 +-
 19 files changed, 29 insertions(+), 38 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
index 9ae56dbc67c..5c7c49268b7 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
@@ -34,8 +34,7 @@
   user-select: none;
 
   &:focus-visible {
-    outline-width: 2px;
-    outline-style: solid;
+    outline: 2px solid var(--color-blue-800);
     z-index: 1;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
index 9b316f02bd1..aea64d4221c 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleAccordion() {
     <Accordion.Root className="flex w-80 max-w-full flex-col border-b border-gray-900 text-gray-900 dark:border-white dark:text-white">
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             What is Base UI?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -21,7 +21,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             How do I get started?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -36,7 +36,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             Can I use it for my project?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
index 299fa45c799..70a8b71f4e6 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleAccordion() {
     >
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             What is Base UI?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -24,7 +24,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             How do I get started?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -39,7 +39,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             Can I use it for my project?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
index 2eefa335ebe..4973dd6deff 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
@@ -27,8 +27,7 @@
   }
 
   &:focus-visible {
-    outline-width: 2px;
-    outline-style: solid;
+    outline: 2px solid var(--color-blue-800);
     outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
index a2f17de8ff3..62c2a56dcc3 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Button } from '@base-ui/react/button';
 
 export default function ExampleButton() {
   return (
-    <Button className="flex items-center justify-center h-8 px-3.5 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-900 dark:text-white select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 data-disabled:text-gray-500 dark:data-disabled:text-gray-400">
+    <Button className="flex items-center justify-center h-8 px-3.5 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-900 dark:text-white select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:data-disabled:text-gray-400">
       Submit
     </Button>
   );
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
index 94a51214e79..9a16c507dcf 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
@@ -23,8 +23,7 @@
   }
 
   &:focus-visible {
-    outline-width: 2px;
-    outline-style: solid;
+    outline: 2px solid var(--color-blue-800);
     outline-offset: 2px;
   }
 
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
index b7b544339b7..636af0b4a1b 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleButton() {
 
   return (
     <Button
-      className="flex items-center justify-center h-8 px-3.5 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-900 dark:text-white select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 data-disabled:text-gray-500 dark:data-disabled:text-gray-400"
+      className="flex items-center justify-center h-8 px-3.5 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-900 dark:text-white select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:data-disabled:text-gray-400"
       disabled={loading}
       focusableWhenDisabled
       onClick={() => {
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
index 74436a3275c..cd0d4558259 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
@@ -30,8 +30,7 @@
   }
 
   &:focus-visible {
-    outline-width: 2px;
-    outline-style: solid;
+    outline: 2px solid var(--color-blue-800);
     outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
index ecfa4a26ca8..96108e3113a 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleCheckbox() {
     <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-white">
       <Checkbox.Root
         defaultChecked
-        className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-900 bg-white text-white dark:border-white dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
+        className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-900 bg-white text-white dark:border-white dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
       >
         <Checkbox.Indicator className="flex data-unchecked:hidden">
           <CheckIcon className="size-3" />
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
index 1452e52258f..cc6db6b03dc 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
@@ -39,8 +39,7 @@
   }
 
   &:focus-visible {
-    outline-width: 2px;
-    outline-style: solid;
+    outline: 2px solid var(--color-blue-800);
     outline-offset: 2px;
   }
 
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
index e9d4b1fcaf8..7fcf1aaaf50 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Collapsible } from '@base-ui/react/collapsible';
 export default function ExampleCollapsible() {
   return (
     <Collapsible.Root className="flex min-h-36 w-56 flex-col justify-center text-gray-900 dark:text-white">
-      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none bg-gray-200 px-3.5 text-sm leading-5 font-normal text-gray-900 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700">
+      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none bg-gray-200 px-3.5 text-sm leading-5 font-normal text-gray-900 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700">
         Recovery keys
         <ChevronIcon className="size-3 transition-transform duration-100 ease-out group-data-panel-open:rotate-90" />
       </Collapsible.Trigger>
diff --git a/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
index 10446f97184..d453e3b406d 100644
--- a/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
@@ -42,8 +42,7 @@
   }
 
   &:focus-visible {
-    outline-width: 2px;
-    outline-style: solid;
+    outline: 2px solid var(--color-blue-800);
     outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
index 5b5d27605c4..9d97f4741dc 100644
--- a/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function ExampleRadioGroup() {
       <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-white">
         <Radio.Root
           value="fuji-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-900 bg-white text-white dark:border-white dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-900 bg-white text-white dark:border-white dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         >
           <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>
@@ -28,7 +28,7 @@ export default function ExampleRadioGroup() {
       <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-white">
         <Radio.Root
           value="gala-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-900 bg-white text-white dark:border-white dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-900 bg-white text-white dark:border-white dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         >
           <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>
@@ -38,7 +38,7 @@ export default function ExampleRadioGroup() {
       <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-white">
         <Radio.Root
           value="granny-smith-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-900 bg-white text-white dark:border-white dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-900 bg-white text-white dark:border-white dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         >
           <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
index 27a43533d3a..37b3ac668fa 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
@@ -32,8 +32,7 @@
   }
 
   &:focus-visible {
-    outline-width: 2px;
-    outline-style: solid;
+    outline: 2px solid var(--color-blue-800);
     outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
index 3c345992b86..17d80318aa1 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/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 border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark: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 border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark: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 border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-900"
       >
         <AlignRightIcon className="size-4" />
       </Toggle>
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
index 27a43533d3a..37b3ac668fa 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
@@ -32,8 +32,7 @@
   }
 
   &:focus-visible {
-    outline-width: 2px;
-    outline-style: solid;
+    outline: 2px solid var(--color-blue-800);
     outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
index b3cbdc8aa7b..de6847be9c0 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
@@ -12,21 +12,21 @@ export default function ExampleToggleGroupMultiple() {
       <Toggle
         aria-label="Bold"
         value="bold"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-900"
       >
         <BoldIcon />
       </Toggle>
       <Toggle
         aria-label="Italic"
         value="italic"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-900"
       >
         <ItalicIcon />
       </Toggle>
       <Toggle
         aria-label="Underline"
         value="underline"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-900"
       >
         <UnderlineIcon />
       </Toggle>
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
index d83582526e5..f29249dfc6f 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
@@ -24,8 +24,7 @@
   }
 
   &:focus-visible {
-    outline-width: 2px;
-    outline-style: solid;
+    outline: 2px solid var(--color-blue-800);
     outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
index 1a65b4b9218..7ad9de8ce8f 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleToggle() {
   return (
     <Toggle
       aria-label="Favorite"
-      className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:text-gray-900 dark:data-pressed:text-white"
+      className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:text-gray-900 dark:data-pressed:text-white"
       render={(props, state) => {
         if (state.pressed) {
           return (

From ce7c0f04c1e52c20455ca8397ae32f9d75d93acc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 23 Apr 2026 10:47:28 +0200
Subject: [PATCH 028/257] CheckboxGroup: update demos to use pure white and
 explicit outline color

---
 .../demos/hero/css-modules/index.module.css       | 15 +++++++--------
 .../checkbox-group/demos/hero/tailwind/index.tsx  | 14 +++++++-------
 .../demos/nested/css-modules/index.module.css     | 15 +++++++--------
 .../demos/parent/css-modules/index.module.css     | 15 +++++++--------
 4 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
index dc976a73e36..bd974c9eceb 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  color: light-dark(var(--color-gray-900), white);
 }
 
 .Caption {
@@ -29,22 +29,21 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid light-dark(var(--color-gray-900), var(--color-gray-50));
+  border: 1px solid light-dark(var(--color-gray-900), white);
   border-radius: 0;
-  background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
-  color: light-dark(var(--color-gray-50), var(--color-gray-900));
+  background-color: light-dark(white, var(--color-gray-900));
+  color: light-dark(white, var(--color-gray-900));
   padding: 0;
   margin: 0;
 
   &[data-checked],
   &[data-indeterminate] {
-    background-color: light-dark(var(--color-gray-900), var(--color-gray-50));
-    color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    background-color: light-dark(var(--color-gray-900), white);
+    color: light-dark(white, var(--color-gray-900));
   }
 
   &:focus-visible {
-    outline-width: 2px;
-    outline-style: solid;
+    outline: 2px solid var(--color-blue-800);
     outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
index 53e128bf7dd..13477abd0f4 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
@@ -9,17 +9,17 @@ export default function ExampleCheckboxGroup() {
     <CheckboxGroup
       aria-labelledby={id}
       defaultValue={['fuji-apple']}
-      className="flex flex-col items-start gap-1 text-gray-900 dark:text-gray-50"
+      className="flex flex-col items-start gap-1 text-gray-900 dark:text-white"
     >
       <div className="text-sm leading-5 font-bold" id={id}>
         Apples
       </div>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-white">
         <Checkbox.Root
           name="apple"
           value="fuji-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-900 bg-white text-white dark:border-white dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         >
           <Checkbox.Indicator className="flex data-unchecked:hidden">
             <CheckIcon className="size-3" />
@@ -28,11 +28,11 @@ export default function ExampleCheckboxGroup() {
         Fuji
       </label>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-white">
         <Checkbox.Root
           name="apple"
           value="gala-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-900 bg-white text-white dark:border-white dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         >
           <Checkbox.Indicator className="flex data-unchecked:hidden">
             <CheckIcon className="size-3" />
@@ -41,11 +41,11 @@ export default function ExampleCheckboxGroup() {
         Gala
       </label>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-white">
         <Checkbox.Root
           name="apple"
           value="granny-smith-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-900 bg-gray-50 text-gray-50 dark:border-gray-50 dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-gray-50 dark:data-checked:bg-gray-50 dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-900 bg-white text-white dark:border-white dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         >
           <Checkbox.Indicator className="flex data-unchecked:hidden">
             <CheckIcon className="size-3" />
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
index dc976a73e36..bd974c9eceb 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  color: light-dark(var(--color-gray-900), white);
 }
 
 .Caption {
@@ -29,22 +29,21 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid light-dark(var(--color-gray-900), var(--color-gray-50));
+  border: 1px solid light-dark(var(--color-gray-900), white);
   border-radius: 0;
-  background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
-  color: light-dark(var(--color-gray-50), var(--color-gray-900));
+  background-color: light-dark(white, var(--color-gray-900));
+  color: light-dark(white, var(--color-gray-900));
   padding: 0;
   margin: 0;
 
   &[data-checked],
   &[data-indeterminate] {
-    background-color: light-dark(var(--color-gray-900), var(--color-gray-50));
-    color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    background-color: light-dark(var(--color-gray-900), white);
+    color: light-dark(white, var(--color-gray-900));
   }
 
   &:focus-visible {
-    outline-width: 2px;
-    outline-style: solid;
+    outline: 2px solid var(--color-blue-800);
     outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
index dc976a73e36..bd974c9eceb 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  color: light-dark(var(--color-gray-900), white);
 }
 
 .Caption {
@@ -29,22 +29,21 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid light-dark(var(--color-gray-900), var(--color-gray-50));
+  border: 1px solid light-dark(var(--color-gray-900), white);
   border-radius: 0;
-  background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
-  color: light-dark(var(--color-gray-50), var(--color-gray-900));
+  background-color: light-dark(white, var(--color-gray-900));
+  color: light-dark(white, var(--color-gray-900));
   padding: 0;
   margin: 0;
 
   &[data-checked],
   &[data-indeterminate] {
-    background-color: light-dark(var(--color-gray-900), var(--color-gray-50));
-    color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    background-color: light-dark(var(--color-gray-900), white);
+    color: light-dark(white, var(--color-gray-900));
   }
 
   &:focus-visible {
-    outline-width: 2px;
-    outline-style: solid;
+    outline: 2px solid var(--color-blue-800);
     outline-offset: 2px;
   }
 }

From f7f10703f119beacfc3cb6902c6a0269beb09178 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 23 Apr 2026 11:09:28 +0200
Subject: [PATCH 029/257] Separator brutalist

---
 .../demos/hero/css-modules/index.module.css        | 10 +++++-----
 .../separator/demos/hero/tailwind/index.tsx        | 14 +++++++-------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css
index 2629a879a7b..0341686e650 100644
--- a/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css
@@ -6,14 +6,14 @@
 
 .Separator {
   width: 1px;
-  background-color: var(--color-gray-300);
+  background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
 }
 
 .Link {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-900);
-  text-decoration-color: var(--color-gray-400);
+  color: light-dark(var(--color-gray-900), white);
+  text-decoration-color: light-dark(var(--color-gray-300), var(--color-gray-700));
   text-decoration-thickness: 1px;
   text-decoration-line: none;
   text-underline-offset: 2px;
@@ -25,8 +25,8 @@
   }
 
   &:focus-visible {
-    border-radius: 0.125rem;
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
     text-decoration-line: none;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/separator/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/separator/demos/hero/tailwind/index.tsx
index 88bac689d39..2a546913b93 100644
--- a/docs/src/app/(docs)/react/components/separator/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/separator/demos/hero/tailwind/index.tsx
@@ -5,40 +5,40 @@ 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-hidden hover:underline focus-visible:rounded-xs focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+        className="text-sm text-gray-900 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
       >
         Home
       </a>
       <a
         href="#"
-        className="text-sm text-gray-900 decoration-gray-400 decoration-1 underline-offset-2 outline-hidden hover:underline focus-visible:rounded-xs focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+        className="text-sm text-gray-900 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
       >
         Pricing
       </a>
       <a
         href="#"
-        className="text-sm text-gray-900 decoration-gray-400 decoration-1 underline-offset-2 outline-hidden hover:underline focus-visible:rounded-xs focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+        className="text-sm text-gray-900 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
       >
         Blog
       </a>
       <a
         href="#"
-        className="text-sm text-gray-900 decoration-gray-400 decoration-1 underline-offset-2 outline-hidden hover:underline focus-visible:rounded-xs focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+        className="text-sm text-gray-900 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
       >
         Support
       </a>
 
-      <Separator orientation="vertical" className="w-px bg-gray-300" />
+      <Separator orientation="vertical" className="w-px bg-gray-300 dark:bg-gray-700" />
 
       <a
         href="#"
-        className="text-sm text-gray-900 decoration-gray-400 decoration-1 underline-offset-2 outline-hidden hover:underline focus-visible:rounded-xs focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+        className="text-sm text-gray-900 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
       >
         Log in
       </a>
       <a
         href="#"
-        className="text-sm text-gray-900 decoration-gray-400 decoration-1 underline-offset-2 outline-hidden hover:underline focus-visible:rounded-xs focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+        className="text-sm text-gray-900 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
       >
         Sign up
       </a>

From 3e2fec1bf5b16a0098ac02e96ab71e45a8fdbcfc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 23 Apr 2026 12:23:05 +0200
Subject: [PATCH 030/257] Tabs brutalist

---
 .../demos/hero/css-modules/index.module.css   | 64 ++++++++-----------
 .../tabs/demos/hero/css-modules/index.tsx     |  2 +-
 .../tabs/demos/hero/tailwind/index.tsx        | 24 +++----
 3 files changed, 41 insertions(+), 49 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
index 9ca749e347c..523253d817a 100644
--- a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
@@ -1,18 +1,13 @@
-.Tabs {
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-}
-
 .List {
   display: flex;
   position: relative;
-  z-index: 0;
-  padding-inline: 0.25rem;
+  z-index: 1;
   gap: 0.25rem;
-  box-shadow: inset 0 -1px var(--color-gray-200);
+  margin-bottom: -1px;
 }
 
 .Tab {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -20,8 +15,7 @@
   margin: 0;
   outline: 0;
   background: none;
-  appearance: none;
-  color: var(--color-gray-600);
+  color: light-dark(var(--color-gray-600), var(--color-gray-300));
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -31,59 +25,57 @@
   word-break: keep-all;
   padding-inline: 0.5rem;
   padding-block: 0;
-  height: 2rem;
-
-  &[data-active] {
-    color: var(--color-gray-900);
-  }
+  height: calc(2rem + 1px);
 
   @media (hover: hover) {
     &:hover {
-      color: var(--color-gray-900);
+      color: light-dark(var(--color-gray-900), white);
     }
   }
 
-  &:focus-visible {
-    position: relative;
+  &[data-active] {
+    color: light-dark(var(--color-gray-900), white);
+  }
 
-    &::before {
-      content: '';
-      position: absolute;
-      inset: 0.25rem 0;
-      border-radius: 0.25rem;
-      outline: 2px solid var(--color-blue);
-      outline-offset: -1px;
-    }
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
 .Indicator {
+  box-sizing: border-box;
   position: absolute;
   z-index: -1;
   left: 0;
-  top: 50%;
-  translate: var(--active-tab-left) -50%;
+  top: 0;
+  translate: var(--active-tab-left);
   width: var(--active-tab-width);
-  height: 1.5rem;
-  border-radius: 0.25rem;
-  background-color: var(--color-gray-100);
+  height: 100%;
   transition-property: translate, width;
-  transition-duration: 200ms;
+  transition-duration: 150ms;
   transition-timing-function: ease-in-out;
+  border-top: 1px solid light-dark(var(--color-gray-900), white);
+  border-inline: 1px solid light-dark(var(--color-gray-900), white);
+  background-color: light-dark(white, var(--color-gray-900));
 }
 
 .Panel {
+  box-sizing: border-box;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 8rem;
   outline: 0;
+  border-inline: 1px solid light-dark(var(--color-gray-900), white);
+  border-block: 1px solid light-dark(var(--color-gray-900), white);
+  background-color: light-dark(white, var(--color-gray-900));
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-    border-radius: 0.375rem;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
+    z-index: 1;
   }
 
   &[hidden] {
@@ -94,5 +86,5 @@
 .Icon {
   width: 2.5rem;
   height: 2.5rem;
-  color: var(--color-gray-300);
+  color: light-dark(var(--color-gray-400), var(--color-gray-500));
 }
diff --git a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.tsx
index bad90074430..6fd3ba6eaf5 100644
--- a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.tsx
@@ -4,7 +4,7 @@ import styles from './index.module.css';
 
 export default function ExampleTabs() {
   return (
-    <Tabs.Root className={styles.Tabs} defaultValue="overview">
+    <Tabs.Root defaultValue="overview">
       <Tabs.List className={styles.List}>
         <Tabs.Tab className={styles.Tab} value="overview">
           Overview
diff --git a/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
index fcb17b01be0..8fb4da48a68 100644
--- a/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
@@ -3,45 +3,45 @@ import { Tabs } from '@base-ui/react/tabs';
 
 export default function ExampleTabs() {
   return (
-    <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.Root defaultValue="overview">
+      <Tabs.List className="relative z-1 -mb-px flex gap-1">
         <Tabs.Tab
-          className="flex h-8 items-center justify-center border-0 px-2 text-sm font-normal break-keep whitespace-nowrap text-gray-600 outline-hidden select-none before:inset-x-0 before:inset-y-1 before:rounded-xs 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-[active]:text-gray-900"
+          className="flex h-[calc(2rem+1px)] items-center justify-center border-0 px-2 text-sm font-normal break-keep whitespace-nowrap text-gray-600 outline-0 select-none hover:text-gray-900 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-active:text-gray-900 dark:text-gray-300 dark:hover:text-white dark:data-active:text-white"
           value="overview"
         >
           Overview
         </Tabs.Tab>
         <Tabs.Tab
-          className="flex h-8 items-center justify-center border-0 px-2 text-sm font-normal break-keep whitespace-nowrap text-gray-600 outline-hidden select-none before:inset-x-0 before:inset-y-1 before:rounded-xs 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-[active]:text-gray-900"
+          className="flex h-[calc(2rem+1px)] items-center justify-center border-0 px-2 text-sm font-normal break-keep whitespace-nowrap text-gray-600 outline-0 select-none hover:text-gray-900 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-active:text-gray-900 dark:text-gray-300 dark:hover:text-white dark:data-active:text-white"
           value="projects"
         >
           Projects
         </Tabs.Tab>
         <Tabs.Tab
-          className="flex h-8 items-center justify-center border-0 px-2 text-sm font-normal break-keep whitespace-nowrap text-gray-600 outline-hidden select-none before:inset-x-0 before:inset-y-1 before:rounded-xs 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-[active]:text-gray-900"
+          className="flex h-[calc(2rem+1px)] items-center justify-center border-0 px-2 text-sm font-normal break-keep whitespace-nowrap text-gray-600 outline-0 select-none hover:text-gray-900 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-active:text-gray-900 dark:text-gray-300 dark:hover:text-white dark:data-active:text-white"
           value="account"
         >
           Account
         </Tabs.Tab>
-        <Tabs.Indicator className="absolute top-1/2 left-0 z-[-1] h-6 w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)] -translate-y-1/2 rounded-xs bg-gray-100 transition-all duration-200 ease-in-out" />
+        <Tabs.Indicator className="absolute top-0 left-0 -z-1 h-full w-(--active-tab-width) translate-x-(--active-tab-left) border-x border-t border-gray-900 bg-white transition-[translate,width] duration-150 ease-in-out dark:border-white dark:bg-gray-900" />
       </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 border border-gray-900 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-900 [&[hidden]]:hidden"
         value="overview"
       >
-        <OverviewIcon className="size-10 text-gray-300" />
+        <OverviewIcon className="size-10 text-gray-400 dark:text-gray-500" />
       </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 border border-gray-900 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-900 [&[hidden]]:hidden"
         value="projects"
       >
-        <ProjectIcon className="size-10 text-gray-300" />
+        <ProjectIcon className="size-10 text-gray-400 dark:text-gray-500" />
       </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 border border-gray-900 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-900 [&[hidden]]:hidden"
         value="account"
       >
-        <PersonIcon className="size-10 text-gray-300" />
+        <PersonIcon className="size-10 text-gray-400 dark:text-gray-500" />
       </Tabs.Panel>
     </Tabs.Root>
   );

From 35c098c71b567cfc37df12579d76f1e40d28c701 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 23 Apr 2026 13:54:37 +0200
Subject: [PATCH 031/257] ScrollArea brutalist

---
 .../demos/both/css-modules/index.module.css   | 33 ++++++++++---------
 .../scroll-area/demos/both/tailwind/index.tsx | 12 +++----
 .../demos/hero/css-modules/index.module.css   | 24 ++++++++------
 .../scroll-area/demos/hero/tailwind/index.tsx |  8 ++---
 .../scroll-fade/css-modules/index.module.css  | 27 ++++++++-------
 .../demos/scroll-fade/tailwind/index.tsx      | 10 +++---
 6 files changed, 61 insertions(+), 53 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
index 03ff5854fb8..7bb2a1e6b5f 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
@@ -7,12 +7,12 @@
 
 .Viewport {
   height: 100%;
-  border-radius: 0.5rem;
-  outline: 1px solid var(--color-gray-200);
+  outline: 1px solid light-dark(var(--color-gray-900), white);
   outline-offset: -1px;
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -31,22 +31,23 @@
 }
 
 .Item {
-  border-radius: 0.5rem;
-  background-color: var(--color-gray-100);
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.875rem;
   font-weight: 700;
-  color: var(--color-gray-600);
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 }
 
 .Scrollbar {
   display: flex;
   position: relative;
-  background-color: var(--color-gray-200);
-  border-radius: 0.375rem;
-  margin: 0.5rem;
+  background-color: light-dark(
+    color-mix(in srgb, var(--color-gray-900) 25%, transparent),
+    color-mix(in srgb, var(--color-gray-50) 25%, transparent)
+  );
+  margin: 1px;
   opacity: 0;
   transition: opacity 150ms;
   pointer-events: none;
@@ -67,8 +68,7 @@
   }
 
   &[data-orientation='vertical'] {
-    width: 0.25rem;
-    margin: 0.5rem;
+    width: 1rem;
 
     &::before {
       width: 1.25rem;
@@ -79,21 +79,22 @@
   }
 
   &[data-orientation='horizontal'] {
-    height: 0.25rem;
-    margin: 0.5rem;
+    height: 1rem;
 
     &::before {
       width: 100%;
       height: 1.25rem;
       left: 0;
       right: 0;
-      bottom: -0.5rem;
+      bottom: 0;
     }
   }
 }
 
 .Thumb {
   width: 100%;
-  border-radius: inherit;
-  background-color: var(--color-gray-500);
+  background-color: light-dark(
+    color-mix(in srgb, var(--color-gray-900) 80%, transparent),
+    color-mix(in srgb, var(--color-gray-50) 80%, transparent)
+  );
 }
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
index 45f0a0ea45f..20e9b369b9e 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
@@ -3,13 +3,13 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function ExampleScrollAreaBoth() {
   return (
     <ScrollArea.Root className="h-80 w-80 max-w-[calc(100vw-8rem)]">
-      <ScrollArea.Viewport className="h-full rounded-lg border border-gray-200 focus-visible:outline focus-visible:outline-blue-800 focus-visible:outline-offset-2">
+      <ScrollArea.Viewport className="h-full outline-1 -outline-offset-1 outline-gray-900 dark:outline-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         <ScrollArea.Content className="p-5">
           <ul className="m-0 grid list-none grid-cols-[repeat(10,6.25rem)] grid-rows-[repeat(10,6.25rem)] gap-3 p-0">
             {Array.from({ length: 100 }, (_, i) => (
               <li
                 key={i}
-                className="flex items-center justify-center rounded-lg bg-gray-100 text-sm font-bold text-gray-600"
+                className="flex items-center justify-center bg-gray-200 dark:bg-gray-800 text-sm font-bold text-gray-600 dark:text-gray-400"
               >
                 {i + 1}
               </li>
@@ -17,14 +17,14 @@ export default function ExampleScrollAreaBoth() {
           </ul>
         </ScrollArea.Content>
       </ScrollArea.Viewport>
-      <ScrollArea.Scrollbar className="relative flex rounded-sm bg-gray-200 opacity-0 transition-opacity pointer-events-none before:absolute before:content-[''] data-[orientation=vertical]:m-2 data-[orientation=vertical]:w-1 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=horizontal]:m-2 data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:-bottom-2 data-[hovering]:pointer-events-auto data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0">
-        <ScrollArea.Thumb className="w-full rounded-sm bg-gray-500" />
+      <ScrollArea.Scrollbar className="relative m-px flex bg-gray-900/25 dark:bg-gray-50/25 opacity-0 transition-opacity pointer-events-none before:absolute before:content-[''] data-[orientation=vertical]:w-4 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:bottom-0 data-[hovering]:pointer-events-auto data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0">
+        <ScrollArea.Thumb className="w-full bg-gray-900/80 dark:bg-gray-50/80" />
       </ScrollArea.Scrollbar>
       <ScrollArea.Scrollbar
-        className="relative flex rounded-sm bg-gray-200 opacity-0 transition-opacity pointer-events-none before:absolute before:content-[''] data-[orientation=vertical]:m-2 data-[orientation=vertical]:w-1 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=horizontal]:m-2 data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:-bottom-2 data-[hovering]:pointer-events-auto data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0"
+        className="relative m-px flex bg-gray-900/25 dark:bg-gray-50/25 opacity-0 transition-opacity pointer-events-none before:absolute before:content-[''] data-[orientation=vertical]:w-4 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:bottom-0 data-[hovering]:pointer-events-auto data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0"
         orientation="horizontal"
       >
-        <ScrollArea.Thumb className="w-full rounded-sm bg-gray-500" />
+        <ScrollArea.Thumb className="w-full bg-gray-900/80 dark:bg-gray-50/80" />
       </ScrollArea.Scrollbar>
       <ScrollArea.Corner />
     </ScrollArea.Root>
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
index 1ec8a7cef13..9480b121a31 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
@@ -7,12 +7,12 @@
 
 .Viewport {
   height: 100%;
-  border-radius: 0.375rem;
-  outline: 1px solid var(--color-gray-200);
+  outline: 1px solid light-dark(var(--color-gray-900), white);
   outline-offset: -1px;
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -29,16 +29,18 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.375rem;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-900), white);
 }
 
 .Scrollbar {
   display: flex;
   justify-content: center;
-  background-color: var(--color-gray-200);
-  width: 0.25rem;
-  border-radius: 0.375rem;
-  margin: 0.5rem;
+  background-color: light-dark(
+    color-mix(in srgb, var(--color-gray-900) 25%, transparent),
+    color-mix(in srgb, var(--color-gray-50) 25%, transparent)
+  );
+  width: 1rem;
+  margin: 1px;
   opacity: 0;
   transition: opacity 150ms;
   pointer-events: none;
@@ -63,6 +65,8 @@
 
 .Thumb {
   width: 100%;
-  border-radius: inherit;
-  background-color: var(--color-gray-500);
+  background-color: light-dark(
+    color-mix(in srgb, var(--color-gray-900) 80%, transparent),
+    color-mix(in srgb, var(--color-gray-50) 80%, transparent)
+  );
 }
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
index fe942d464e3..0d7b5acb8f0 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
@@ -3,8 +3,8 @@ import { ScrollArea } from '@base-ui/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 rounded-md outline-1 -outline-offset-1 outline-gray-200 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">
+      <ScrollArea.Viewport className="h-full outline-1 -outline-offset-1 outline-gray-900 dark:outline-white focus-visible:outline-2 focus-visible:-outline-offset-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 dark:text-white">
           <p>
             Vernacular architecture is building done outside any academic tradition, and without
             professional guidance. It is not a particular architectural movement or style, but
@@ -26,8 +26,8 @@ export default function ExampleScrollArea() {
           </p>
         </div>
       </ScrollArea.Viewport>
-      <ScrollArea.Scrollbar className="m-2 flex w-1 justify-center rounded-sm bg-gray-200 opacity-0 transition-opacity pointer-events-none data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[hovering]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0 data-[scrolling]:pointer-events-auto">
-        <ScrollArea.Thumb className="w-full rounded-sm bg-gray-500" />
+      <ScrollArea.Scrollbar className="m-px flex w-4 justify-center bg-gray-900/25 dark:bg-gray-50/25 opacity-0 transition-opacity pointer-events-none before:absolute before:h-full before:w-5 before:content-[''] data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[hovering]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0 data-[scrolling]:pointer-events-auto">
+        <ScrollArea.Thumb className="w-full bg-gray-900/80 dark:bg-gray-50/80" />
       </ScrollArea.Scrollbar>
     </ScrollArea.Root>
   );
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
index 8caf9e40e5e..38c87168261 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
@@ -3,15 +3,13 @@
   width: 24rem;
   height: 12rem;
   max-width: calc(100vw - 8rem);
-  background-color: var(--color-gray-50);
-  border-radius: 0.5rem;
+  background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
 }
 
 .Viewport {
   --fade-size: 40px;
   height: 100%;
-  border-radius: 0.375rem;
-  background: var(--color-gray-50);
+  background: light-dark(var(--color-gray-100), var(--color-gray-800));
   mask-image: linear-gradient(
     to bottom,
     transparent 0,
@@ -22,7 +20,8 @@
   mask-repeat: no-repeat;
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -39,16 +38,18 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.375rem;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-900), white);
 }
 
 .Scrollbar {
   display: flex;
   justify-content: center;
-  background-color: var(--color-gray-200);
-  width: 0.25rem;
-  border-radius: 0.375rem;
-  margin: 0.5rem;
+  background-color: light-dark(
+    color-mix(in srgb, var(--color-gray-900) 25%, transparent),
+    color-mix(in srgb, var(--color-gray-50) 25%, transparent)
+  );
+  width: 1rem;
+  margin: 1px;
   opacity: 0;
   transition: opacity 150ms;
   pointer-events: none;
@@ -73,8 +74,10 @@
 
 .Thumb {
   width: 100%;
-  border-radius: inherit;
-  background-color: var(--color-gray-500);
+  background-color: light-dark(
+    color-mix(in srgb, var(--color-gray-900) 80%, transparent),
+    color-mix(in srgb, var(--color-gray-50) 80%, transparent)
+  );
 }
 
 .ScrollUp {
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
index d6cc782b16e..62e9a22f2c6 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
@@ -2,9 +2,9 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 
 export default function ExampleScrollAreaScrollFade() {
   return (
-    <ScrollArea.Root className="box-border h-48 w-96 max-w-[calc(100vw-8rem)] rounded-lg bg-gray-50">
-      <ScrollArea.Viewport className="h-full rounded-md bg-gray-50 mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] mask-no-repeat focus-visible:outline-2 focus-visible:outline-blue-800">
-        <ScrollArea.Content className="flex flex-col gap-4 py-3 pr-6 pl-4 text-sm leading-[1.375rem] text-gray-900">
+    <ScrollArea.Root className="box-border h-48 w-96 max-w-[calc(100vw-8rem)] bg-gray-100 dark:bg-gray-800">
+      <ScrollArea.Viewport className="h-full bg-gray-100 dark:bg-gray-800 mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] mask-no-repeat focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <ScrollArea.Content className="flex flex-col gap-4 py-3 pr-6 pl-4 text-sm leading-[1.375rem] text-gray-900 dark:text-white">
           <p>
             Vernacular architecture is building done outside any academic tradition, and without
             professional guidance. It is not a particular architectural movement or style, but
@@ -26,8 +26,8 @@ export default function ExampleScrollAreaScrollFade() {
           </p>
         </ScrollArea.Content>
       </ScrollArea.Viewport>
-      <ScrollArea.Scrollbar className="pointer-events-none m-2 flex w-1 justify-center rounded-sm bg-gray-200 opacity-0 transition-opacity duration-150 data-[hovering]:pointer-events-auto data-[hovering=true]:pointer-events-auto data-[hovering]:opacity-100 data-[hovering=true]:opacity-100 data-[scrolling]:pointer-events-auto data-[scrolling=true]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling=true]:opacity-100 data-[scrolling]:duration-0 data-[scrolling=true]:duration-0 before:absolute before:h-full before:w-5 before:content-['']">
-        <ScrollArea.Thumb className="w-full rounded-sm bg-gray-500" />
+      <ScrollArea.Scrollbar className="m-px flex w-4 justify-center bg-gray-900/25 dark:bg-gray-50/25 opacity-0 transition-opacity pointer-events-none before:absolute before:h-full before:w-5 before:content-[''] data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[hovering]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0 data-[scrolling]:pointer-events-auto">
+        <ScrollArea.Thumb className="w-full bg-gray-900/80 dark:bg-gray-50/80" />
       </ScrollArea.Scrollbar>
     </ScrollArea.Root>
   );

From 55cd22e735b80f1c90efdffd9f4e345b332684e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 23 Apr 2026 15:02:09 +0200
Subject: [PATCH 032/257] Tabs: darker bg

---
 .../tabs/demos/hero/css-modules/index.module.css          | 4 ++--
 .../react/components/tabs/demos/hero/tailwind/index.tsx   | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
index 523253d817a..6fab98c0cd0 100644
--- a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
@@ -57,7 +57,7 @@
   transition-timing-function: ease-in-out;
   border-top: 1px solid light-dark(var(--color-gray-900), white);
   border-inline: 1px solid light-dark(var(--color-gray-900), white);
-  background-color: light-dark(white, var(--color-gray-900));
+  background-color: light-dark(white, var(--color-gray-950));
 }
 
 .Panel {
@@ -70,7 +70,7 @@
   outline: 0;
   border-inline: 1px solid light-dark(var(--color-gray-900), white);
   border-block: 1px solid light-dark(var(--color-gray-900), white);
-  background-color: light-dark(white, var(--color-gray-900));
+  background-color: light-dark(white, var(--color-gray-950));
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
diff --git a/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
index 8fb4da48a68..d6f864200ca 100644
--- a/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
@@ -23,22 +23,22 @@ export default function ExampleTabs() {
         >
           Account
         </Tabs.Tab>
-        <Tabs.Indicator className="absolute top-0 left-0 -z-1 h-full w-(--active-tab-width) translate-x-(--active-tab-left) border-x border-t border-gray-900 bg-white transition-[translate,width] duration-150 ease-in-out dark:border-white dark:bg-gray-900" />
+        <Tabs.Indicator className="absolute top-0 left-0 -z-1 h-full w-(--active-tab-width) translate-x-(--active-tab-left) border-x border-t border-gray-900 bg-white transition-[translate,width] duration-150 ease-in-out dark:border-white dark:bg-gray-950" />
       </Tabs.List>
       <Tabs.Panel
-        className="relative flex h-32 items-center justify-center border border-gray-900 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-900 [&[hidden]]:hidden"
+        className="relative flex h-32 items-center justify-center border border-gray-900 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-950 [&[hidden]]:hidden"
         value="overview"
       >
         <OverviewIcon className="size-10 text-gray-400 dark:text-gray-500" />
       </Tabs.Panel>
       <Tabs.Panel
-        className="relative flex h-32 items-center justify-center border border-gray-900 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-900 [&[hidden]]:hidden"
+        className="relative flex h-32 items-center justify-center border border-gray-900 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-950 [&[hidden]]:hidden"
         value="projects"
       >
         <ProjectIcon className="size-10 text-gray-400 dark:text-gray-500" />
       </Tabs.Panel>
       <Tabs.Panel
-        className="relative flex h-32 items-center justify-center border border-gray-900 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-900 [&[hidden]]:hidden"
+        className="relative flex h-32 items-center justify-center border border-gray-900 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-950 [&[hidden]]:hidden"
         value="account"
       >
         <PersonIcon className="size-10 text-gray-400 dark:text-gray-500" />

From 6a38db3533cdce594a400c356f8a06013e21c785 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 23 Apr 2026 15:13:14 +0200
Subject: [PATCH 033/257] Fix Button demo line-height

---
 .../components/button/demos/hero/css-modules/index.module.css   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
index 4973dd6deff..42bfee16e53 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
@@ -12,7 +12,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
+  line-height: 1.25rem;
   color: light-dark(var(--color-gray-900), white);
   user-select: none;
 

From 6e85bc7d4703f76f5a4bbc3d2090d800a4ac46bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 23 Apr 2026 15:14:11 +0200
Subject: [PATCH 034/257] Remove red-800 instances

---
 .../field/demos/hero/css-modules/index.module.css         | 2 +-
 .../react/components/field/demos/hero/tailwind/index.tsx  | 2 +-
 .../fieldset/demos/hero/css-modules/index.module.css      | 2 +-
 .../form/demos/form-action/css-modules/index.module.css   | 2 +-
 .../components/form/demos/form-action/tailwind/index.tsx  | 2 +-
 .../form/demos/hero/css-modules/index.module.css          | 2 +-
 .../react/components/form/demos/hero/tailwind/index.tsx   | 2 +-
 .../form/demos/zod/css-modules/index.module.css           | 2 +-
 .../react/components/form/demos/zod/tailwind/index.tsx    | 4 ++--
 .../demos/custom-sanitize/css-modules/index.module.css    | 8 ++++----
 .../react/handbook/forms/demos/components/field.tsx       | 4 +++-
 docs/src/css/index.css                                    | 7 +++++--
 12 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
index 648405341ec..9b6810e935d 100644
--- a/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
@@ -37,7 +37,7 @@
 .Error {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-red-800);
+  color: light-dark(var(--color-red-700), var(--color-red-400));
 }
 
 .Description {
diff --git a/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
index 019ffb80f13..e6c2326dc5e 100644
--- a/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleField() {
         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 font-normal"
       />
-      <Field.Error className="text-sm text-red-800" match="valueMissing">
+      <Field.Error className="text-sm text-red-700 dark:text-red-400" match="valueMissing">
         Please enter your name
       </Field.Error>
 
diff --git a/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
index c1ca2c9a3fa..afe2542108d 100644
--- a/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
@@ -55,7 +55,7 @@
 .Error {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-red-800);
+  color: light-dark(var(--color-red-700), var(--color-red-400));
 }
 
 .Description {
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
index 497bfe9d557..e4216489a40 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
@@ -43,7 +43,7 @@
 .Error {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-red-800);
+  color: light-dark(var(--color-red-700), var(--color-red-400));
 }
 
 .Button {
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
index 187aee67d5f..fcc9312f0d8 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
@@ -26,7 +26,7 @@ export default function ActionStateForm() {
           placeholder="e.g. alice132"
           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 font-normal"
         />
-        <Field.Error className="text-sm text-red-800" />
+        <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
       <Button
         type="submit"
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
index 6adb5a4c7a2..5c4b40c2871 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
@@ -43,7 +43,7 @@
 .Error {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-red-800);
+  color: light-dark(var(--color-red-700), var(--color-red-400));
 }
 
 .Button {
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
index 776fa37bd9f..7b3291f77e3 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
@@ -37,7 +37,7 @@ export default function ExampleForm() {
           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 font-normal"
         />
-        <Field.Error className="text-sm text-red-800" />
+        <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
       <Button
         disabled={loading}
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
index 6adb5a4c7a2..5c4b40c2871 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
@@ -43,7 +43,7 @@
 .Error {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-red-800);
+  color: light-dark(var(--color-red-700), var(--color-red-400));
 }
 
 .Button {
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
index 7ec72b16d5f..b9d702d800a 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
@@ -42,7 +42,7 @@ export default function Page() {
           placeholder="Enter 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 font-normal"
         />
-        <Field.Error className="text-sm text-red-800" />
+        <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
       <Field.Root name="age" className="flex flex-col items-start gap-1">
         <Field.Label className="text-sm font-bold text-gray-900">Age</Field.Label>
@@ -50,7 +50,7 @@ export default function Page() {
           placeholder="Enter age"
           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 font-normal"
         />
-        <Field.Error className="text-sm text-red-800" />
+        <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
       <Button
         type="submit"
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
index 89b23f66487..7e95671a599 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
@@ -43,24 +43,24 @@
 
 .InputInvalidA {
   border-color: var(--color-red);
-  outline: 2px solid var(--color-red-800);
+  outline: 2px solid light-dark(var(--color-red-700), var(--color-red-400));
   outline-offset: -1px;
   animation: otp-field-shake-a 180ms ease-in-out;
 
   &:focus {
-    outline: 2px solid var(--color-red-800);
+    outline: 2px solid light-dark(var(--color-red-700), var(--color-red-400));
     outline-offset: -1px;
   }
 }
 
 .InputInvalidB {
   border-color: var(--color-red);
-  outline: 2px solid var(--color-red-800);
+  outline: 2px solid light-dark(var(--color-red-700), var(--color-red-400));
   outline-offset: -1px;
   animation: otp-field-shake-b 180ms ease-in-out;
 
   &:focus {
-    outline: 2px solid var(--color-red-800);
+    outline: 2px solid light-dark(var(--color-red-700), var(--color-red-400));
     outline-offset: -1px;
   }
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx
index 43bf1cfb9a9..d3a983f16f4 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx
@@ -41,7 +41,9 @@ export const Control = React.forwardRef<HTMLInputElement, Field.Control.Props>(
 );
 
 export function Error({ className, ...props }: Field.Error.Props) {
-  return <Field.Error className={clsx('text-sm text-red-800', className)} {...props} />;
+  return (
+    <Field.Error className={clsx('text-sm text-red-700 dark:text-red-400', className)} {...props} />
+  );
 }
 
 export function Item(props: Field.Item.Props) {
diff --git a/docs/src/css/index.css b/docs/src/css/index.css
index 0ba2e83d8c4..acffea13e1c 100644
--- a/docs/src/css/index.css
+++ b/docs/src/css/index.css
@@ -44,7 +44,8 @@
 
 /* ═══ Safelist to generate Tailwind classes ═══ */
 
-@source '../app/(docs)/react/**/demos/**/*.{ts,tsx}';
+/* TODO: Remove the .css extension once all CSS module demos are migrated to the new look */
+@source '../app/(docs)/react/**/demos/**/*.{ts,tsx,css}';
 
 /* Temporary sources until Tailwind CSS vars are no longer used in them */
 @source './mdx-components.css';
@@ -74,7 +75,9 @@
   --color-gray-950: oklch(13% 0.028 261.692deg);
 
   --color-blue-800: oklch(42.4% 0.199 265.638deg);
-  --color-red-800: oklch(44.4% 0.177 26.899deg);
+
+  --color-red-400: oklch(70.4% 0.191 22.216deg);
+  --color-red-700: oklch(50.5% 0.213 27.518deg);
 
   /* Typography */
   --font-mono: 'Paper Mono', monospace;

From 7d23155dd77d5ec1f0dcb849e81e6af7e75ff518 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 23 Apr 2026 15:29:53 +0200
Subject: [PATCH 035/257] AlertDialog brutalist

---
 .../alert-dialog/demos/_index.module.css      | 60 +++++++++----------
 .../tailwind/index.tsx                        | 31 +++++-----
 .../tailwind/index.tsx                        | 30 ++++------
 .../demos/hero/css-modules/index.module.css   | 58 ++++++++----------
 .../demos/hero/tailwind/index.tsx             | 29 ++++-----
 5 files changed, 95 insertions(+), 113 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
index 254424a9378..8513283a12a 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
@@ -3,38 +3,32 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
+  height: 2rem;
   padding: 0 0.875rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: none;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-900), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
 
 .DangerButton {
-  color: var(--color-red);
+  color: light-dark(var(--color-red-700), var(--color-red-400));
 }
 
 .Backdrop {
@@ -42,8 +36,8 @@
   min-height: 100dvh;
   inset: 0;
   background-color: black;
-  opacity: 0.2;
-  transition: opacity 150ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  opacity: 0.08;
+  transition: opacity 150ms;
 
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
@@ -69,15 +63,15 @@
   width: 24rem;
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
-  padding: 1.5rem;
-  border-radius: 0.5rem;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  padding: 0.75rem;
+  border: 1px solid light-dark(var(--color-gray-900), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-900), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition: all 150ms;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    box-shadow: none;
   }
 
   &[data-starting-style],
@@ -88,24 +82,24 @@
 }
 
 .Title {
-  margin-top: -0.375rem;
-  margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
 .Description {
-  margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 }
 
 .Actions {
   display: flex;
   justify-content: end;
-  gap: 1rem;
+  gap: 0.75rem;
+  margin-top: 1rem;
 }
 
 .Container {
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 7cfd9aa66d7..2c649a55507 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -6,6 +6,11 @@ type AlertPayload = { message: string };
 
 const demoAlertDialog = AlertDialog.createHandle<AlertPayload>();
 
+const buttonClasses =
+  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3.5 text-sm font-normal text-gray-900 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800';
+
+const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
+
 export default function AlertDialogDetachedTriggersControlledDemo() {
   const [open, setOpen] = React.useState(false);
   const [triggerId, setTriggerId] = React.useState<string | null>(null);
@@ -19,7 +24,7 @@ export default function AlertDialogDetachedTriggersControlledDemo() {
     <React.Fragment>
       <div className="flex flex-wrap gap-2 justify-center">
         <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-normal 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"
+          className={dangerButtonClasses}
           handle={demoAlertDialog}
           id="alert-trigger-1"
           payload={{ message: 'Discard draft?' }}
@@ -28,7 +33,7 @@ export default function AlertDialogDetachedTriggersControlledDemo() {
         </AlertDialog.Trigger>
 
         <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-normal 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"
+          className={dangerButtonClasses}
           handle={demoAlertDialog}
           id="alert-trigger-2"
           payload={{ message: 'Delete project?' }}
@@ -37,7 +42,7 @@ export default function AlertDialogDetachedTriggersControlledDemo() {
         </AlertDialog.Trigger>
 
         <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-normal 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={buttonClasses}
           handle={demoAlertDialog}
           id="alert-trigger-3"
           payload={{ message: 'Sign out?' }}
@@ -47,7 +52,7 @@ export default function AlertDialogDetachedTriggersControlledDemo() {
 
         <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-normal 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={buttonClasses}
           onClick={() => {
             setTriggerId('alert-trigger-2');
             setOpen(true);
@@ -65,21 +70,17 @@ export default function AlertDialogDetachedTriggersControlledDemo() {
       >
         {({ payload }) => (
           <AlertDialog.Portal>
-            <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
-            <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-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-bold">
+            <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-[0.08] transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+            <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 bg-white dark:bg-gray-950 p-3 text-gray-900 dark:text-white border border-gray-900 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+              <AlertDialog.Title className="text-sm font-bold">
                 {payload?.message ?? 'Are you sure?'}
               </AlertDialog.Title>
-              <AlertDialog.Description className="mb-6 text-base text-gray-600">
+              <AlertDialog.Description className="text-sm text-gray-600 dark:text-gray-400">
                 This action cannot be undone.
               </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-normal 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">
-                  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-normal 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">
-                  Confirm
-                </AlertDialog.Close>
+              <div className="flex justify-end gap-3 mt-4">
+                <AlertDialog.Close className={buttonClasses}>Cancel</AlertDialog.Close>
+                <AlertDialog.Close className={dangerButtonClasses}>Confirm</AlertDialog.Close>
               </div>
             </AlertDialog.Popup>
           </AlertDialog.Portal>
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
index 896f6e464de..4fd27c4e8d1 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -4,33 +4,29 @@ import { AlertDialog } from '@base-ui/react/alert-dialog';
 
 const demoAlertDialog = AlertDialog.createHandle();
 
+const buttonClasses =
+  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3.5 text-sm font-normal text-gray-900 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800';
+
+const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
+
 export default function AlertDialogDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
-      <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-normal 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"
-        handle={demoAlertDialog}
-      >
+      <AlertDialog.Trigger className={dangerButtonClasses} handle={demoAlertDialog}>
         Discard draft
       </AlertDialog.Trigger>
 
       <AlertDialog.Root handle={demoAlertDialog}>
         <AlertDialog.Portal>
-          <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
-          <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-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-bold">
-              Discard draft?
-            </AlertDialog.Title>
-            <AlertDialog.Description className="mb-6 text-base text-gray-600">
+          <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-[0.08] transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+          <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 bg-white dark:bg-gray-950 p-3 text-gray-900 dark:text-white border border-gray-900 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+            <AlertDialog.Title className="text-sm font-bold">Discard draft?</AlertDialog.Title>
+            <AlertDialog.Description className="text-sm text-gray-600 dark:text-gray-400">
               This action cannot be undone.
             </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-normal 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">
-                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-normal 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">
-                Discard
-              </AlertDialog.Close>
+            <div className="flex justify-end gap-3 mt-4">
+              <AlertDialog.Close className={buttonClasses}>Cancel</AlertDialog.Close>
+              <AlertDialog.Close className={dangerButtonClasses}>Discard</AlertDialog.Close>
             </div>
           </AlertDialog.Popup>
         </AlertDialog.Portal>
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
index 174c2966cc2..0276a9bd23a 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
@@ -3,37 +3,31 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
+  height: 2rem;
   padding: 0 0.875rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: none;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-900), white);
   user-select: none;
 
   &[data-color='red'] {
-    color: var(--color-red);
+    color: light-dark(var(--color-red-700), var(--color-red-400));
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
 
@@ -42,7 +36,7 @@
   min-height: 100dvh;
   inset: 0;
   background-color: black;
-  opacity: 0.2;
+  opacity: 0.08;
   transition: opacity 150ms;
 
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
@@ -69,15 +63,15 @@
   width: 24rem;
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
-  padding: 1.5rem;
-  border-radius: 0.5rem;
-  outline: 1px solid var(--color-gray-300);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  padding: 0.75rem;
+  border: 1px solid light-dark(var(--color-gray-900), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-900), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition: all 150ms;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    box-shadow: none;
   }
 
   &[data-starting-style],
@@ -88,22 +82,22 @@
 }
 
 .Title {
-  margin-top: -0.375rem;
-  margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
 .Description {
-  margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 }
 
 .Actions {
   display: flex;
   justify-content: end;
-  gap: 1rem;
+  gap: 0.75rem;
+  margin-top: 1rem;
 }
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
index ef4b2c7e53f..2d7df364cfd 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
@@ -1,27 +1,24 @@
 import { AlertDialog } from '@base-ui/react/alert-dialog';
 
+const buttonClasses =
+  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3.5 text-sm font-normal text-gray-900 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800';
+
+const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
+
 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-normal 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">
-        Discard draft
-      </AlertDialog.Trigger>
+      <AlertDialog.Trigger className={dangerButtonClasses}>Discard draft</AlertDialog.Trigger>
       <AlertDialog.Portal>
-        <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
-        <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-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-bold">
-            Discard draft?
-          </AlertDialog.Title>
-          <AlertDialog.Description className="mb-6 text-base text-gray-600">
+        <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-[0.08] transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+        <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 bg-white dark:bg-gray-950 p-3 text-gray-900 dark:text-white border border-gray-900 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+          <AlertDialog.Title className="text-sm font-bold">Discard draft?</AlertDialog.Title>
+          <AlertDialog.Description className="text-sm text-gray-600 dark:text-gray-400">
             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-normal 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">
-              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-normal 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">
-              Discard
-            </AlertDialog.Close>
+          <div className="flex justify-end gap-3 mt-4">
+            <AlertDialog.Close className={buttonClasses}>Cancel</AlertDialog.Close>
+            <AlertDialog.Close className={dangerButtonClasses}>Discard</AlertDialog.Close>
           </div>
         </AlertDialog.Popup>
       </AlertDialog.Portal>

From d88bed6f1ea9a8d150988d2925d3018d8804330e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 23 Apr 2026 15:54:24 +0200
Subject: [PATCH 036/257] ScrollArea brutalist

---
 .../demos/both/css-modules/index.module.css   | 10 ++------
 .../scroll-area/demos/both/tailwind/index.tsx |  8 +++----
 .../demos/hero/css-modules/index.module.css   | 11 +++------
 .../scroll-area/demos/hero/tailwind/index.tsx | 10 ++++----
 .../scroll-fade/css-modules/index.module.css  | 24 ++-----------------
 .../demos/scroll-fade/tailwind/index.tsx      |  4 ++--
 6 files changed, 18 insertions(+), 49 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
index 7bb2a1e6b5f..7a1e85f3c67 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
@@ -43,10 +43,7 @@
 .Scrollbar {
   display: flex;
   position: relative;
-  background-color: light-dark(
-    color-mix(in srgb, var(--color-gray-900) 25%, transparent),
-    color-mix(in srgb, var(--color-gray-50) 25%, transparent)
-  );
+  background-color: light-dark(rgb(0 0 0 / 12%), rgb(255 255 255 / 12%));
   margin: 1px;
   opacity: 0;
   transition: opacity 150ms;
@@ -93,8 +90,5 @@
 
 .Thumb {
   width: 100%;
-  background-color: light-dark(
-    color-mix(in srgb, var(--color-gray-900) 80%, transparent),
-    color-mix(in srgb, var(--color-gray-50) 80%, transparent)
-  );
+  background-color: light-dark(var(--color-gray-900), white);
 }
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
index 20e9b369b9e..145887499cc 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
@@ -17,14 +17,14 @@ export default function ExampleScrollAreaBoth() {
           </ul>
         </ScrollArea.Content>
       </ScrollArea.Viewport>
-      <ScrollArea.Scrollbar className="relative m-px flex bg-gray-900/25 dark:bg-gray-50/25 opacity-0 transition-opacity pointer-events-none before:absolute before:content-[''] data-[orientation=vertical]:w-4 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:bottom-0 data-[hovering]:pointer-events-auto data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0">
-        <ScrollArea.Thumb className="w-full bg-gray-900/80 dark:bg-gray-50/80" />
+      <ScrollArea.Scrollbar className="relative m-px flex bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:content-[''] data-[orientation=vertical]:w-4 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:bottom-0 data-[hovering]:pointer-events-auto data-[hovering]:opacity-100 data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0">
+        <ScrollArea.Thumb className="w-full bg-gray-900 dark:bg-white" />
       </ScrollArea.Scrollbar>
       <ScrollArea.Scrollbar
-        className="relative m-px flex bg-gray-900/25 dark:bg-gray-50/25 opacity-0 transition-opacity pointer-events-none before:absolute before:content-[''] data-[orientation=vertical]:w-4 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:bottom-0 data-[hovering]:pointer-events-auto data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0"
+        className="relative m-px flex bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:content-[''] data-[orientation=vertical]:w-4 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:bottom-0 data-[hovering]:pointer-events-auto data-[hovering]:opacity-100 data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0"
         orientation="horizontal"
       >
-        <ScrollArea.Thumb className="w-full bg-gray-900/80 dark:bg-gray-50/80" />
+        <ScrollArea.Thumb className="w-full bg-gray-900 dark:bg-white" />
       </ScrollArea.Scrollbar>
       <ScrollArea.Corner />
     </ScrollArea.Root>
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
index 9480b121a31..c310163c0ae 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
@@ -3,6 +3,7 @@
   width: 24rem;
   height: 8.5rem;
   max-width: calc(100vw - 8rem);
+  background-color: light-dark(white, var(--color-gray-950));
 }
 
 .Viewport {
@@ -35,10 +36,7 @@
 .Scrollbar {
   display: flex;
   justify-content: center;
-  background-color: light-dark(
-    color-mix(in srgb, var(--color-gray-900) 25%, transparent),
-    color-mix(in srgb, var(--color-gray-50) 25%, transparent)
-  );
+  background-color: light-dark(rgb(0 0 0 / 12%), rgb(255 255 255 / 12%));
   width: 1rem;
   margin: 1px;
   opacity: 0;
@@ -65,8 +63,5 @@
 
 .Thumb {
   width: 100%;
-  background-color: light-dark(
-    color-mix(in srgb, var(--color-gray-900) 80%, transparent),
-    color-mix(in srgb, var(--color-gray-50) 80%, transparent)
-  );
+  background-color: light-dark(var(--color-gray-900), white);
 }
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
index 0d7b5acb8f0..c3776229856 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
@@ -2,9 +2,9 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 
 export default function ExampleScrollArea() {
   return (
-    <ScrollArea.Root className="h-[8.5rem] w-96 max-w-[calc(100vw-8rem)]">
+    <ScrollArea.Root className="h-[8.5rem] w-96 max-w-[calc(100vw-8rem)] bg-white dark:bg-gray-950">
       <ScrollArea.Viewport className="h-full outline-1 -outline-offset-1 outline-gray-900 dark:outline-white focus-visible:outline-2 focus-visible:-outline-offset-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 dark:text-white">
+        <ScrollArea.Content className="flex flex-col gap-4 py-3 pr-6 pl-4 text-sm leading-[1.375rem] text-gray-900 dark:text-white">
           <p>
             Vernacular architecture is building done outside any academic tradition, and without
             professional guidance. It is not a particular architectural movement or style, but
@@ -24,10 +24,10 @@ export default function ExampleScrollArea() {
             conscious with contemporary design and construction—part of a broader interest in
             sustainable design.
           </p>
-        </div>
+        </ScrollArea.Content>
       </ScrollArea.Viewport>
-      <ScrollArea.Scrollbar className="m-px flex w-4 justify-center bg-gray-900/25 dark:bg-gray-50/25 opacity-0 transition-opacity pointer-events-none before:absolute before:h-full before:w-5 before:content-[''] data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[hovering]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0 data-[scrolling]:pointer-events-auto">
-        <ScrollArea.Thumb className="w-full bg-gray-900/80 dark:bg-gray-50/80" />
+      <ScrollArea.Scrollbar className="m-px flex w-4 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:h-full before:w-5 before:content-[''] data-[hovering]:opacity-100 data-[hovering]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0 data-[scrolling]:pointer-events-auto">
+        <ScrollArea.Thumb className="w-full bg-gray-900 dark:bg-white" />
       </ScrollArea.Scrollbar>
     </ScrollArea.Root>
   );
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
index 38c87168261..d3d0683f888 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
@@ -44,10 +44,7 @@
 .Scrollbar {
   display: flex;
   justify-content: center;
-  background-color: light-dark(
-    color-mix(in srgb, var(--color-gray-900) 25%, transparent),
-    color-mix(in srgb, var(--color-gray-50) 25%, transparent)
-  );
+  background-color: light-dark(rgb(0 0 0 / 8%), rgb(255 255 255 / 12%));
   width: 1rem;
   margin: 1px;
   opacity: 0;
@@ -74,22 +71,5 @@
 
 .Thumb {
   width: 100%;
-  background-color: light-dark(
-    color-mix(in srgb, var(--color-gray-900) 80%, transparent),
-    color-mix(in srgb, var(--color-gray-50) 80%, transparent)
-  );
-}
-
-.ScrollUp {
-  position: absolute;
-  top: 0;
-  z-index: 1;
-  opacity: 0;
-  transition: opacity 0.15s;
-  pointer-events: none;
-
-  [data-overflow-y-start] & {
-    opacity: 1;
-    pointer-events: auto;
-  }
+  background-color: light-dark(var(--color-gray-900), white);
 }
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
index 62e9a22f2c6..c598d6e1e31 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
@@ -26,8 +26,8 @@ export default function ExampleScrollAreaScrollFade() {
           </p>
         </ScrollArea.Content>
       </ScrollArea.Viewport>
-      <ScrollArea.Scrollbar className="m-px flex w-4 justify-center bg-gray-900/25 dark:bg-gray-50/25 opacity-0 transition-opacity pointer-events-none before:absolute before:h-full before:w-5 before:content-[''] data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[hovering]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0 data-[scrolling]:pointer-events-auto">
-        <ScrollArea.Thumb className="w-full bg-gray-900/80 dark:bg-gray-50/80" />
+      <ScrollArea.Scrollbar className="m-px flex w-4 justify-center bg-black/8 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:h-full before:w-5 before:content-[''] data-[hovering]:opacity-100 data-[hovering]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0 data-[scrolling]:pointer-events-auto">
+        <ScrollArea.Thumb className="w-full bg-gray-900 dark:bg-white" />
       </ScrollArea.Scrollbar>
     </ScrollArea.Root>
   );

From 7bb754bfc3c9162216ce33d05515bad21aac8686 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 24 Apr 2026 00:07:26 +0200
Subject: [PATCH 037/257] Select brutalist

---
 .../grouped/css-modules/index.module.css      | 102 +++++---------
 .../demos/grouped/css-modules/index.tsx       |  30 ++--
 .../select/demos/grouped/tailwind/index.tsx   |  55 +++++---
 .../demos/hero/css-modules/index.module.css   | 128 +++++-------------
 .../select/demos/hero/css-modules/index.tsx   |  30 ++--
 .../select/demos/hero/tailwind/index.tsx      |  49 +++++--
 .../multiple/css-modules/index.module.css     | 116 ++++------------
 .../demos/multiple/css-modules/index.tsx      |  26 +++-
 .../select/demos/multiple/tailwind/index.tsx  |  40 ++++--
 .../css-modules/index.module.css              | 109 ++++++---------
 .../demos/object-values/css-modules/index.tsx |  30 ++--
 .../demos/object-values/tailwind/index.tsx    |  56 +++++---
 12 files changed, 353 insertions(+), 418 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index 14f36cd7af0..a2fb29eba01 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -9,12 +9,12 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
   cursor: default;
 }
 
 .Value[data-placeholder] {
-  opacity: 0.6;
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 }
 
 .Select {
@@ -23,36 +23,34 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  height: 2.5rem;
-  padding-left: 0.875rem;
-  padding-right: 0.75rem;
+  height: 2rem;
+  padding-left: 0.75rem;
+  padding-right: 0.5rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: none;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   font-family: inherit;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  color: var(--color-gray-900);
-  -webkit-user-select: none;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
   min-width: 11rem;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
 
@@ -62,23 +60,27 @@
 
 .Positioner {
   outline: none;
-  z-index: 1;
-  -webkit-user-select: none;
+  z-index: 10;
   user-select: none;
 }
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   background-clip: padding-box;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 150ms,
     opacity 150ms;
 
+  @media (prefers-color-scheme: dark) {
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -87,21 +89,10 @@
 
   &[data-side='none'] {
     transition: none;
-    transform: none;
+    transform: translateY(1px);
     opacity: 1;
     min-width: calc(var(--anchor-width) + 1rem);
   }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-  }
 }
 
 .List {
@@ -126,8 +117,8 @@
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--color-gray-700);
-  background-color: canvas;
+  color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  background-color: light-dark(white, var(--color-gray-950));
   position: sticky;
   z-index: 1;
   top: 0;
@@ -137,8 +128,8 @@
   box-sizing: border-box;
   outline: 0;
   font-size: 0.875rem;
-  line-height: 1rem;
-  padding-block: 0.5rem;
+  line-height: 1.25rem;
+  padding-block: 0.375rem;
   padding-left: 0.625rem;
   padding-right: 1rem;
   display: grid;
@@ -146,33 +137,15 @@
   align-items: center;
   grid-template-columns: 0.75rem 1fr;
   cursor: default;
-  -webkit-user-select: none;
   user-select: none;
 
-  @media (pointer: coarse) {
-    padding-block: 0.625rem;
-    font-size: 0.925rem;
-  }
-
   [data-side='none'] & {
-    font-size: 1rem;
     padding-right: 3rem;
   }
 
   &[data-highlighted] {
-    z-index: 0;
-    position: relative;
-    color: var(--color-gray-50);
-  }
-
-  &[data-highlighted]::before {
-    content: '';
-    z-index: -1;
-    position: absolute;
-    inset-block: 0;
-    inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    background-color: light-dark(var(--color-gray-950), white);
+    color: light-dark(white, var(--color-gray-950));
   }
 }
 
@@ -191,23 +164,18 @@
 }
 
 .Separator {
-  margin-block: 0.5rem;
-  margin-inline: 1rem;
   height: 1px;
-  background-color: var(--color-gray-200);
-
-  @media (prefers-color-scheme: dark) {
-    background-color: var(--color-gray-300);
-  }
+  margin-block: 0.25rem;
+  margin-inline: 1rem;
+  background-color: light-dark(var(--color-gray-950), white);
 }
 
 .ScrollArrow {
   width: 100%;
-  background: canvas;
+  background-color: light-dark(white, var(--color-gray-950));
   z-index: 2;
   text-align: center;
   cursor: default;
-  border-radius: 0.375rem;
   height: 1rem;
   font-size: 0.75rem;
   display: flex;
@@ -223,6 +191,8 @@
   }
 
   &[data-direction='up'] {
+    top: 0;
+
     &[data-side='none'] {
       &::before {
         top: -100%;
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
index 698af585bef..e393d5dc7af 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
@@ -19,7 +19,7 @@ export default function ExampleSelectGrouped() {
         <Select.Portal>
           <Select.Positioner className={styles.Positioner} sideOffset={8}>
             <Select.Popup className={styles.Popup}>
-              <Select.ScrollUpArrow className={styles.ScrollArrow} />
+              <Select.ScrollUpArrow className={styles.ScrollArrow}>⏶</Select.ScrollUpArrow>
               <Select.List className={styles.List}>
                 {groupedProduce.map((group, index) => (
                   <React.Fragment key={group.value}>
@@ -44,7 +44,7 @@ export default function ExampleSelectGrouped() {
                   </React.Fragment>
                 ))}
               </Select.List>
-              <Select.ScrollDownArrow className={styles.ScrollArrow} />
+              <Select.ScrollDownArrow className={styles.ScrollArrow}>⏷</Select.ScrollDownArrow>
             </Select.Popup>
           </Select.Positioner>
         </Select.Portal>
@@ -56,24 +56,36 @@ export default function ExampleSelectGrouped() {
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
+      width="12"
       height="12"
-      viewBox="0 0 8 12"
+      viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.5"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       {...props}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="m7 15 5 5 5-5" />
+      <path d="m7 9 5-5 5 5" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index 0d3865c809e..18c01ae2a53 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -4,37 +4,42 @@ import { Field } from '@base-ui/react/field';
 
 export default function ExampleSelectGrouped() {
   return (
-    <Field.Root className="flex flex-col gap-1">
+    <Field.Root className="flex flex-col items-start gap-1">
       <Field.Label
-        className="cursor-default text-sm leading-5 font-bold text-gray-900"
+        className="cursor-default text-sm leading-5 font-bold text-gray-950 dark:text-white"
         nativeLabel={false}
         render={<div />}
       >
         Produce
       </Field.Label>
       <Select.Root items={groupedProduce}>
-        <Select.Trigger className="flex h-10 min-w-44 items-center justify-between gap-3 rounded-md border border-gray-200 pr-3 pl-3.5 text-base bg-[canvas] 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 data-[popup-open]:bg-gray-100 font-normal">
-          <Select.Value className="data-[placeholder]:opacity-60" placeholder="Select produce" />
+        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 bg-gray-200 text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-300 font-normal dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:data-[popup-open]:bg-gray-700">
+          <Select.Value
+            className="data-[placeholder]:text-gray-600 dark:data-[placeholder]:text-gray-400"
+            placeholder="Select produce"
+          />
           <Select.Icon className="flex">
             <ChevronUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
-          <Select.Positioner className="outline-none select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding rounded-md bg-[canvas] 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-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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-gray-300">
-              <Select.ScrollUpArrow className="top-0 z-[2] flex h-4 w-full cursor-default items-center justify-center rounded-md bg-[canvas] text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-['']" />
+          <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
+              <Select.ScrollUpArrow className="top-0 z-[2] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-gray-950">
+                ⏶
+              </Select.ScrollUpArrow>
               <Select.List className="relative py-1 scroll-pt-[2.25rem] scroll-pb-6 overflow-y-auto max-h-[var(--available-height)]">
                 {groupedProduce.map((group, index) => (
                   <React.Fragment key={group.value}>
                     <Select.Group className="block pb-0.5">
-                      <Select.GroupLabel className="sticky top-0 z-[1] bg-[canvas] pr-4 pb-1 pl-[1.875rem] pt-2 text-[0.6875rem] font-bold text-[var(--color-gray-700)] uppercase tracking-wider">
+                      <Select.GroupLabel className="sticky top-0 z-[1] bg-white pr-4 pb-1 pl-[1.875rem] pt-2 text-[0.6875rem] font-bold text-gray-500 uppercase tracking-wider dark:bg-gray-950 dark:text-gray-400">
                         {group.value}
                       </Select.GroupLabel>
                       {group.items.map((item) => (
                         <Select.Item
                           key={item.value}
                           value={item.value}
-                          className="grid 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]: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 pointer-coarse:py-2.5 pointer-coarse:text-[0.925rem]"
+                          className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-hidden select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-gray-950 data-[highlighted]:text-white dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-gray-950"
                         >
                           <Select.ItemIndicator className="col-start-1">
                             <CheckIcon className="size-3" />
@@ -44,12 +49,14 @@ export default function ExampleSelectGrouped() {
                       ))}
                     </Select.Group>
                     {index < groupedProduce.length - 1 ? (
-                      <Select.Separator className="my-2 mx-4 h-px bg-gray-200 dark:bg-gray-300" />
+                      <Select.Separator className="mx-4 my-1 h-px bg-gray-950 dark:bg-white" />
                     ) : null}
                   </React.Fragment>
                 ))}
               </Select.List>
-              <Select.ScrollDownArrow className="bottom-0 z-[2] flex h-4 w-full cursor-default items-center justify-center rounded-md bg-[canvas] text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] bottom-0 data-[side=none]:before:bottom-[-100%]" />
+              <Select.ScrollDownArrow className="bottom-0 z-[2] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:bottom-[-100%] dark:bg-gray-950">
+                ⏷
+              </Select.ScrollDownArrow>
             </Select.Popup>
           </Select.Positioner>
         </Select.Portal>
@@ -61,24 +68,36 @@ export default function ExampleSelectGrouped() {
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
+      width="12"
       height="12"
-      viewBox="0 0 8 12"
+      viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.5"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       {...props}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="m7 15 5 5 5-5" />
+      <path d="m7 9 5-5 5 5" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
index f8bc6721da3..6d19eb34862 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
@@ -9,12 +9,12 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
   cursor: default;
 }
 
 .Value[data-placeholder] {
-  opacity: 0.6;
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 }
 
 .Select {
@@ -23,36 +23,34 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  height: 2.5rem;
-  padding-left: 0.875rem;
-  padding-right: 0.75rem;
+  height: 2rem;
+  padding-left: 0.75rem;
+  padding-right: 0.5rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: none;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   font-family: inherit;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  color: var(--color-gray-900);
-  -webkit-user-select: none;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
   min-width: 10rem;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
 
@@ -62,23 +60,27 @@
 
 .Positioner {
   outline: none;
-  z-index: 1;
-  -webkit-user-select: none;
+  z-index: 10;
   user-select: none;
 }
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   background-clip: padding-box;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 150ms,
     opacity 150ms;
 
+  @media (prefers-color-scheme: dark) {
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -87,21 +89,10 @@
 
   &[data-side='none'] {
     transition: none;
-    transform: none;
+    transform: translateY(1px);
     opacity: 1;
     min-width: calc(var(--anchor-width) + 1rem);
   }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-  }
 }
 
 .List {
@@ -113,52 +104,12 @@
   scroll-padding-block: 1.5rem;
 }
 
-.Arrow {
-  display: flex;
-
-  &[data-side='top'] {
-    bottom: -8px;
-    rotate: 180deg;
-  }
-
-  &[data-side='bottom'] {
-    top: -8px;
-    rotate: 0deg;
-  }
-
-  &[data-side='left'] {
-    right: -13px;
-    rotate: 90deg;
-  }
-
-  &[data-side='right'] {
-    left: -13px;
-    rotate: -90deg;
-  }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
-
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
-  }
-}
-
 .Item {
   box-sizing: border-box;
   outline: 0;
   font-size: 0.875rem;
-  line-height: 1rem;
-  padding-block: 0.5rem;
+  line-height: 1.25rem;
+  padding-block: 0.375rem;
   padding-left: 0.625rem;
   padding-right: 1rem;
   display: grid;
@@ -166,33 +117,15 @@
   align-items: center;
   grid-template-columns: 0.75rem 1fr;
   cursor: default;
-  -webkit-user-select: none;
   user-select: none;
 
-  @media (pointer: coarse) {
-    padding-block: 0.625rem;
-    font-size: 0.925rem;
-  }
-
   [data-side='none'] & {
-    font-size: 1rem;
     padding-right: 3rem;
   }
 
   &[data-highlighted] {
-    z-index: 0;
-    position: relative;
-    color: var(--color-gray-50);
-  }
-
-  &[data-highlighted]::before {
-    content: '';
-    z-index: -1;
-    position: absolute;
-    inset-block: 0;
-    inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    background-color: light-dark(var(--color-gray-950), white);
+    color: light-dark(white, var(--color-gray-950));
   }
 }
 
@@ -212,11 +145,10 @@
 
 .ScrollArrow {
   width: 100%;
-  background: canvas;
+  background-color: light-dark(white, var(--color-gray-950));
   z-index: 1;
   text-align: center;
   cursor: default;
-  border-radius: 0.375rem;
   height: 1rem;
   font-size: 0.75rem;
   display: flex;
@@ -232,6 +164,8 @@
   }
 
   &[data-direction='up'] {
+    top: 0;
+
     &[data-side='none'] {
       &::before {
         top: -100%;
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
index 3ddb06ae9f3..83422a72c30 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleSelect() {
         <Select.Portal>
           <Select.Positioner className={styles.Positioner} sideOffset={8}>
             <Select.Popup className={styles.Popup}>
-              <Select.ScrollUpArrow className={styles.ScrollArrow} />
+              <Select.ScrollUpArrow className={styles.ScrollArrow}>⏶</Select.ScrollUpArrow>
               <Select.List className={styles.List}>
                 {apples.map(({ label, value }) => (
                   <Select.Item key={label} value={value} className={styles.Item}>
@@ -35,7 +35,7 @@ export default function ExampleSelect() {
                   </Select.Item>
                 ))}
               </Select.List>
-              <Select.ScrollDownArrow className={styles.ScrollArrow} />
+              <Select.ScrollDownArrow className={styles.ScrollArrow}>⏷</Select.ScrollDownArrow>
             </Select.Popup>
           </Select.Positioner>
         </Select.Portal>
@@ -47,24 +47,36 @@ export default function ExampleSelect() {
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
+      width="12"
       height="12"
-      viewBox="0 0 8 12"
+      viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.5"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       {...props}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="m7 15 5 5 5-5" />
+      <path d="m7 9 5-5 5 5" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index e0262a2864d..ffce17a1612 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -11,27 +11,32 @@ const apples = [
 
 export default function ExampleSelect() {
   return (
-    <div className="flex flex-col gap-1">
+    <div className="flex flex-col items-start gap-1">
       <Select.Root items={apples}>
-        <Select.Label className="cursor-default text-sm leading-5 font-bold text-gray-900">
+        <Select.Label className="cursor-default text-sm leading-5 font-bold text-gray-950 dark:text-white">
           Apple
         </Select.Label>
-        <Select.Trigger className="flex h-10 min-w-40 items-center justify-between gap-3 rounded-md border border-gray-200 pr-3 pl-3.5 text-base bg-[canvas] text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100 font-normal">
-          <Select.Value className="data-[placeholder]:opacity-60" placeholder="Select apple" />
+        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 bg-gray-200 text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-300 font-normal dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:data-[popup-open]:bg-gray-700">
+          <Select.Value
+            className="data-[placeholder]:text-gray-600 dark:data-[placeholder]:text-gray-400"
+            placeholder="Select apple"
+          />
           <Select.Icon className="flex">
             <ChevronUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding rounded-md bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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-gray-300">
-              <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center rounded-md bg-[canvas] text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-['']" />
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
+              <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-gray-950">
+                ⏶
+              </Select.ScrollUpArrow>
               <Select.List className="relative py-1 scroll-py-6 overflow-y-auto max-h-[var(--available-height)]">
                 {apples.map(({ label, value }) => (
                   <Select.Item
                     key={label}
                     value={value}
-                    className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-4 pl-2.5 text-sm leading-4 outline-hidden select-none 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 pointer-coarse:py-2.5 pointer-coarse:text-[0.925rem]"
+                    className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-hidden select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-gray-950 data-[highlighted]:text-white dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-gray-950"
                   >
                     <Select.ItemIndicator className="col-start-1">
                       <CheckIcon className="size-3" />
@@ -40,7 +45,9 @@ export default function ExampleSelect() {
                   </Select.Item>
                 ))}
               </Select.List>
-              <Select.ScrollDownArrow className="bottom-0 z-[1] flex h-4 w-full cursor-default items-center justify-center rounded-md bg-[canvas] text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] bottom-0 data-[side=none]:before:bottom-[-100%]" />
+              <Select.ScrollDownArrow className="bottom-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:bottom-[-100%] dark:bg-gray-950">
+                ⏷
+              </Select.ScrollDownArrow>
             </Select.Popup>
           </Select.Positioner>
         </Select.Portal>
@@ -52,24 +59,36 @@ export default function ExampleSelect() {
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
+      width="12"
       height="12"
-      viewBox="0 0 8 12"
+      viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.5"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       {...props}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="m7 15 5 5 5-5" />
+      <path d="m7 9 5-5 5 5" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
index 441180caf71..ce76b5326cf 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
@@ -9,12 +9,12 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
   cursor: default;
 }
 
 .Value[data-placeholder] {
-  opacity: 0.6;
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 }
 
 .Select {
@@ -23,35 +23,34 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  height: 2.5rem;
-  padding-left: 0.875rem;
-  padding-right: 0.75rem;
+  height: 2rem;
+  padding-left: 0.75rem;
+  padding-right: 0.5rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: none;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   font-family: inherit;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
   min-width: 14rem;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
 
@@ -61,24 +60,29 @@
 
 .Positioner {
   outline: none;
-  z-index: 1;
+  z-index: 10;
 }
 
 .Popup {
   box-sizing: border-box;
   padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   background-clip: padding-box;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 150ms,
     opacity 150ms;
   overflow-y: auto;
   max-height: var(--available-height);
 
+  @media (prefers-color-scheme: dark) {
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -91,25 +95,14 @@
     opacity: 1;
     min-width: calc(var(--anchor-width) + 1rem);
   }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-  }
 }
 
 .Item {
   box-sizing: border-box;
   outline: 0;
   font-size: 0.875rem;
-  line-height: 1rem;
-  padding-block: 0.5rem;
+  line-height: 1.25rem;
+  padding-block: 0.375rem;
   padding-left: 0.625rem;
   padding-right: 1rem;
   display: grid;
@@ -120,31 +113,14 @@
   user-select: none;
   scroll-margin-block: 0.25rem;
 
-  @media (pointer: coarse) {
-    padding-block: 0.625rem;
-    font-size: 0.925rem;
-  }
-
   [data-side='none'] & {
-    font-size: 1rem;
     padding-right: 3rem;
   }
 
   @media (hover: hover) {
     &[data-highlighted] {
-      z-index: 0;
-      position: relative;
-      color: var(--color-gray-50);
-    }
-
-    &[data-highlighted]::before {
-      content: '';
-      z-index: -1;
-      position: absolute;
-      inset-block: 0;
-      inset-inline: 0.25rem;
-      border-radius: 0.25rem;
-      background-color: var(--color-gray-900);
+      background-color: light-dark(var(--color-gray-950), white);
+      color: light-dark(white, var(--color-gray-950));
     }
   }
 }
@@ -162,41 +138,3 @@
 .ItemText {
   grid-column-start: 2;
 }
-
-.ScrollArrow {
-  width: 100%;
-  background: canvas;
-  z-index: 1;
-  text-align: center;
-  cursor: default;
-  border-radius: 0.375rem;
-  height: 1rem;
-  font-size: 0.75rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-  }
-
-  &[data-direction='up'] {
-    top: 0;
-
-    &::before {
-      top: -100%;
-    }
-  }
-
-  &[data-direction='down'] {
-    bottom: 0;
-
-    &::before {
-      bottom: -100%;
-    }
-  }
-}
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
index 8b752db7281..d24bf376406 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
@@ -67,24 +67,36 @@ export default function MultiSelectExample() {
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
+      width="12"
       height="12"
-      viewBox="0 0 8 12"
+      viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.5"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       {...props}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="m7 15 5 5 5-5" />
+      <path d="m7 9 5-5 5 5" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index f4db42a4636..1a96fb58e0d 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -31,13 +31,15 @@ function renderValue(value: Language[]) {
 
 export default function MultiSelectExample() {
   return (
-    <div className="flex flex-col gap-1">
+    <div className="flex flex-col items-start gap-1">
       <Select.Root multiple defaultValue={['javascript', 'typescript']}>
-        <Select.Label className="cursor-default text-sm leading-5 font-bold text-gray-900">
+        <Select.Label className="cursor-default text-sm leading-5 font-bold text-gray-950 dark:text-white">
           Languages
         </Select.Label>
-        <Select.Trigger className="flex h-10 min-w-[14rem] items-center justify-between gap-3 rounded-md border border-gray-200 pr-3 pl-3.5 text-base bg-[canvas] text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100 font-normal">
-          <Select.Value className="data-[placeholder]:opacity-60">{renderValue}</Select.Value>
+        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 bg-gray-200 text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-300 font-normal dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:data-[popup-open]:bg-gray-700">
+          <Select.Value className="data-[placeholder]:text-gray-600 dark:data-[placeholder]:text-gray-400">
+            {renderValue}
+          </Select.Value>
           <Select.Icon className="flex">
             <ChevronUpDownIcon />
           </Select.Icon>
@@ -48,12 +50,12 @@ export default function MultiSelectExample() {
             sideOffset={8}
             alignItemWithTrigger={false}
           >
-            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding overflow-y-auto rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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-gray-300">
+            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding overflow-y-auto border border-gray-950 bg-white py-1 text-gray-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
               {values.map((value) => (
                 <Select.Item
                   key={value}
                   value={value}
-                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-4 pl-2.5 text-sm leading-4 outline-hidden select-none scroll-my-1 group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-4 pointer-coarse:py-2.5 pointer-coarse:text-[0.925rem] [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-gray-50 [@media(hover:hover)]:[&[data-highlighted]]:before:content-[''] [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-1 [@media(hover:hover)]:[&[data-highlighted]]:before:rounded-xs [@media(hover:hover)]:[&[data-highlighted]]:before:bg-gray-900 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1]"
+                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-hidden select-none scroll-my-1 group-data-[side=none]:pr-12 [@media(hover:hover)]:[&[data-highlighted]]:bg-gray-950 [@media(hover:hover)]:[&[data-highlighted]]:text-white dark:[@media(hover:hover)]:[&[data-highlighted]]:bg-white dark:[@media(hover:hover)]:[&[data-highlighted]]:text-gray-950"
                 >
                   <Select.ItemIndicator className="col-start-1">
                     <CheckIcon className="size-3" />
@@ -72,24 +74,36 @@ export default function MultiSelectExample() {
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
+      width="12"
       height="12"
-      viewBox="0 0 8 12"
+      viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.5"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       {...props}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="m7 15 5 5 5-5" />
+      <path d="m7 9 5-5 5 5" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
index 4be68eeffe5..6bfce978b1e 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
@@ -9,7 +9,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
   cursor: default;
 }
 
@@ -19,36 +19,35 @@
   align-items: flex-start;
   justify-content: space-between;
   gap: 0.75rem;
-  min-height: 2.5rem;
-  padding-block: 0.5rem;
-  padding-left: 0.875rem;
-  padding-right: 0.75rem;
+  min-height: 2rem;
+  padding-block: 0.375rem;
+  padding-left: 0.75rem;
+  padding-right: 0.5rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: none;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   font-family: inherit;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
-  -webkit-user-select: none;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
   min-width: 16rem;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
 
@@ -60,14 +59,14 @@
 }
 
 .ValuePrimary {
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 
 .ValueSecondary {
   font-size: 0.75rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 }
 
 .SelectIcon {
@@ -78,23 +77,27 @@
 
 .Positioner {
   outline: none;
-  z-index: 1;
-  -webkit-user-select: none;
+  z-index: 10;
   user-select: none;
 }
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   background-clip: padding-box;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 150ms,
     opacity 150ms;
 
+  @media (prefers-color-scheme: dark) {
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -103,21 +106,10 @@
 
   &[data-side='none'] {
     transition: none;
-    transform: none;
+    transform: translateY(1px);
     opacity: 1;
     min-width: calc(var(--anchor-width) + 1rem);
   }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-  }
 }
 
 .List {
@@ -133,8 +125,8 @@
   box-sizing: border-box;
   outline: 0;
   font-size: 0.875rem;
-  line-height: 1rem;
-  padding-block: 0.5rem;
+  line-height: 1.25rem;
+  padding-block: 0.375rem;
   padding-left: 0.625rem;
   padding-right: 1rem;
   display: grid;
@@ -142,38 +134,22 @@
   align-items: flex-start;
   grid-template-columns: 0.75rem 1fr;
   cursor: default;
-  -webkit-user-select: none;
   user-select: none;
 
-  @media (pointer: coarse) {
-    padding-block: 0.625rem;
-    font-size: 0.925rem;
-  }
-
   [data-side='none'] & {
-    font-size: 1rem;
     padding-right: 3rem;
   }
 
-  &[data-highlighted] {
-    z-index: 0;
-    position: relative;
-    color: var(--color-gray-50);
+  @media (hover: hover) {
+    &[data-highlighted] {
+      background-color: light-dark(var(--color-gray-950), white);
+      color: light-dark(white, var(--color-gray-950));
 
-    .ItemDescription {
-      color: currentColor;
+      .ItemDescription {
+        color: light-dark(var(--color-gray-400), var(--color-gray-600));
+      }
     }
   }
-
-  &[data-highlighted]::before {
-    content: '';
-    z-index: -1;
-    position: absolute;
-    inset-block: 0;
-    inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
-  }
 }
 
 .ItemIndicator {
@@ -200,23 +176,22 @@
 }
 
 .ItemLabel {
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 
 .ItemDescription {
   font-size: 0.75rem;
   line-height: 1rem;
-  opacity: 0.8;
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 }
 
 .ScrollArrow {
   width: 100%;
-  background: canvas;
+  background-color: light-dark(white, var(--color-gray-950));
   z-index: 1;
   text-align: center;
   cursor: default;
-  border-radius: 0.375rem;
   height: 1rem;
   font-size: 0.75rem;
   display: flex;
@@ -232,6 +207,8 @@
   }
 
   &[data-direction='up'] {
+    top: 0;
+
     &[data-side='none'] {
       &::before {
         top: -100%;
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
index e77553f0860..5165f50e0d0 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
@@ -26,7 +26,7 @@ export default function ObjectValueSelect() {
         <Select.Portal>
           <Select.Positioner className={styles.Positioner} sideOffset={8}>
             <Select.Popup className={styles.Popup}>
-              <Select.ScrollUpArrow className={styles.ScrollArrow} />
+              <Select.ScrollUpArrow className={styles.ScrollArrow}>⏶</Select.ScrollUpArrow>
               <Select.List className={styles.List}>
                 {shippingMethods.map((method) => (
                   <Select.Item key={method.id} value={method} className={styles.Item}>
@@ -42,7 +42,7 @@ export default function ObjectValueSelect() {
                   </Select.Item>
                 ))}
               </Select.List>
-              <Select.ScrollDownArrow className={styles.ScrollArrow} />
+              <Select.ScrollDownArrow className={styles.ScrollArrow}>⏷</Select.ScrollDownArrow>
             </Select.Popup>
           </Select.Positioner>
         </Select.Portal>
@@ -54,24 +54,36 @@ export default function ObjectValueSelect() {
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
+      width="12"
       height="12"
-      viewBox="0 0 8 12"
+      viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.5"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       {...props}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="m7 15 5 5 5-5" />
+      <path d="m7 9 5-5 5 5" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index ae1828f07ae..0e12488eb7c 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -4,17 +4,17 @@ import { Select } from '@base-ui/react/select';
 
 export default function ObjectValueSelect() {
   return (
-    <div className="flex flex-col gap-1">
+    <div className="flex flex-col items-start gap-1">
       <Select.Root defaultValue={shippingMethods[0]} itemToStringValue={(item) => item.id}>
-        <Select.Label className="cursor-default text-sm leading-5 font-bold text-gray-900">
+        <Select.Label className="cursor-default text-sm leading-5 font-bold text-gray-950 dark:text-white">
           Shipping method
         </Select.Label>
-        <Select.Trigger className="flex min-h-10 min-w-[16rem] items-start justify-between gap-3 rounded-md border border-gray-200 pr-3 pl-3.5 py-2 text-base bg-[canvas] text-gray-900 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100">
+        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-start justify-between gap-3 pl-3 pr-2 py-1.5 text-sm leading-5 bg-gray-200 text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-300 font-normal dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:data-[popup-open]:bg-gray-700">
           <Select.Value>
             {(method: ShippingMethod) => (
               <span className="flex flex-col items-start gap-0.5">
-                <span className="text-base leading-6">{method.name}</span>
-                <span className="text-xs leading-4 text-gray-600">
+                <span className="text-sm leading-5">{method.name}</span>
+                <span className="text-xs leading-4 text-gray-600 dark:text-gray-400">
                   {method.duration} ({method.price})
                 </span>
               </span>
@@ -26,28 +26,32 @@ export default function ObjectValueSelect() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding rounded-md bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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-gray-300">
-              <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center rounded-md bg-[canvas] text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-['']" />
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
+              <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-gray-950">
+                ⏶
+              </Select.ScrollUpArrow>
               <Select.List className="relative py-1 scroll-py-6 overflow-y-auto max-h-[var(--available-height)]">
                 {shippingMethods.map((method) => (
                   <Select.Item
                     key={method.id}
                     value={method}
-                    className="grid cursor-default grid-cols-[0.75rem_1fr] items-start gap-2 py-2.5 pr-4 pl-2.5 text-sm leading-4 outline-hidden select-none group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-5 pointer-coarse:py-2.5 pointer-coarse:text-[0.925rem] [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-gray-50 [@media(hover:hover)]:[&[data-highlighted]]:before:content-[''] [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-1 [@media(hover:hover)]:[&[data-highlighted]]:before:rounded-xs [@media(hover:hover)]:[&[data-highlighted]]:before:bg-gray-900 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1]"
+                    className="group/item grid cursor-default grid-cols-[0.75rem_1fr] items-start gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-hidden select-none group-data-[side=none]:pr-12 [@media(hover:hover)]:[&[data-highlighted]]:bg-gray-950 [@media(hover:hover)]:[&[data-highlighted]]:text-white dark:[@media(hover:hover)]:[&[data-highlighted]]:bg-white dark:[@media(hover:hover)]:[&[data-highlighted]]:text-gray-950"
                   >
-                    <Select.ItemIndicator className="col-start-1 flex items-center self-start relative top-[0.4em]">
+                    <Select.ItemIndicator className="col-start-1 flex items-center justify-center self-start relative top-[0.4em]">
                       <CheckIcon className="size-3" />
                     </Select.ItemIndicator>
-                    <Select.ItemText className="col-start-2 flex flex-col items-start gap-0.5">
-                      <span className="text-base leading-6">{method.name}</span>
-                      <span className="text-xs leading-4 opacity-80">
+                    <Select.ItemText className="col-start-2 flex flex-col gap-0.5">
+                      <span className="text-sm leading-5">{method.name}</span>
+                      <span className="text-xs leading-4 text-gray-600 [@media(hover:hover)]:group-data-[highlighted]/item:text-gray-400 dark:text-gray-400 dark:[@media(hover:hover)]:group-data-[highlighted]/item:text-gray-600">
                         {method.duration} ({method.price})
                       </span>
                     </Select.ItemText>
                   </Select.Item>
                 ))}
               </Select.List>
-              <Select.ScrollDownArrow className="bottom-0 z-[1] flex h-4 w-full cursor-default items-center justify-center rounded-md bg-[canvas] text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] bottom-0 data-[side=none]:before:bottom-[-100%]" />
+              <Select.ScrollDownArrow className="bottom-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:bottom-[-100%] dark:bg-gray-950">
+                ⏷
+              </Select.ScrollDownArrow>
             </Select.Popup>
           </Select.Positioner>
         </Select.Portal>
@@ -59,24 +63,36 @@ export default function ObjectValueSelect() {
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
+      width="12"
       height="12"
-      viewBox="0 0 8 12"
+      viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.5"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       {...props}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="m7 15 5 5 5-5" />
+      <path d="m7 9 5-5 5 5" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
     </svg>
   );
 }

From 6f46755544557d6a1f087edb95c30e42e04bb0fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 24 Apr 2026 00:18:30 +0200
Subject: [PATCH 038/257] gray-900 -> gray-950

---
 .../components/accordion/demos/_index.module.css   |  8 ++++----
 .../accordion/demos/hero/tailwind/index.tsx        |  8 ++++----
 .../accordion/demos/multiple/tailwind/index.tsx    |  8 ++++----
 .../alert-dialog/demos/_index.module.css           |  6 +++---
 .../tailwind/index.tsx                             |  4 ++--
 .../detached-triggers-simple/tailwind/index.tsx    |  4 ++--
 .../demos/hero/css-modules/index.module.css        |  6 +++---
 .../alert-dialog/demos/hero/tailwind/index.tsx     |  4 ++--
 .../avatar/demos/hero/css-modules/index.module.css |  2 +-
 .../avatar/demos/hero/tailwind/index.tsx           |  4 ++--
 .../button/demos/hero/css-modules/index.module.css |  2 +-
 .../button/demos/hero/tailwind/index.tsx           |  2 +-
 .../demos/loading/css-modules/index.module.css     |  2 +-
 .../button/demos/loading/tailwind/index.tsx        |  2 +-
 .../demos/hero/css-modules/index.module.css        | 12 ++++++------
 .../checkbox-group/demos/hero/tailwind/index.tsx   | 14 +++++++-------
 .../demos/nested/css-modules/index.module.css      | 12 ++++++------
 .../demos/parent/css-modules/index.module.css      | 12 ++++++------
 .../demos/hero/css-modules/index.module.css        | 12 ++++++------
 .../checkbox/demos/hero/tailwind/index.tsx         |  4 ++--
 .../demos/hero/css-modules/index.module.css        |  4 ++--
 .../collapsible/demos/hero/tailwind/index.tsx      |  4 ++--
 .../meter/demos/hero/css-modules/index.module.css  |  6 +++---
 .../components/meter/demos/hero/tailwind/index.tsx |  6 +++---
 .../demos/hero/css-modules/index.module.css        |  6 +++---
 .../progress/demos/hero/tailwind/index.tsx         |  6 +++---
 .../radio/demos/hero/css-modules/index.module.css  | 12 ++++++------
 .../components/radio/demos/hero/tailwind/index.tsx | 14 +++++++-------
 .../demos/both/css-modules/index.module.css        |  4 ++--
 .../scroll-area/demos/both/tailwind/index.tsx      |  6 +++---
 .../demos/hero/css-modules/index.module.css        |  6 +++---
 .../scroll-area/demos/hero/tailwind/index.tsx      |  6 +++---
 .../demos/scroll-fade/css-modules/index.module.css |  4 ++--
 .../demos/scroll-fade/tailwind/index.tsx           |  4 ++--
 .../demos/hero/css-modules/index.module.css        |  2 +-
 .../separator/demos/hero/tailwind/index.tsx        | 12 ++++++------
 .../edge-alignment/css-modules/index.module.css    |  6 +++---
 .../slider/demos/edge-alignment/tailwind/index.tsx |  4 ++--
 .../slider/demos/hero/css-modules/index.module.css |  6 +++---
 .../slider/demos/hero/tailwind/index.tsx           |  4 ++--
 .../range-slider/css-modules/index.module.css      |  6 +++---
 .../slider/demos/range-slider/tailwind/index.tsx   |  6 +++---
 .../demos/vertical/css-modules/index.module.css    |  6 +++---
 .../slider/demos/vertical/tailwind/index.tsx       |  4 ++--
 .../tabs/demos/hero/css-modules/index.module.css   | 12 ++++++------
 .../components/tabs/demos/hero/tailwind/index.tsx  | 14 +++++++-------
 .../demos/hero/css-modules/index.module.css        |  8 ++++----
 .../toggle-group/demos/hero/tailwind/index.tsx     |  8 ++++----
 .../demos/multiple/css-modules/index.module.css    |  8 ++++----
 .../toggle-group/demos/multiple/tailwind/index.tsx |  8 ++++----
 .../toggle/demos/hero/css-modules/index.module.css |  4 ++--
 .../toggle/demos/hero/tailwind/index.tsx           |  2 +-
 52 files changed, 168 insertions(+), 168 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
index 5c7c49268b7..457e3de6805 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
@@ -4,8 +4,8 @@
   width: 20rem;
   max-width: 100%;
   flex-direction: column;
-  border-bottom: 1px solid light-dark(var(--color-gray-900), white);
-  color: light-dark(var(--color-gray-900), white);
+  border-bottom: 1px solid light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Header {
@@ -22,10 +22,10 @@
   padding: 0.5rem 0;
   margin: 0;
   border: none;
-  border-top: 1px solid light-dark(var(--color-gray-900), white);
+  border-top: 1px solid light-dark(var(--color-gray-950), white);
   border-radius: 0;
   background-color: transparent;
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
index aea64d4221c..132123013db 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
@@ -3,10 +3,10 @@ import { Accordion } from '@base-ui/react/accordion';
 
 export default function ExampleAccordion() {
   return (
-    <Accordion.Root className="flex w-80 max-w-full flex-col border-b border-gray-900 text-gray-900 dark:border-white dark:text-white">
+    <Accordion.Root className="flex w-80 max-w-full flex-col border-b border-gray-950 text-gray-950 dark:border-white dark:text-white">
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             What is Base UI?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -21,7 +21,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             How do I get started?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -36,7 +36,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             Can I use it for my project?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
index 70a8b71f4e6..cc1a8d998bd 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
@@ -5,11 +5,11 @@ export default function ExampleAccordion() {
   return (
     <Accordion.Root
       multiple
-      className="flex w-80 max-w-full flex-col border-b border-gray-900 text-gray-900 dark:border-white dark:text-white"
+      className="flex w-80 max-w-full flex-col border-b border-gray-950 text-gray-950 dark:border-white dark:text-white"
     >
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             What is Base UI?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -24,7 +24,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             How do I get started?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -39,7 +39,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-900 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-900 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             Can I use it for my project?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
index 8513283a12a..be99b9879d3 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
@@ -12,7 +12,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
@@ -64,9 +64,9 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 0.75rem;
-  border: 1px solid light-dark(var(--color-gray-900), white);
+  border: 1px solid light-dark(var(--color-gray-950), white);
   background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition: all 150ms;
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 2c649a55507..35e41e9797c 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -7,7 +7,7 @@ type AlertPayload = { message: string };
 const demoAlertDialog = AlertDialog.createHandle<AlertPayload>();
 
 const buttonClasses =
-  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3.5 text-sm font-normal text-gray-900 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800';
+  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3.5 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
@@ -71,7 +71,7 @@ export default function AlertDialogDetachedTriggersControlledDemo() {
         {({ payload }) => (
           <AlertDialog.Portal>
             <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-[0.08] transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
-            <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 bg-white dark:bg-gray-950 p-3 text-gray-900 dark:text-white border border-gray-900 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+            <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
               <AlertDialog.Title className="text-sm font-bold">
                 {payload?.message ?? 'Are you sure?'}
               </AlertDialog.Title>
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
index 4fd27c4e8d1..554b62e2a0e 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { AlertDialog } from '@base-ui/react/alert-dialog';
 const demoAlertDialog = AlertDialog.createHandle();
 
 const buttonClasses =
-  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3.5 text-sm font-normal text-gray-900 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800';
+  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3.5 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
@@ -19,7 +19,7 @@ export default function AlertDialogDetachedTriggersSimpleDemo() {
       <AlertDialog.Root handle={demoAlertDialog}>
         <AlertDialog.Portal>
           <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-[0.08] transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
-          <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 bg-white dark:bg-gray-950 p-3 text-gray-900 dark:text-white border border-gray-900 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+          <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
             <AlertDialog.Title className="text-sm font-bold">Discard draft?</AlertDialog.Title>
             <AlertDialog.Description className="text-sm text-gray-600 dark:text-gray-400">
               This action cannot be undone.
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
index 0276a9bd23a..c7b1cb15612 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
@@ -12,7 +12,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   &[data-color='red'] {
@@ -64,9 +64,9 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 0.75rem;
-  border: 1px solid light-dark(var(--color-gray-900), white);
+  border: 1px solid light-dark(var(--color-gray-950), white);
   background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition: all 150ms;
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
index 2d7df364cfd..e50a56e493f 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
@@ -1,7 +1,7 @@
 import { AlertDialog } from '@base-ui/react/alert-dialog';
 
 const buttonClasses =
-  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3.5 text-sm font-normal text-gray-900 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800';
+  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3.5 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
@@ -11,7 +11,7 @@ export default function ExampleAlertDialog() {
       <AlertDialog.Trigger className={dangerButtonClasses}>Discard draft</AlertDialog.Trigger>
       <AlertDialog.Portal>
         <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-[0.08] transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
-        <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 bg-white dark:bg-gray-950 p-3 text-gray-900 dark:text-white border border-gray-900 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+        <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
           <AlertDialog.Title className="text-sm font-bold">Discard draft?</AlertDialog.Title>
           <AlertDialog.Description className="text-sm text-gray-600 dark:text-gray-400">
             You can’t undo this action.
diff --git a/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css
index 171bde8510d..bb470393097 100644
--- a/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css
@@ -6,7 +6,7 @@
   border-radius: 100%;
   user-select: none;
   font-weight: 400;
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
   background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   font-size: 0.875rem;
   line-height: 1;
diff --git a/docs/src/app/(docs)/react/components/avatar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/avatar/demos/hero/tailwind/index.tsx
index d91a3a7567f..59789b02fb9 100644
--- a/docs/src/app/(docs)/react/components/avatar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/avatar/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Avatar } from '@base-ui/react/avatar';
 export default function ExampleAvatar() {
   return (
     <div className="flex gap-4">
-      <Avatar.Root className="inline-flex size-8 items-center justify-center overflow-hidden rounded-full bg-gray-200 align-middle text-sm leading-none font-normal text-gray-900 select-none dark:bg-gray-800 dark:text-white">
+      <Avatar.Root className="inline-flex size-8 items-center justify-center overflow-hidden rounded-full bg-gray-200 align-middle text-sm leading-none font-normal text-gray-950 select-none dark:bg-gray-800 dark:text-white">
         <Avatar.Image
           src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
           width="48"
@@ -14,7 +14,7 @@ export default function ExampleAvatar() {
           LT
         </Avatar.Fallback>
       </Avatar.Root>
-      <Avatar.Root className="inline-flex size-8 items-center justify-center overflow-hidden rounded-full bg-gray-200 align-middle text-sm leading-none font-normal text-gray-900 select-none dark:bg-gray-800 dark:text-white">
+      <Avatar.Root className="inline-flex size-8 items-center justify-center overflow-hidden rounded-full bg-gray-200 align-middle text-sm leading-none font-normal text-gray-950 select-none dark:bg-gray-800 dark:text-white">
         LT
       </Avatar.Root>
     </div>
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
index 42bfee16e53..011163bbedd 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
@@ -13,7 +13,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
index 62c2a56dcc3..d85e2bdd4a2 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Button } from '@base-ui/react/button';
 
 export default function ExampleButton() {
   return (
-    <Button className="flex items-center justify-center h-8 px-3.5 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-900 dark:text-white select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:data-disabled:text-gray-400">
+    <Button className="flex items-center justify-center h-8 px-3.5 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:data-disabled:text-gray-400">
       Submit
     </Button>
   );
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
index 9a16c507dcf..1c5eefa7e23 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
@@ -13,7 +13,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5rem;
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
index 636af0b4a1b..369d28a41aa 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleButton() {
 
   return (
     <Button
-      className="flex items-center justify-center h-8 px-3.5 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-900 dark:text-white select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:data-disabled:text-gray-400"
+      className="flex items-center justify-center h-8 px-3.5 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:data-disabled:text-gray-400"
       disabled={loading}
       focusableWhenDisabled
       onClick={() => {
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
index bd974c9eceb..c527465d482 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Caption {
@@ -29,17 +29,17 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid light-dark(var(--color-gray-900), white);
+  border: 1px solid light-dark(var(--color-gray-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-900));
-  color: light-dark(white, var(--color-gray-900));
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(white, var(--color-gray-950));
   padding: 0;
   margin: 0;
 
   &[data-checked],
   &[data-indeterminate] {
-    background-color: light-dark(var(--color-gray-900), white);
-    color: light-dark(white, var(--color-gray-900));
+    background-color: light-dark(var(--color-gray-950), white);
+    color: light-dark(white, var(--color-gray-950));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
index 13477abd0f4..dccd88c77ef 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
@@ -9,17 +9,17 @@ export default function ExampleCheckboxGroup() {
     <CheckboxGroup
       aria-labelledby={id}
       defaultValue={['fuji-apple']}
-      className="flex flex-col items-start gap-1 text-gray-900 dark:text-white"
+      className="flex flex-col items-start gap-1 text-gray-950 dark:text-white"
     >
       <div className="text-sm leading-5 font-bold" id={id}>
         Apples
       </div>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-white">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-950 dark:text-white">
         <Checkbox.Root
           name="apple"
           value="fuji-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-900 bg-white text-white dark:border-white dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-950 bg-white text-white dark:border-white dark:bg-gray-950 dark:text-gray-950 data-checked:bg-gray-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         >
           <Checkbox.Indicator className="flex data-unchecked:hidden">
             <CheckIcon className="size-3" />
@@ -28,11 +28,11 @@ export default function ExampleCheckboxGroup() {
         Fuji
       </label>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-white">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-950 dark:text-white">
         <Checkbox.Root
           name="apple"
           value="gala-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-900 bg-white text-white dark:border-white dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-950 bg-white text-white dark:border-white dark:bg-gray-950 dark:text-gray-950 data-checked:bg-gray-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         >
           <Checkbox.Indicator className="flex data-unchecked:hidden">
             <CheckIcon className="size-3" />
@@ -41,11 +41,11 @@ export default function ExampleCheckboxGroup() {
         Gala
       </label>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-white">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-950 dark:text-white">
         <Checkbox.Root
           name="apple"
           value="granny-smith-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-900 bg-white text-white dark:border-white dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-950 bg-white text-white dark:border-white dark:bg-gray-950 dark:text-gray-950 data-checked:bg-gray-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         >
           <Checkbox.Indicator className="flex data-unchecked:hidden">
             <CheckIcon className="size-3" />
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
index bd974c9eceb..c527465d482 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Caption {
@@ -29,17 +29,17 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid light-dark(var(--color-gray-900), white);
+  border: 1px solid light-dark(var(--color-gray-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-900));
-  color: light-dark(white, var(--color-gray-900));
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(white, var(--color-gray-950));
   padding: 0;
   margin: 0;
 
   &[data-checked],
   &[data-indeterminate] {
-    background-color: light-dark(var(--color-gray-900), white);
-    color: light-dark(white, var(--color-gray-900));
+    background-color: light-dark(var(--color-gray-950), white);
+    color: light-dark(white, var(--color-gray-950));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
index bd974c9eceb..c527465d482 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Caption {
@@ -29,17 +29,17 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid light-dark(var(--color-gray-900), white);
+  border: 1px solid light-dark(var(--color-gray-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-900));
-  color: light-dark(white, var(--color-gray-900));
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(white, var(--color-gray-950));
   padding: 0;
   margin: 0;
 
   &[data-checked],
   &[data-indeterminate] {
-    background-color: light-dark(var(--color-gray-900), white);
-    color: light-dark(white, var(--color-gray-900));
+    background-color: light-dark(var(--color-gray-950), white);
+    color: light-dark(white, var(--color-gray-950));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
index cd0d4558259..867cda6a366 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
@@ -5,7 +5,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Checkbox {
@@ -16,17 +16,17 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid light-dark(var(--color-gray-900), white);
+  border: 1px solid light-dark(var(--color-gray-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-900));
-  color: light-dark(white, var(--color-gray-900));
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(white, var(--color-gray-950));
   padding: 0;
   margin: 0;
 
   &[data-checked],
   &[data-indeterminate] {
-    background-color: light-dark(var(--color-gray-900), white);
-    color: light-dark(white, var(--color-gray-900));
+    background-color: light-dark(var(--color-gray-950), white);
+    color: light-dark(white, var(--color-gray-950));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
index 96108e3113a..737ab27c40b 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
@@ -3,10 +3,10 @@ import { Checkbox } from '@base-ui/react/checkbox';
 
 export default function ExampleCheckbox() {
   return (
-    <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-white">
+    <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-950 dark:text-white">
       <Checkbox.Root
         defaultChecked
-        className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-900 bg-white text-white dark:border-white dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-950 bg-white text-white dark:border-white dark:bg-gray-950 dark:text-gray-950 data-checked:bg-gray-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
       >
         <Checkbox.Indicator className="flex data-unchecked:hidden">
           <CheckIcon className="size-3" />
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
index cc6db6b03dc..c1e59f66ef9 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
@@ -4,7 +4,7 @@
   min-height: 9rem;
   flex-direction: column;
   justify-content: center;
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Icon {
@@ -25,7 +25,7 @@
   border: none;
   border-radius: 0;
   background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
index 7fcf1aaaf50..bb0ec69be15 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
@@ -3,8 +3,8 @@ import { Collapsible } from '@base-ui/react/collapsible';
 
 export default function ExampleCollapsible() {
   return (
-    <Collapsible.Root className="flex min-h-36 w-56 flex-col justify-center text-gray-900 dark:text-white">
-      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none bg-gray-200 px-3.5 text-sm leading-5 font-normal text-gray-900 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700">
+    <Collapsible.Root className="flex min-h-36 w-56 flex-col justify-center text-gray-950 dark:text-white">
+      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none bg-gray-200 px-3.5 text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700">
         Recovery keys
         <ChevronIcon className="size-3 transition-transform duration-100 ease-out group-data-panel-open:rotate-90" />
       </Collapsible.Trigger>
diff --git a/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
index 9a6792447e7..52c4ea3c100 100644
--- a/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
@@ -10,13 +10,13 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Value {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
   text-align: right;
 }
 
@@ -28,6 +28,6 @@
 }
 
 .Indicator {
-  background-color: light-dark(var(--color-gray-900), white);
+  background-color: light-dark(var(--color-gray-950), white);
   transition: width 500ms;
 }
diff --git a/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx
index e9a2d04ec62..3ada91e713a 100644
--- a/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx
@@ -3,12 +3,12 @@ import { Meter } from '@base-ui/react/meter';
 export default function ExampleMeter() {
   return (
     <Meter.Root className="grid max-w-full w-60 grid-cols-2 gap-y-2" value={24}>
-      <Meter.Label className="text-sm leading-5 font-normal text-gray-900 dark:text-white">
+      <Meter.Label className="text-sm leading-5 font-normal text-gray-950 dark:text-white">
         Storage Used
       </Meter.Label>
-      <Meter.Value className="text-right text-sm leading-5 text-gray-900 dark:text-white" />
+      <Meter.Value className="text-right text-sm leading-5 text-gray-950 dark:text-white" />
       <Meter.Track className="col-span-2 h-3 overflow-hidden bg-gray-200 dark:bg-gray-800">
-        <Meter.Indicator className="bg-gray-900 transition-[width] duration-500 dark:bg-white" />
+        <Meter.Indicator className="bg-gray-950 transition-[width] duration-500 dark:bg-white" />
       </Meter.Track>
     </Meter.Root>
   );
diff --git a/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css
index c46770c8aa7..c0434295f06 100644
--- a/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css
@@ -10,13 +10,13 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Value {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
   text-align: right;
 }
 
@@ -28,6 +28,6 @@
 }
 
 .Indicator {
-  background-color: light-dark(var(--color-gray-900), white);
+  background-color: light-dark(var(--color-gray-950), white);
   transition: width 500ms;
 }
diff --git a/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx
index 54bc5ab9650..fa4b9538dd3 100644
--- a/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx
@@ -15,12 +15,12 @@ export default function ExampleProgress() {
 
   return (
     <Progress.Root className="grid max-w-full w-60 grid-cols-2 gap-y-2" value={value}>
-      <Progress.Label className="text-sm leading-5 font-normal text-gray-900 dark:text-white">
+      <Progress.Label className="text-sm leading-5 font-normal text-gray-950 dark:text-white">
         Export data
       </Progress.Label>
-      <Progress.Value className="text-right text-sm leading-5 text-gray-900 dark:text-white" />
+      <Progress.Value className="text-right text-sm leading-5 text-gray-950 dark:text-white" />
       <Progress.Track className="col-span-2 h-1 overflow-hidden bg-gray-200 dark:bg-gray-800">
-        <Progress.Indicator className="bg-gray-900 transition-[width] duration-500 dark:bg-white" />
+        <Progress.Indicator className="bg-gray-950 transition-[width] duration-500 dark:bg-white" />
       </Progress.Track>
     </Progress.Root>
   );
diff --git a/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
index d453e3b406d..347341d5489 100644
--- a/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Caption {
@@ -29,16 +29,16 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid light-dark(var(--color-gray-900), white);
+  border: 1px solid light-dark(var(--color-gray-950), white);
   border-radius: 100%;
-  background-color: light-dark(white, var(--color-gray-900));
-  color: light-dark(white, var(--color-gray-900));
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(white, var(--color-gray-950));
   padding: 0;
   margin: 0;
 
   &[data-checked] {
-    background-color: light-dark(var(--color-gray-900), white);
-    color: light-dark(white, var(--color-gray-900));
+    background-color: light-dark(var(--color-gray-950), white);
+    color: light-dark(white, var(--color-gray-950));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
index 9d97f4741dc..8d669d8d7c2 100644
--- a/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
@@ -9,36 +9,36 @@ export default function ExampleRadioGroup() {
     <RadioGroup
       aria-labelledby={id}
       defaultValue="fuji-apple"
-      className="flex flex-col items-start gap-1 text-gray-900 dark:text-white"
+      className="flex flex-col items-start gap-1 text-gray-950 dark:text-white"
     >
       <div className="text-sm leading-5 font-bold" id={id}>
         Best apple
       </div>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-white">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-950 dark:text-white">
         <Radio.Root
           value="fuji-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-900 bg-white text-white dark:border-white dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-950 bg-white text-white dark:border-white dark:bg-gray-950 dark:text-gray-950 data-checked:bg-gray-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         >
           <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>
         Fuji
       </label>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-white">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-950 dark:text-white">
         <Radio.Root
           value="gala-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-900 bg-white text-white dark:border-white dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-950 bg-white text-white dark:border-white dark:bg-gray-950 dark:text-gray-950 data-checked:bg-gray-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         >
           <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>
         Gala
       </label>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-white">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-950 dark:text-white">
         <Radio.Root
           value="granny-smith-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-900 bg-white text-white dark:border-white dark:bg-gray-900 dark:text-gray-900 data-checked:bg-gray-900 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-950 bg-white text-white dark:border-white dark:bg-gray-950 dark:text-gray-950 data-checked:bg-gray-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         >
           <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
index 7a1e85f3c67..e953cc8e9d5 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
@@ -7,7 +7,7 @@
 
 .Viewport {
   height: 100%;
-  outline: 1px solid light-dark(var(--color-gray-900), white);
+  outline: 1px solid light-dark(var(--color-gray-950), white);
   outline-offset: -1px;
 
   &:focus-visible {
@@ -90,5 +90,5 @@
 
 .Thumb {
   width: 100%;
-  background-color: light-dark(var(--color-gray-900), white);
+  background-color: light-dark(var(--color-gray-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
index 145887499cc..74b4c0efcef 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function ExampleScrollAreaBoth() {
   return (
     <ScrollArea.Root className="h-80 w-80 max-w-[calc(100vw-8rem)]">
-      <ScrollArea.Viewport className="h-full outline-1 -outline-offset-1 outline-gray-900 dark:outline-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <ScrollArea.Viewport className="h-full outline-1 -outline-offset-1 outline-gray-950 dark:outline-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         <ScrollArea.Content className="p-5">
           <ul className="m-0 grid list-none grid-cols-[repeat(10,6.25rem)] grid-rows-[repeat(10,6.25rem)] gap-3 p-0">
             {Array.from({ length: 100 }, (_, i) => (
@@ -18,13 +18,13 @@ export default function ExampleScrollAreaBoth() {
         </ScrollArea.Content>
       </ScrollArea.Viewport>
       <ScrollArea.Scrollbar className="relative m-px flex bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:content-[''] data-[orientation=vertical]:w-4 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:bottom-0 data-[hovering]:pointer-events-auto data-[hovering]:opacity-100 data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0">
-        <ScrollArea.Thumb className="w-full bg-gray-900 dark:bg-white" />
+        <ScrollArea.Thumb className="w-full bg-gray-950 dark:bg-white" />
       </ScrollArea.Scrollbar>
       <ScrollArea.Scrollbar
         className="relative m-px flex bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:content-[''] data-[orientation=vertical]:w-4 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:bottom-0 data-[hovering]:pointer-events-auto data-[hovering]:opacity-100 data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0"
         orientation="horizontal"
       >
-        <ScrollArea.Thumb className="w-full bg-gray-900 dark:bg-white" />
+        <ScrollArea.Thumb className="w-full bg-gray-950 dark:bg-white" />
       </ScrollArea.Scrollbar>
       <ScrollArea.Corner />
     </ScrollArea.Root>
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
index c310163c0ae..84e5e9e2f81 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
@@ -8,7 +8,7 @@
 
 .Viewport {
   height: 100%;
-  outline: 1px solid light-dark(var(--color-gray-900), white);
+  outline: 1px solid light-dark(var(--color-gray-950), white);
   outline-offset: -1px;
 
   &:focus-visible {
@@ -30,7 +30,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.375rem;
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Scrollbar {
@@ -63,5 +63,5 @@
 
 .Thumb {
   width: 100%;
-  background-color: light-dark(var(--color-gray-900), white);
+  background-color: light-dark(var(--color-gray-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
index c3776229856..5c5cb5bc7f2 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
@@ -3,8 +3,8 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function ExampleScrollArea() {
   return (
     <ScrollArea.Root className="h-[8.5rem] w-96 max-w-[calc(100vw-8rem)] bg-white dark:bg-gray-950">
-      <ScrollArea.Viewport className="h-full outline-1 -outline-offset-1 outline-gray-900 dark:outline-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
-        <ScrollArea.Content className="flex flex-col gap-4 py-3 pr-6 pl-4 text-sm leading-[1.375rem] text-gray-900 dark:text-white">
+      <ScrollArea.Viewport className="h-full outline-1 -outline-offset-1 outline-gray-950 dark:outline-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <ScrollArea.Content className="flex flex-col gap-4 py-3 pr-6 pl-4 text-sm leading-[1.375rem] text-gray-950 dark:text-white">
           <p>
             Vernacular architecture is building done outside any academic tradition, and without
             professional guidance. It is not a particular architectural movement or style, but
@@ -27,7 +27,7 @@ export default function ExampleScrollArea() {
         </ScrollArea.Content>
       </ScrollArea.Viewport>
       <ScrollArea.Scrollbar className="m-px flex w-4 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:h-full before:w-5 before:content-[''] data-[hovering]:opacity-100 data-[hovering]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0 data-[scrolling]:pointer-events-auto">
-        <ScrollArea.Thumb className="w-full bg-gray-900 dark:bg-white" />
+        <ScrollArea.Thumb className="w-full bg-gray-950 dark:bg-white" />
       </ScrollArea.Scrollbar>
     </ScrollArea.Root>
   );
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
index d3d0683f888..d42cf64c701 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
@@ -38,7 +38,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.375rem;
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Scrollbar {
@@ -71,5 +71,5 @@
 
 .Thumb {
   width: 100%;
-  background-color: light-dark(var(--color-gray-900), white);
+  background-color: light-dark(var(--color-gray-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
index c598d6e1e31..fa1229cbf4f 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
@@ -4,7 +4,7 @@ export default function ExampleScrollAreaScrollFade() {
   return (
     <ScrollArea.Root className="box-border h-48 w-96 max-w-[calc(100vw-8rem)] bg-gray-100 dark:bg-gray-800">
       <ScrollArea.Viewport className="h-full bg-gray-100 dark:bg-gray-800 mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] mask-no-repeat focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
-        <ScrollArea.Content className="flex flex-col gap-4 py-3 pr-6 pl-4 text-sm leading-[1.375rem] text-gray-900 dark:text-white">
+        <ScrollArea.Content className="flex flex-col gap-4 py-3 pr-6 pl-4 text-sm leading-[1.375rem] text-gray-950 dark:text-white">
           <p>
             Vernacular architecture is building done outside any academic tradition, and without
             professional guidance. It is not a particular architectural movement or style, but
@@ -27,7 +27,7 @@ export default function ExampleScrollAreaScrollFade() {
         </ScrollArea.Content>
       </ScrollArea.Viewport>
       <ScrollArea.Scrollbar className="m-px flex w-4 justify-center bg-black/8 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:h-full before:w-5 before:content-[''] data-[hovering]:opacity-100 data-[hovering]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0 data-[scrolling]:pointer-events-auto">
-        <ScrollArea.Thumb className="w-full bg-gray-900 dark:bg-white" />
+        <ScrollArea.Thumb className="w-full bg-gray-950 dark:bg-white" />
       </ScrollArea.Scrollbar>
     </ScrollArea.Root>
   );
diff --git a/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css
index 0341686e650..fe64c27ae19 100644
--- a/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css
@@ -12,7 +12,7 @@
 .Link {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
   text-decoration-color: light-dark(var(--color-gray-300), var(--color-gray-700));
   text-decoration-thickness: 1px;
   text-decoration-line: none;
diff --git a/docs/src/app/(docs)/react/components/separator/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/separator/demos/hero/tailwind/index.tsx
index 2a546913b93..71cda6f3e89 100644
--- a/docs/src/app/(docs)/react/components/separator/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/separator/demos/hero/tailwind/index.tsx
@@ -5,25 +5,25 @@ export default function ExampleSeparator() {
     <div className="flex gap-4 text-nowrap">
       <a
         href="#"
-        className="text-sm text-gray-900 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
+        className="text-sm text-gray-950 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
       >
         Home
       </a>
       <a
         href="#"
-        className="text-sm text-gray-900 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
+        className="text-sm text-gray-950 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
       >
         Pricing
       </a>
       <a
         href="#"
-        className="text-sm text-gray-900 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
+        className="text-sm text-gray-950 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
       >
         Blog
       </a>
       <a
         href="#"
-        className="text-sm text-gray-900 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
+        className="text-sm text-gray-950 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
       >
         Support
       </a>
@@ -32,13 +32,13 @@ export default function ExampleSeparator() {
 
       <a
         href="#"
-        className="text-sm text-gray-900 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
+        className="text-sm text-gray-950 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
       >
         Log in
       </a>
       <a
         href="#"
-        className="text-sm text-gray-900 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
+        className="text-sm text-gray-950 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
       >
         Sign up
       </a>
diff --git a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css
index 9a173c08c13..02aa04f1d36 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css
@@ -16,7 +16,7 @@
 }
 
 .Indicator {
-  background-color: light-dark(var(--color-gray-900), white);
+  background-color: light-dark(var(--color-gray-950), white);
   user-select: none;
 }
 
@@ -24,8 +24,8 @@
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border: 1px solid light-dark(var(--color-gray-900), white);
-  background-color: light-dark(white, var(--color-gray-900));
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   user-select: none;
 
   &:has(:focus-visible) {
diff --git a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx
index c434ff5db94..2c1369dae59 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx
@@ -5,8 +5,8 @@ export default function EdgeAlignedThumb() {
     <Slider.Root thumbAlignment="edge" defaultValue={25}>
       <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
         <Slider.Track className="h-1 w-full bg-gray-200 select-none dark:bg-gray-800">
-          <Slider.Indicator className="bg-gray-900 select-none dark:bg-white" />
-          <Slider.Thumb className="box-border size-4 border border-gray-900 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-gray-900" />
+          <Slider.Indicator className="bg-gray-950 select-none dark:bg-white" />
+          <Slider.Thumb className="box-border size-4 border border-gray-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-gray-950" />
         </Slider.Track>
       </Slider.Control>
     </Slider.Root>
diff --git a/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css
index 9a173c08c13..02aa04f1d36 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css
@@ -16,7 +16,7 @@
 }
 
 .Indicator {
-  background-color: light-dark(var(--color-gray-900), white);
+  background-color: light-dark(var(--color-gray-950), white);
   user-select: none;
 }
 
@@ -24,8 +24,8 @@
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border: 1px solid light-dark(var(--color-gray-900), white);
-  background-color: light-dark(white, var(--color-gray-900));
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   user-select: none;
 
   &:has(:focus-visible) {
diff --git a/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx
index 9f03888f65a..abceff11fcb 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx
@@ -5,10 +5,10 @@ export default function ExampleSlider() {
     <Slider.Root defaultValue={25}>
       <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
         <Slider.Track className="h-1 w-full bg-gray-200 select-none dark:bg-gray-800">
-          <Slider.Indicator className="bg-gray-900 select-none dark:bg-white" />
+          <Slider.Indicator className="bg-gray-950 select-none dark:bg-white" />
           <Slider.Thumb
             aria-label="Volume"
-            className="box-border size-4 border border-gray-900 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-gray-900"
+            className="box-border size-4 border border-gray-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-gray-950"
           />
         </Slider.Track>
       </Slider.Control>
diff --git a/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css
index 9a173c08c13..02aa04f1d36 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css
@@ -16,7 +16,7 @@
 }
 
 .Indicator {
-  background-color: light-dark(var(--color-gray-900), white);
+  background-color: light-dark(var(--color-gray-950), white);
   user-select: none;
 }
 
@@ -24,8 +24,8 @@
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border: 1px solid light-dark(var(--color-gray-900), white);
-  background-color: light-dark(white, var(--color-gray-900));
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   user-select: none;
 
   &:has(:focus-visible) {
diff --git a/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx
index bc1f3487f44..4fdb1ea019c 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx
@@ -5,16 +5,16 @@ export default function RangeSlider() {
     <Slider.Root defaultValue={[25, 45]}>
       <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
         <Slider.Track className="h-1 w-full bg-gray-200 select-none dark:bg-gray-800">
-          <Slider.Indicator className="bg-gray-900 select-none dark:bg-white" />
+          <Slider.Indicator className="bg-gray-950 select-none dark:bg-white" />
           <Slider.Thumb
             index={0}
             aria-label="Minimum value"
-            className="box-border size-4 border border-gray-900 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-gray-900"
+            className="box-border size-4 border border-gray-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-gray-950"
           />
           <Slider.Thumb
             index={1}
             aria-label="Maximum value"
-            className="box-border size-4 border border-gray-900 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-gray-900"
+            className="box-border size-4 border border-gray-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-gray-950"
           />
         </Slider.Track>
       </Slider.Control>
diff --git a/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css
index 33ddcd60e97..c72c93879f5 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css
@@ -21,7 +21,7 @@
 }
 
 .Indicator {
-  background-color: light-dark(var(--color-gray-900), white);
+  background-color: light-dark(var(--color-gray-950), white);
   user-select: none;
 }
 
@@ -29,8 +29,8 @@
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border: 1px solid light-dark(var(--color-gray-900), white);
-  background-color: light-dark(white, var(--color-gray-900));
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   user-select: none;
 
   &:has(:focus-visible) {
diff --git a/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx
index c010cde6353..2717413eae7 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx
@@ -5,10 +5,10 @@ export default function VerticalSlider() {
     <Slider.Root orientation="vertical" defaultValue={35}>
       <Slider.Control className="flex touch-none select-none data-[orientation=vertical]:h-32 data-[orientation=vertical]:px-3">
         <Slider.Track className="bg-gray-200 select-none dark:bg-gray-800 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1">
-          <Slider.Indicator className="bg-gray-900 select-none dark:bg-white" />
+          <Slider.Indicator className="bg-gray-950 select-none dark:bg-white" />
           <Slider.Thumb
             aria-label="Volume"
-            className="box-border size-4 border border-gray-900 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-gray-900"
+            className="box-border size-4 border border-gray-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-gray-950"
           />
         </Slider.Track>
       </Slider.Control>
diff --git a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
index 6fab98c0cd0..8f9d2d95ad9 100644
--- a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
@@ -29,12 +29,12 @@
 
   @media (hover: hover) {
     &:hover {
-      color: light-dark(var(--color-gray-900), white);
+      color: light-dark(var(--color-gray-950), white);
     }
   }
 
   &[data-active] {
-    color: light-dark(var(--color-gray-900), white);
+    color: light-dark(var(--color-gray-950), white);
   }
 
   &:focus-visible {
@@ -55,8 +55,8 @@
   transition-property: translate, width;
   transition-duration: 150ms;
   transition-timing-function: ease-in-out;
-  border-top: 1px solid light-dark(var(--color-gray-900), white);
-  border-inline: 1px solid light-dark(var(--color-gray-900), white);
+  border-top: 1px solid light-dark(var(--color-gray-950), white);
+  border-inline: 1px solid light-dark(var(--color-gray-950), white);
   background-color: light-dark(white, var(--color-gray-950));
 }
 
@@ -68,8 +68,8 @@
   justify-content: center;
   height: 8rem;
   outline: 0;
-  border-inline: 1px solid light-dark(var(--color-gray-900), white);
-  border-block: 1px solid light-dark(var(--color-gray-900), white);
+  border-inline: 1px solid light-dark(var(--color-gray-950), white);
+  border-block: 1px solid light-dark(var(--color-gray-950), white);
   background-color: light-dark(white, var(--color-gray-950));
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
index d6f864200ca..5a5c339ed5b 100644
--- a/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
@@ -6,39 +6,39 @@ export default function ExampleTabs() {
     <Tabs.Root defaultValue="overview">
       <Tabs.List className="relative z-1 -mb-px flex gap-1">
         <Tabs.Tab
-          className="flex h-[calc(2rem+1px)] items-center justify-center border-0 px-2 text-sm font-normal break-keep whitespace-nowrap text-gray-600 outline-0 select-none hover:text-gray-900 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-active:text-gray-900 dark:text-gray-300 dark:hover:text-white dark:data-active:text-white"
+          className="flex h-[calc(2rem+1px)] items-center justify-center border-0 px-2 text-sm font-normal break-keep whitespace-nowrap text-gray-600 outline-0 select-none hover:text-gray-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-active:text-gray-950 dark:text-gray-300 dark:hover:text-white dark:data-active:text-white"
           value="overview"
         >
           Overview
         </Tabs.Tab>
         <Tabs.Tab
-          className="flex h-[calc(2rem+1px)] items-center justify-center border-0 px-2 text-sm font-normal break-keep whitespace-nowrap text-gray-600 outline-0 select-none hover:text-gray-900 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-active:text-gray-900 dark:text-gray-300 dark:hover:text-white dark:data-active:text-white"
+          className="flex h-[calc(2rem+1px)] items-center justify-center border-0 px-2 text-sm font-normal break-keep whitespace-nowrap text-gray-600 outline-0 select-none hover:text-gray-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-active:text-gray-950 dark:text-gray-300 dark:hover:text-white dark:data-active:text-white"
           value="projects"
         >
           Projects
         </Tabs.Tab>
         <Tabs.Tab
-          className="flex h-[calc(2rem+1px)] items-center justify-center border-0 px-2 text-sm font-normal break-keep whitespace-nowrap text-gray-600 outline-0 select-none hover:text-gray-900 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-active:text-gray-900 dark:text-gray-300 dark:hover:text-white dark:data-active:text-white"
+          className="flex h-[calc(2rem+1px)] items-center justify-center border-0 px-2 text-sm font-normal break-keep whitespace-nowrap text-gray-600 outline-0 select-none hover:text-gray-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-active:text-gray-950 dark:text-gray-300 dark:hover:text-white dark:data-active:text-white"
           value="account"
         >
           Account
         </Tabs.Tab>
-        <Tabs.Indicator className="absolute top-0 left-0 -z-1 h-full w-(--active-tab-width) translate-x-(--active-tab-left) border-x border-t border-gray-900 bg-white transition-[translate,width] duration-150 ease-in-out dark:border-white dark:bg-gray-950" />
+        <Tabs.Indicator className="absolute top-0 left-0 -z-1 h-full w-(--active-tab-width) translate-x-(--active-tab-left) border-x border-t border-gray-950 bg-white transition-[translate,width] duration-150 ease-in-out dark:border-white dark:bg-gray-950" />
       </Tabs.List>
       <Tabs.Panel
-        className="relative flex h-32 items-center justify-center border border-gray-900 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-950 [&[hidden]]:hidden"
+        className="relative flex h-32 items-center justify-center border border-gray-950 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-950 [&[hidden]]:hidden"
         value="overview"
       >
         <OverviewIcon className="size-10 text-gray-400 dark:text-gray-500" />
       </Tabs.Panel>
       <Tabs.Panel
-        className="relative flex h-32 items-center justify-center border border-gray-900 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-950 [&[hidden]]:hidden"
+        className="relative flex h-32 items-center justify-center border border-gray-950 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-950 [&[hidden]]:hidden"
         value="projects"
       >
         <ProjectIcon className="size-10 text-gray-400 dark:text-gray-500" />
       </Tabs.Panel>
       <Tabs.Panel
-        className="relative flex h-32 items-center justify-center border border-gray-900 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-950 [&[hidden]]:hidden"
+        className="relative flex h-32 items-center justify-center border border-gray-950 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-950 [&[hidden]]:hidden"
         value="account"
       >
         <PersonIcon className="size-10 text-gray-400 dark:text-gray-500" />
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
index 37b3ac668fa..1b3d90a6089 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
@@ -2,7 +2,7 @@
   display: flex;
   gap: 1px;
   padding: 1px;
-  border: 1px solid light-dark(var(--color-gray-900), white);
+  border: 1px solid light-dark(var(--color-gray-950), white);
 }
 
 .Button {
@@ -17,7 +17,7 @@
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
@@ -27,8 +27,8 @@
   }
 
   &[data-pressed] {
-    background-color: light-dark(var(--color-gray-900), white);
-    color: light-dark(white, var(--color-gray-900));
+    background-color: light-dark(var(--color-gray-950), white);
+    color: light-dark(white, var(--color-gray-950));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
index 17d80318aa1..f55f82cdfca 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
@@ -6,26 +6,26 @@ export default function ExampleToggleGroup() {
   return (
     <ToggleGroup
       defaultValue={['left']}
-      className="flex gap-px p-px border border-gray-900 dark:border-white"
+      className="flex gap-px p-px border border-gray-950 dark:border-white"
     >
       <Toggle
         aria-label="Align left"
         value="left"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
       >
         <AlignLeftIcon className="size-4" />
       </Toggle>
       <Toggle
         aria-label="Align center"
         value="center"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
       >
         <AlignCenterIcon className="size-4" />
       </Toggle>
       <Toggle
         aria-label="Align right"
         value="right"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
       >
         <AlignRightIcon className="size-4" />
       </Toggle>
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
index 37b3ac668fa..1b3d90a6089 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
@@ -2,7 +2,7 @@
   display: flex;
   gap: 1px;
   padding: 1px;
-  border: 1px solid light-dark(var(--color-gray-900), white);
+  border: 1px solid light-dark(var(--color-gray-950), white);
 }
 
 .Button {
@@ -17,7 +17,7 @@
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
@@ -27,8 +27,8 @@
   }
 
   &[data-pressed] {
-    background-color: light-dark(var(--color-gray-900), white);
-    color: light-dark(white, var(--color-gray-900));
+    background-color: light-dark(var(--color-gray-950), white);
+    color: light-dark(white, var(--color-gray-950));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
index de6847be9c0..da97a7d792f 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
@@ -7,26 +7,26 @@ export default function ExampleToggleGroupMultiple() {
       multiple
       defaultValue={['bold', 'italic']}
       aria-label="Text formatting options"
-      className="flex gap-px p-px border border-gray-900 dark:border-white"
+      className="flex gap-px p-px border border-gray-950 dark:border-white"
     >
       <Toggle
         aria-label="Bold"
         value="bold"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
       >
         <BoldIcon />
       </Toggle>
       <Toggle
         aria-label="Italic"
         value="italic"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
       >
         <ItalicIcon />
       </Toggle>
       <Toggle
         aria-label="Underline"
         value="underline"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-900 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-900"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
       >
         <UnderlineIcon />
       </Toggle>
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
index f29249dfc6f..4a0dc5d5e9a 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
@@ -10,7 +10,7 @@
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: light-dark(var(--color-gray-900), white);
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
@@ -20,7 +20,7 @@
   }
 
   &[data-pressed] {
-    color: light-dark(var(--color-gray-900), white);
+    color: light-dark(var(--color-gray-950), white);
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
index 7ad9de8ce8f..0d6899c0b79 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleToggle() {
   return (
     <Toggle
       aria-label="Favorite"
-      className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-900 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:text-gray-900 dark:data-pressed:text-white"
+      className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:text-gray-950 dark:data-pressed:text-white"
       render={(props, state) => {
         if (state.pressed) {
           return (

From a64cf7c9da9b6f88a1025e33f2f3715e2ab6d436 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 24 Apr 2026 00:24:12 +0200
Subject: [PATCH 039/257] Adjust buttons' paddings

---
 .../react/components/alert-dialog/demos/_index.module.css       | 2 +-
 .../demos/detached-triggers-controlled/tailwind/index.tsx       | 2 +-
 .../demos/detached-triggers-simple/tailwind/index.tsx           | 2 +-
 .../alert-dialog/demos/hero/css-modules/index.module.css        | 2 +-
 .../react/components/alert-dialog/demos/hero/tailwind/index.tsx | 2 +-
 .../components/button/demos/hero/css-modules/index.module.css   | 2 +-
 .../react/components/button/demos/hero/tailwind/index.tsx       | 2 +-
 .../button/demos/loading/css-modules/index.module.css           | 2 +-
 .../react/components/button/demos/loading/tailwind/index.tsx    | 2 +-
 .../collapsible/demos/hero/css-modules/index.module.css         | 2 +-
 .../react/components/collapsible/demos/hero/tailwind/index.tsx  | 2 +-
 11 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
index be99b9879d3..14e98498c17 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
@@ -4,7 +4,7 @@
   align-items: center;
   justify-content: center;
   height: 2rem;
-  padding: 0 0.875rem;
+  padding: 0 0.75rem;
   margin: 0;
   border: none;
   background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 35e41e9797c..9f2729e9439 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -7,7 +7,7 @@ type AlertPayload = { message: string };
 const demoAlertDialog = AlertDialog.createHandle<AlertPayload>();
 
 const buttonClasses =
-  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3.5 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800';
+  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
index 554b62e2a0e..8011ad55597 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { AlertDialog } from '@base-ui/react/alert-dialog';
 const demoAlertDialog = AlertDialog.createHandle();
 
 const buttonClasses =
-  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3.5 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800';
+  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
index c7b1cb15612..4856ab96fe0 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
@@ -4,7 +4,7 @@
   align-items: center;
   justify-content: center;
   height: 2rem;
-  padding: 0 0.875rem;
+  padding: 0 0.75rem;
   margin: 0;
   border: none;
   background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
index e50a56e493f..e5bf634fd6d 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
@@ -1,7 +1,7 @@
 import { AlertDialog } from '@base-ui/react/alert-dialog';
 
 const buttonClasses =
-  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3.5 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800';
+  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
index 011163bbedd..7af6a6bcf06 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
@@ -4,7 +4,7 @@
   align-items: center;
   justify-content: center;
   height: 2rem;
-  padding: 0 0.875rem;
+  padding: 0 0.75rem;
   margin: 0;
   border: none;
   border-radius: 0;
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
index d85e2bdd4a2..74d4ca02c93 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Button } from '@base-ui/react/button';
 
 export default function ExampleButton() {
   return (
-    <Button className="flex items-center justify-center h-8 px-3.5 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:data-disabled:text-gray-400">
+    <Button className="flex items-center justify-center h-8 px-3 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:data-disabled:text-gray-400">
       Submit
     </Button>
   );
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
index 1c5eefa7e23..8d6c95ba07d 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
@@ -4,7 +4,7 @@
   align-items: center;
   justify-content: center;
   height: 2rem;
-  padding: 0 0.875rem;
+  padding: 0 0.75rem;
   margin: 0;
   border: none;
   border-radius: 0;
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
index 369d28a41aa..49a97f090b6 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleButton() {
 
   return (
     <Button
-      className="flex items-center justify-center h-8 px-3.5 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:data-disabled:text-gray-400"
+      className="flex items-center justify-center h-8 px-3 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:data-disabled:text-gray-400"
       disabled={loading}
       focusableWhenDisabled
       onClick={() => {
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
index c1e59f66ef9..6db19d14fc1 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
@@ -20,7 +20,7 @@
   justify-content: space-between;
   gap: 0.5rem;
   height: 2rem;
-  padding: 0 0.875rem;
+  padding: 0 0.5rem 0 0.75rem;
   margin: 0;
   border: none;
   border-radius: 0;
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
index bb0ec69be15..71efd7dfca4 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Collapsible } from '@base-ui/react/collapsible';
 export default function ExampleCollapsible() {
   return (
     <Collapsible.Root className="flex min-h-36 w-56 flex-col justify-center text-gray-950 dark:text-white">
-      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none bg-gray-200 px-3.5 text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700">
+      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none bg-gray-200 px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700">
         Recovery keys
         <ChevronIcon className="size-3 transition-transform duration-100 ease-out group-data-panel-open:rotate-90" />
       </Collapsible.Trigger>

From d2e6fe18cb61ea479daf189b69785d9c7af6a30f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 24 Apr 2026 00:33:02 +0200
Subject: [PATCH 040/257] ScrollArea: adjust paddings

---
 .../scroll-area/demos/both/css-modules/index.module.css     | 2 +-
 .../scroll-area/demos/hero/css-modules/index.module.css     | 6 +++---
 .../components/scroll-area/demos/hero/tailwind/index.tsx    | 2 +-
 .../demos/scroll-fade/css-modules/index.module.css          | 6 +++---
 .../scroll-area/demos/scroll-fade/tailwind/index.tsx        | 2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
index e953cc8e9d5..a2ad58df1ab 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
@@ -17,7 +17,7 @@
 }
 
 .Content {
-  padding: 1.25rem;
+  padding: 0.75rem 1.5rem 1.5rem 0.75rem;
 }
 
 .Grid {
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
index 84e5e9e2f81..52ce51e78af 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
@@ -21,9 +21,9 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  padding-block: 0.75rem;
-  padding-left: 1rem;
-  padding-right: 1.5rem;
+  padding-block: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 1.25rem;
 }
 
 .Paragraph {
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
index 5c5cb5bc7f2..0fd5ff8877a 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
@@ -4,7 +4,7 @@ export default function ExampleScrollArea() {
   return (
     <ScrollArea.Root className="h-[8.5rem] w-96 max-w-[calc(100vw-8rem)] bg-white dark:bg-gray-950">
       <ScrollArea.Viewport className="h-full outline-1 -outline-offset-1 outline-gray-950 dark:outline-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
-        <ScrollArea.Content className="flex flex-col gap-4 py-3 pr-6 pl-4 text-sm leading-[1.375rem] text-gray-950 dark:text-white">
+        <ScrollArea.Content className="flex flex-col gap-4 py-2 pr-5 pl-3 text-sm leading-[1.375rem] text-gray-950 dark:text-white">
           <p>
             Vernacular architecture is building done outside any academic tradition, and without
             professional guidance. It is not a particular architectural movement or style, but
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
index d42cf64c701..f51420ab238 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
@@ -29,9 +29,9 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  padding-block: 0.75rem;
-  padding-left: 1rem;
-  padding-right: 1.5rem;
+  padding-block: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 1.25rem;
 }
 
 .Paragraph {
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
index fa1229cbf4f..a5d91cdf1d6 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
@@ -4,7 +4,7 @@ export default function ExampleScrollAreaScrollFade() {
   return (
     <ScrollArea.Root className="box-border h-48 w-96 max-w-[calc(100vw-8rem)] bg-gray-100 dark:bg-gray-800">
       <ScrollArea.Viewport className="h-full bg-gray-100 dark:bg-gray-800 mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] mask-no-repeat focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
-        <ScrollArea.Content className="flex flex-col gap-4 py-3 pr-6 pl-4 text-sm leading-[1.375rem] text-gray-950 dark:text-white">
+        <ScrollArea.Content className="flex flex-col gap-4 py-2 pr-5 pl-3 text-sm leading-[1.375rem] text-gray-950 dark:text-white">
           <p>
             Vernacular architecture is building done outside any academic tradition, and without
             professional guidance. It is not a particular architectural movement or style, but

From 45149c93a76a3956b24be9bcc63613cc5348879e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 24 Apr 2026 00:46:03 +0200
Subject: [PATCH 041/257] mergeProps: tweak buttons' paddings

---
 .../css-modules/index.module.css              | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
index 694e1908ba8..f30245b8d0d 100644
--- a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
@@ -12,8 +12,8 @@
 
 .Label {
   font-size: 0.875rem;
-  line-height: 1.5rem;
-  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Toggle {
@@ -28,7 +28,7 @@
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
@@ -38,8 +38,7 @@
   }
 
   &:focus-visible {
-    outline-width: 2px;
-    outline-style: solid;
+    outline: 2px solid var(--color-blue-800);
     outline-offset: 2px;
   }
 }
@@ -55,16 +54,15 @@
   align-items: center;
   justify-content: center;
   height: 2rem;
-  padding: 0 0.875rem;
+  padding: 0 0.75rem;
   margin: 0;
   border: none;
-  border-radius: 0;
   background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
@@ -74,8 +72,7 @@
   }
 
   &:focus-visible {
-    outline-width: 2px;
-    outline-style: solid;
+    outline: 2px solid var(--color-blue-800);
     outline-offset: 2px;
   }
 }

From 09d73f76484b9a927715632ec8b18f955d8f15f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 24 Apr 2026 01:01:45 +0200
Subject: [PATCH 042/257] Dialog brutalist

---
 .../components/dialog/demos/_index.module.css |  58 ++++---
 .../css-modules/index.module.css              |  81 +++++-----
 .../close-confirmation/tailwind/index.tsx     |  32 ++--
 .../tailwind/index.tsx                        |  24 +--
 .../tailwind/index.tsx                        |  14 +-
 .../demos/hero/css-modules/index.module.css   |  58 ++++---
 .../dialog/demos/hero/tailwind/index.tsx      |  14 +-
 .../css-modules/index.module.css              | 137 ++++++-----------
 .../demos/inside-scroll/tailwind/index.tsx    |  30 ++--
 .../demos/nested/css-modules/index.module.css | 100 +++++--------
 .../dialog/demos/nested/tailwind/index.tsx    |  28 ++--
 .../css-modules/index.module.css              | 141 +++++++-----------
 .../outside-scroll/css-modules/index.tsx      |   2 +-
 .../demos/outside-scroll/tailwind/index.tsx   |  32 ++--
 .../uncontained/css-modules/index.module.css  |  60 +++-----
 .../demos/uncontained/css-modules/index.tsx   |   2 +-
 .../demos/uncontained/tailwind/index.tsx      |  10 +-
 17 files changed, 346 insertions(+), 477 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
index 0c9cf47d5a6..2455d790a0c 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
@@ -3,33 +3,27 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: none;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
 
@@ -39,7 +33,7 @@
   inset: 0;
   background-color: black;
   opacity: 0.2;
-  transition: opacity 150ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  transition: opacity 150ms;
 
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
@@ -65,15 +59,15 @@
   width: 24rem;
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
-  padding: 1.5rem;
-  border-radius: 0.5rem;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  padding: 0.75rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition: all 150ms;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    box-shadow: none;
   }
 
   &[data-starting-style],
@@ -84,24 +78,24 @@
 }
 
 .Title {
-  margin-top: -0.375rem;
-  margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
 .Description {
-  margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 }
 
 .Actions {
   display: flex;
   justify-content: end;
-  gap: 1rem;
+  gap: 0.75rem;
+  margin-top: 1rem;
 }
 
 .Container {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
index 050d5dbd325..3b035f5ecea 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
@@ -3,33 +3,27 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: none;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
 
@@ -39,7 +33,7 @@
   inset: 0;
   background-color: black;
   opacity: 0.2;
-  transition: opacity 150ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  transition: opacity 150ms;
 
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
@@ -64,18 +58,18 @@
   width: 24rem;
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
-  padding: 1.5rem;
-  border-radius: 0.5rem;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  padding: 0.75rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition: all 150ms;
 
   transform: translate(-50%, -50%) scale(calc(1 - 0.1 * var(--nested-dialogs)));
   translate: 0 calc(0px + 1.25rem * var(--nested-dialogs));
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    box-shadow: none;
   }
 
   &[data-nested-dialog-open] {
@@ -83,7 +77,6 @@
       content: '';
       inset: 0;
       position: absolute;
-      border-radius: inherit;
       background-color: rgb(0 0 0 / 0.05);
     }
   }
@@ -96,50 +89,52 @@
 }
 
 .Title {
-  margin-top: -0.375rem;
-  margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
 .Description {
-  margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  margin: 0 0 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 }
 
 .Actions {
   display: flex;
   justify-content: end;
-  gap: 1rem;
+  gap: 0.75rem;
 }
 
 .TextareaContainer {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 1rem;
   margin-top: 1rem;
 }
 
 .Textarea {
   box-sizing: border-box;
   padding-block: 0.5rem;
-  padding-inline: 0.875rem;
+  padding-inline: 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid light-dark(var(--color-gray-950), white);
   width: 100%;
-  min-height: 12rem;
-  border-radius: 0.375rem;
+  min-height: 8rem;
   font-family: inherit;
-  font-size: 1rem;
-  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   background-color: transparent;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
+
+  &::placeholder {
+    color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  }
 
   &:focus {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
index 4dadd9622b4..2c4053a5951 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
@@ -24,17 +24,17 @@ 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-normal 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-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
         Tweet
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
-        <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-1 outline-gray-200 transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:rounded-[inherit] data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:outline-gray-300">
-          <Dialog.Title id={titleId} className="-mt-1.5 mb-1 text-lg font-bold">
+        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+        <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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+          <Dialog.Title id={titleId} className="text-sm font-bold">
             New tweet
           </Dialog.Title>
           <form
-            className="mt-4 flex flex-col gap-6"
+            className="mt-4 flex flex-col gap-4"
             onSubmit={(event) => {
               event.preventDefault();
               // Close the dialog when submitting
@@ -44,18 +44,18 @@ export default function ExampleDialog() {
             <textarea
               aria-labelledby={titleId}
               required
-              className="min-h-48 w-full rounded-md border border-gray-200 px-3.5 py-2 text-base font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+              className="min-h-32 w-full border border-gray-950 dark:border-white bg-transparent px-3 py-2 text-sm leading-5 text-gray-950 dark:text-white placeholder:text-gray-600 dark:placeholder:text-gray-400 focus:outline-2 focus:outline-offset-2 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-normal 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">
+            <div className="flex justify-end gap-3">
+              <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
                 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-normal 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-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
               >
                 Tweet
               </button>
@@ -67,20 +67,18 @@ 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-1 outline-gray-200 transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:rounded-[inherit] data-[nested-dialog-open]: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-bold">
-              Discard tweet?
-            </AlertDialog.Title>
-            <AlertDialog.Description className="mb-6 text-base text-gray-600">
+          <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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+            <AlertDialog.Title className="text-sm font-bold">Discard tweet?</AlertDialog.Title>
+            <AlertDialog.Description className="text-sm text-gray-600 dark:text-gray-400 mb-4">
               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-normal 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">
+            <div className="flex justify-end gap-3">
+              <AlertDialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
                 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-normal 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-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
                 onClick={() => {
                   setConfirmationOpen(false);
                   setDialogOpen(false);
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 382ea9ff1aa..5b3d9b73488 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -15,9 +15,9 @@ export default function DialogDetachedTriggersControlledDemo() {
 
   return (
     <React.Fragment>
-      <div className="flex gap-2 flex-wrap justify-center">
+      <div className="flex flex-wrap gap-2 justify-center">
         <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-normal 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-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
           handle={demoDialog}
           id="trigger-1"
           payload={1}
@@ -26,7 +26,7 @@ export default function DialogDetachedTriggersControlledDemo() {
         </Dialog.Trigger>
 
         <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-normal 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-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
           handle={demoDialog}
           id="trigger-2"
           payload={2}
@@ -35,7 +35,7 @@ export default function DialogDetachedTriggersControlledDemo() {
         </Dialog.Trigger>
 
         <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-normal 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-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
           handle={demoDialog}
           id="trigger-3"
           payload={3}
@@ -45,7 +45,7 @@ export default function DialogDetachedTriggersControlledDemo() {
 
         <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-normal 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-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
@@ -63,14 +63,14 @@ export default function DialogDetachedTriggersControlledDemo() {
       >
         {({ payload }) => (
           <Dialog.Portal>
-            <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
-            <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-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-bold">
-                Dialog {payload}
-              </Dialog.Title>
+            <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+            <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+              {payload !== undefined && (
+                <Dialog.Title className="text-sm font-bold">Dialog {payload}</Dialog.Title>
+              )}
 
-              <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-normal 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">
+              <div className="flex justify-end gap-3 mt-4">
+                <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
                   Close
                 </Dialog.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
index ab18d3b9c90..811fe547c6c 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function DialogDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
       <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-normal 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-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         handle={demoDialog}
       >
         View notifications
@@ -16,14 +16,14 @@ export default function DialogDetachedTriggersSimpleDemo() {
 
       <Dialog.Root handle={demoDialog}>
         <Dialog.Portal>
-          <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
-          <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-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-bold">Notifications</Dialog.Title>
-            <Dialog.Description className="mb-6 text-base text-gray-600">
+          <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+          <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+            <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
+            <Dialog.Description className="text-sm text-gray-600 dark:text-gray-400">
               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-normal 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">
+            <div className="flex justify-end gap-3 mt-4">
+              <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
                 Close
               </Dialog.Close>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
index ca1b5d7f685..68ecd7d49b8 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
@@ -3,33 +3,27 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: none;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
 
@@ -39,7 +33,7 @@
   inset: 0;
   background-color: black;
   opacity: 0.2;
-  transition: opacity 150ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  transition: opacity 150ms;
   touch-action: none;
 
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
@@ -66,16 +60,16 @@
   width: 24rem;
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
-  padding: 1.5rem;
-  border-radius: 0.5rem;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  padding: 0.75rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition: all 150ms;
   touch-action: none;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    box-shadow: none;
   }
 
   &[data-starting-style],
@@ -86,22 +80,22 @@
 }
 
 .Title {
-  margin-top: -0.375rem;
-  margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
 .Description {
-  margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 }
 
 .Actions {
   display: flex;
   justify-content: end;
-  gap: 1rem;
+  gap: 0.75rem;
+  margin-top: 1rem;
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
index d747fd5eca7..a281ef8857f 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
@@ -3,18 +3,18 @@ import { Dialog } from '@base-ui/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-normal 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-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
-        <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-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-bold">Notifications</Dialog.Title>
-          <Dialog.Description className="mb-6 text-base text-gray-600">
+        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 touch-none data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+        <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 touch-none data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+          <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
+          <Dialog.Description className="text-sm text-gray-600 dark:text-gray-400">
             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-normal 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">
+          <div className="flex justify-end gap-3 mt-4">
+            <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
               Close
             </Dialog.Close>
           </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
index 5882b2d4c64..b8924ebacbe 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
@@ -3,33 +3,27 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: none;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
 
@@ -38,7 +32,7 @@
   inset: 0;
   background-color: black;
   opacity: 0.2;
-  transition: opacity 250ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  transition: opacity 150ms;
 
   @supports (-webkit-touch-callout: none) {
     position: absolute;
@@ -82,43 +76,35 @@
 }
 
 .Scrollbar {
-  position: absolute;
   display: flex;
-  width: 0.25rem;
-  margin: 0.25rem;
   justify-content: center;
-  border-radius: 1rem;
+  background-color: light-dark(rgb(0 0 0 / 12%), rgb(255 255 255 / 12%));
+  width: 0.75rem;
   opacity: 0;
-  transition: opacity 250ms;
+  transition: opacity 150ms;
   pointer-events: none;
 
+  &[data-scrolling] {
+    transition-duration: 0ms;
+  }
+
   &[data-hovering],
   &[data-scrolling] {
     opacity: 1;
-    transition-duration: 75ms;
-    transition-delay: 0ms;
     pointer-events: auto;
   }
 
-  @media (min-width: 768px) {
-    width: 0.325rem;
+  &::before {
+    content: '';
+    position: absolute;
+    width: 1rem;
+    height: 100%;
   }
 }
 
 .ScrollbarThumb {
   width: 100%;
-  border-radius: inherit;
-  background-color: var(--color-gray-500);
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: calc(100% + 1rem);
-    height: calc(100% + 1rem);
-  }
+  background-color: light-dark(var(--color-gray-950), white);
 }
 
 .Popup {
@@ -129,20 +115,17 @@
   width: min(40rem, calc(100vw - 2rem));
   max-height: 100%;
   max-width: 100%;
-  padding: 2rem;
-  border-radius: 0.5rem;
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
-  outline: 1px solid var(--color-gray-200);
-  box-shadow: 0 24px 45px rgb(15 23 42 / 0.18);
-  transition:
-    opacity 300ms cubic-bezier(0.45, 1.005, 0, 1.005),
-    transform 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  padding: 1rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+  transition: all 150ms;
   overflow: hidden;
   min-height: 0;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    box-shadow: none;
   }
 
   &[data-starting-style],
@@ -157,21 +140,21 @@
   align-items: flex-start;
   justify-content: space-between;
   gap: 0.75rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.25rem;
 }
 
 .Title {
   margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.875rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
 .Description {
-  margin: 0 0 1rem;
-  font-size: 1rem;
-  line-height: 1.6rem;
-  color: var(--color-gray-600);
+  margin: 0 0 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 }
 
 .Body {
@@ -180,22 +163,7 @@
   display: flex;
   min-height: 0;
   overflow: hidden;
-
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    height: 1px;
-    width: 100%;
-    background: var(--color-gray-200);
-  }
-
-  &::before {
-    top: 0;
-  }
-  &::after {
-    bottom: 0;
-  }
+  border-block: 1px solid light-dark(var(--color-gray-950), white);
 }
 
 .BodyViewport {
@@ -203,39 +171,32 @@
   flex: 1 1 auto;
   min-height: 0;
   overscroll-behavior: contain;
-  padding: 1.5rem 1.5rem 1.5rem 0.25rem;
+  padding: 1rem 1rem 1rem 0;
 
   &:focus-visible {
-    outline: 1px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
 .BodyContent {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 1rem;
 }
 
 .SectionTitle {
-  margin: 0 0 0.4rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  margin: 0 0 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
 .SectionBody {
   margin: 0;
-  font-size: 0.95rem;
-  line-height: 1.55rem;
-  color: var(--color-gray-700);
-}
-
-.FooterNote {
-  margin: 0 0 1.5rem;
-  font-size: 0.95rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-700), var(--color-gray-300));
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
index 40e08ddffa6..9cf2fd95862 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
@@ -5,40 +5,38 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function InsideScrollDialog() {
   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-normal 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-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-[250ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="fixed inset-0 flex items-center justify-center overflow-hidden py-6 [@media(min-height:600px)]:pb-12 [@media(min-height:600px)]:pt-8">
-          <Dialog.Popup className="relative flex w-[min(40rem,calc(100vw-2rem))] max-h-full max-w-full min-h-0 flex-col overflow-hidden rounded-lg bg-gray-50 p-8 text-gray-900 shadow-[0_24px_45px_rgba(15,23,42,0.18)] outline-1 outline-gray-200 transition-all duration-[300ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 dark:outline-gray-300">
-            <div className="mb-2 flex items-start justify-between gap-3">
-              <Dialog.Title className="m-0 text-xl font-bold leading-[1.875rem]">
-                Dialog
-              </Dialog.Title>
+          <Dialog.Popup className="relative flex w-[min(40rem,calc(100vw-2rem))] max-h-full max-w-full min-h-0 flex-col overflow-hidden bg-white dark:bg-gray-950 p-4 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0">
+            <div className="mb-1 flex items-start justify-between gap-3">
+              <Dialog.Title className="m-0 text-base font-bold leading-6">Dialog</Dialog.Title>
             </div>
-            <Dialog.Description className="m-0 mb-4 text-base leading-[1.6rem] text-gray-600">
+            <Dialog.Description className="m-0 mb-3 text-sm leading-5 text-gray-600 dark:text-gray-400">
               This layout keeps the popup fully on screen while allowing its content to scroll.
             </Dialog.Description>
-            <ScrollArea.Root className="relative flex min-h-0 flex-1 overflow-hidden before:absolute before:top-0 before:h-px before:w-full before:bg-gray-200 before:content-[''] after:absolute after:bottom-0 after:h-px after:w-full after:bg-gray-200 after:content-['']">
-              <ScrollArea.Viewport className="flex-1 min-h-0 overflow-y-auto overscroll-contain py-6 pr-6 pl-1 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-blue-800">
-                <ScrollArea.Content className="flex flex-col gap-6">
+            <ScrollArea.Root className="relative flex min-h-0 flex-1 overflow-hidden border-y border-gray-950 dark:border-white">
+              <ScrollArea.Viewport className="flex-1 min-h-0 overflow-y-auto overscroll-contain py-4 pr-4 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                <ScrollArea.Content className="flex flex-col gap-4">
                   {CONTENT_SECTIONS.map((item) => (
                     <section key={item.title}>
-                      <h3 className="mb-[0.4rem] text-base font-bold leading-6">{item.title}</h3>
-                      <p className="m-0 text-[0.95rem] leading-[1.55rem] text-gray-700">
+                      <h3 className="mb-1 text-sm font-bold leading-5">{item.title}</h3>
+                      <p className="m-0 text-sm leading-5 text-gray-700 dark:text-gray-300">
                         {item.body}
                       </p>
                     </section>
                   ))}
                 </ScrollArea.Content>
               </ScrollArea.Viewport>
-              <ScrollArea.Scrollbar className="pointer-events-none absolute m-1 flex w-[0.25rem] justify-center rounded-[1rem] opacity-0 transition-opacity duration-[250ms] data-[hovering]:pointer-events-auto data-[hovering]:opacity-100 data-[hovering]:duration-[75ms] data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-[75ms] md:w-[0.325rem]">
-                <ScrollArea.Thumb className="w-full rounded-[inherit] bg-gray-500 before:absolute before:left-1/2 before:top-1/2 before:h-[calc(100%+1rem)] before:w-[calc(100%+1rem)] before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']" />
+              <ScrollArea.Scrollbar className="pointer-events-none flex w-3 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity duration-150 before:absolute before:h-full before:w-4 before:content-[''] data-[hovering]:pointer-events-auto data-[hovering]:opacity-100 data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0">
+                <ScrollArea.Thumb className="w-full bg-gray-950 dark:bg-white" />
               </ScrollArea.Scrollbar>
             </ScrollArea.Root>
             <div className="mt-4 flex justify-end gap-3">
-              <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-normal 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-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
                 Close
               </Dialog.Close>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
index 2da1423743a..38e961e37b2 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
@@ -3,77 +3,56 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: none;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
 
 .GhostButton {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 2rem;
+  padding: 0 0.75rem;
+  margin: 0;
+  border: none;
+  background-color: transparent;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  background-color: transparent;
-  color: var(--color-blue);
-  border-radius: 0.25rem;
-  padding: 0.125rem 0.375rem;
-  margin: -0.125rem -0.375rem;
-  border: 0;
-  outline: 0;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
+  user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: color-mix(in oklch, var(--color-blue), transparent 95%);
-    }
-  }
-
-  &:active {
-    background-color: color-mix(in oklch, var(--color-blue), transparent 90%);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    @media (hover: hover) {
-      &:hover {
-        background-color: color-mix(in oklch, var(--color-blue), transparent 85%);
-      }
-    }
-
-    &:active {
-      background-color: color-mix(in oklch, var(--color-blue), transparent 75%);
+      background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
 
@@ -83,7 +62,7 @@
   inset: 0;
   background-color: black;
   opacity: 0.2;
-  transition: opacity 150ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  transition: opacity 150ms;
 
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
@@ -108,18 +87,18 @@
   width: 24rem;
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
-  padding: 1.5rem;
-  border-radius: 0.5rem;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  padding: 0.75rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition: all 150ms;
 
   transform: translate(-50%, -50%) scale(calc(1 - 0.1 * var(--nested-dialogs)));
   translate: 0 calc(0px + 1.25rem * var(--nested-dialogs));
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    box-shadow: none;
   }
 
   &[data-nested-dialog-open] {
@@ -127,7 +106,6 @@
       content: '';
       inset: 0;
       position: absolute;
-      border-radius: inherit;
       background-color: rgb(0 0 0 / 0.05);
     }
   }
@@ -140,25 +118,25 @@
 }
 
 .Title {
-  margin-top: -0.375rem;
-  margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
 .Description {
-  margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 }
 
 .Actions {
   display: flex;
   align-items: center;
   justify-content: end;
-  gap: 1rem;
+  gap: 0.75rem;
+  margin-top: 1rem;
 }
 
 .ActionsLeft {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
index f06cad2ced5..da03c16ba70 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
@@ -3,32 +3,32 @@ import { Dialog } from '@base-ui/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-normal 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-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
-        <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-1 outline-gray-200 transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:rounded-[inherit] data-[nested-dialog-open]: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-bold">Notifications</Dialog.Title>
-          <Dialog.Description className="mb-6 text-base text-gray-600">
+        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+        <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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+          <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
+          <Dialog.Description className="text-sm text-gray-600 dark:text-gray-400">
             You are all caught up. Good job!
           </Dialog.Description>
-          <div className="flex items-center justify-end gap-4">
+          <div className="flex items-center justify-end gap-3 mt-4">
             <div className="mr-auto flex">
               <Dialog.Root>
-                <Dialog.Trigger className="-mx-1.5 -my-0.5 flex items-center justify-center rounded-xs px-1.5 py-0.5 text-base font-normal 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="flex h-8 items-center justify-center bg-transparent px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-200 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
                   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-1 outline-gray-200 transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:rounded-[inherit] data-[nested-dialog-open]: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-bold">
-                      Customize notification
+                  <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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+                    <Dialog.Title className="text-sm font-bold">
+                      Customize notifications
                     </Dialog.Title>
-                    <Dialog.Description className="mb-6 text-base text-gray-600">
+                    <Dialog.Description className="text-sm text-gray-600 dark:text-gray-400">
                       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-normal 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">
+                    <div className="flex items-center justify-end gap-3 mt-4">
+                      <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
                         Close
                       </Dialog.Close>
                     </div>
@@ -37,7 +37,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-normal 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-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
               Close
             </Dialog.Close>
           </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
index 681e6f2ab6d..9262a15ebac 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
@@ -3,33 +3,27 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: none;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
 
@@ -85,12 +79,10 @@
 }
 
 .Scrollbar {
-  position: absolute;
   display: flex;
-  width: 0.25rem;
-  margin: 0.4rem;
   justify-content: center;
-  border-radius: 1rem;
+  background-color: light-dark(rgb(0 0 0 / 12%), rgb(255 255 255 / 12%));
+  width: 0.75rem;
   opacity: 0;
   transition: opacity 250ms;
   pointer-events: none;
@@ -107,45 +99,28 @@
     transition-duration: 250ms;
     opacity: 0;
   }
-
-  @media (min-width: 768px) {
-    width: 0.4375rem;
-  }
 }
 
 .ScrollbarThumb {
   width: 100%;
-  border-radius: inherit;
-  background-color: var(--color-gray-500);
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: calc(100% + 1rem);
-    height: calc(100% + 1rem);
-  }
+  background-color: light-dark(var(--color-gray-950), white);
 }
 
 .Popup {
   box-sizing: border-box;
   position: relative;
   width: min(40rem, calc(100vw - 2rem));
-  padding: 2rem;
+  padding: 1rem;
   margin: 4rem auto;
-  border-radius: 0.5rem;
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
-  box-shadow:
-    0 10px 64px -10px rgb(36 40 52 / 20%),
-    0 0.25px 0 1px var(--color-gray-200);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition: transform 700ms cubic-bezier(0.45, 1.005, 0, 1.005);
   outline: 0;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    box-shadow: none;
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -168,21 +143,21 @@
   align-items: flex-start;
   justify-content: space-between;
   gap: 0.75rem;
-  margin-bottom: 1rem;
+  margin-bottom: 0.25rem;
 }
 
 .Title {
   margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.875rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
 .Description {
-  margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.6rem;
-  color: var(--color-gray-600);
+  margin: 0 0 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 }
 
 .Close {
@@ -190,71 +165,64 @@
   display: inline-flex;
   align-items: center;
   position: relative;
-  right: -0.5rem;
-  top: -0.5rem;
+  right: -0.25rem;
+  top: -0.25rem;
   justify-content: center;
-  width: 2.25rem;
-  height: 2.25rem;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-600);
-  transition:
-    background-color 120ms ease,
-    color 120ms ease;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
-      color: var(--color-gray-900);
+      background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+      color: light-dark(var(--color-gray-950), white);
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
 
 .CloseIcon {
-  width: 1.1rem;
-  height: 1.1rem;
+  width: 1rem;
+  height: 1rem;
 }
 
 .Body {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
-  margin-bottom: 1.75rem;
+  gap: 1rem;
+  margin-bottom: 1rem;
 }
 
 .SectionTitle {
-  margin: 0 0 0.4rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  margin: 0 0 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
 .SectionBody {
   margin: 0;
-  font-size: 0.95rem;
-  line-height: 1.55rem;
-  color: var(--color-gray-700);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-700), var(--color-gray-300));
 }
 
 .FooterNote {
-  margin: 0 0 1.5rem;
-  font-size: 0.95rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 }
 
 .FooterLink {
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
   text-decoration: underline;
   text-decoration-thickness: 1px;
   text-underline-offset: 0.16em;
@@ -266,8 +234,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid var(--color-blue-800);
     outline-offset: 2px;
-    border-radius: 0.125rem;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx
index ae01de3ab46..fdbc00b0ed9 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx
@@ -70,7 +70,7 @@ function XIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
+      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
       {...props}
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index 8d77bd4ef5b..59901508fe3 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function OutsideScrollDialog() {
   const popupRef = React.useRef<HTMLDivElement>(null);
   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-normal 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-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -22,45 +22,43 @@ export default function OutsideScrollDialog() {
                 <Dialog.Popup
                   ref={popupRef}
                   initialFocus={popupRef}
-                  className="outline-0 relative mx-auto my-18 w-[min(40rem,calc(100vw-2rem))] rounded-lg bg-gray-50 p-8 text-gray-900 shadow-[0_10px_64px_-10px_rgb(36_40_52/20%),0_0.25px_0_1px_oklch(12%_9%_264deg/7%)] transition-transform duration-[700ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-[starting-style]:translate-y-[100dvh] data-[ending-style]:translate-y-[max(100dvh,100%)] data-[ending-style]:duration-[350ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] dark:shadow-[0_0_0_1px_oklch(29%_0.75%_264deg/80%)] dark:outline-1 dark:outline-gray-300 motion-reduce:transition-none"
+                  className="outline-0 relative mx-auto my-16 w-[min(40rem,calc(100vw-2rem))] bg-white dark:bg-gray-950 p-4 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-transform duration-[700ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-[starting-style]:translate-y-[100dvh] data-[ending-style]:translate-y-[max(100dvh,100%)] data-[ending-style]:duration-[350ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] motion-reduce:transition-none"
                 >
-                  <div className="mb-4 flex items-start justify-between gap-3">
-                    <Dialog.Title className="m-0 text-xl font-bold leading-[1.875rem]">
+                  <div className="mb-1 flex items-start justify-between gap-3">
+                    <Dialog.Title className="m-0 text-base font-bold leading-6">
                       Dialog
                     </Dialog.Title>
                     <Dialog.Close
                       aria-label="Close"
-                      className="relative top-[-0.5rem] right-[-0.5rem] flex items-center justify-center rounded-md border border-gray-200 bg-gray-50 w-[2.25rem] h-[2.25rem] text-base font-normal 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="relative top-[-0.25rem] right-[-0.25rem] flex items-center justify-center w-7 h-7 bg-transparent text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-950 dark:hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
                     >
-                      <XIcon className="h-[1.1rem] w-[1.1rem]" />
+                      <XIcon className="h-4 w-4" />
                     </Dialog.Close>
                   </div>
 
-                  <Dialog.Description className="m-0 mb-6 text-base leading-[1.6rem] text-gray-600">
+                  <Dialog.Description className="m-0 mb-4 text-sm leading-5 text-gray-600 dark:text-gray-400">
                     This layout keeps an outer container scrollable while the dialog can extend past
                     the bottom edge.
                   </Dialog.Description>
 
-                  <div className="mb-[1.75rem] flex flex-col gap-6">
+                  <div className="mb-4 flex flex-col gap-4">
                     {CONTENT_SECTIONS.map((item) => (
                       <section key={item.title}>
-                        <h3 className="m-0 mb-[0.4rem] text-base font-bold leading-6">
-                          {item.title}
-                        </h3>
-                        <p className="m-0 text-[0.95rem] leading-[1.55rem] text-gray-700">
+                        <h3 className="m-0 mb-1 text-sm font-bold leading-5">{item.title}</h3>
+                        <p className="m-0 text-sm leading-5 text-gray-700 dark:text-gray-300">
                           {item.body}
                         </p>
                       </section>
                     ))}
                   </div>
 
-                  <p className="m-0 mb-6 text-[0.95rem] leading-6 text-gray-600">
+                  <p className="m-0 text-sm leading-5 text-gray-600 dark:text-gray-400">
                     Related docs:{' '}
                     {RELATED_LINKS.map((item, index) => (
                       <React.Fragment key={item.href}>
                         {index > 0 ? ', ' : null}
                         <a
-                          className="text-gray-900 underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:rounded-[0.125rem] focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:outline-offset-2"
+                          className="text-gray-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:outline-offset-2"
                           href={item.href}
                         >
                           {item.label}
@@ -72,8 +70,8 @@ export default function OutsideScrollDialog() {
                 </Dialog.Popup>
               </ScrollArea.Content>
             </ScrollArea.Viewport>
-            <ScrollArea.Scrollbar className="pointer-events-none absolute m-[0.4rem] flex w-[0.25rem] justify-center rounded-[1rem] opacity-0 transition-opacity duration-[250ms] data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-[75ms] data-[scrolling]:delay-[0ms] hover:pointer-events-auto hover:opacity-100 hover:duration-[75ms] hover:delay-[0ms] md:w-[0.4375rem] group-data-[ending-style]/dialog:opacity-0 group-data-[ending-style]/dialog:duration-300">
-              <ScrollArea.Thumb className="w-full rounded-[inherit] bg-gray-500 before:absolute before:content-[''] before:top-1/2 before:left-1/2 before:h-[calc(100%+1rem)] before:w-[calc(100%+1rem)] before:-translate-x-1/2 before:-translate-y-1/2" />
+            <ScrollArea.Scrollbar className="pointer-events-none flex w-3 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity duration-[250ms] data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-[75ms] data-[scrolling]:delay-[0ms] hover:pointer-events-auto hover:opacity-100 hover:duration-[75ms] hover:delay-[0ms] group-data-[ending-style]/dialog:opacity-0 group-data-[ending-style]/dialog:duration-300">
+              <ScrollArea.Thumb className="w-full bg-gray-950 dark:bg-white" />
             </ScrollArea.Scrollbar>
           </ScrollArea.Root>
         </Dialog.Viewport>
@@ -90,7 +88,7 @@ function XIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
+      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
       {...props}
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
index de032c0665d..a4decf9005c 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
@@ -3,33 +3,27 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: none;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
 
@@ -90,20 +84,20 @@
   width: 100%;
   height: 100%;
   max-width: 70rem;
-  padding: 1.5rem;
-  border-radius: 0.5rem;
+  padding: 1rem;
   pointer-events: auto;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    box-shadow: none;
   }
 
   [data-starting-style] & {
-    transform: scale(1.1);
+    transform: scale(1.05);
   }
 }
 
@@ -120,20 +114,12 @@
   height: 1.75rem;
   margin: 0;
   border: none;
-  color: var(--color-gray-50);
-  border-radius: 0.375rem;
-
-  @media (prefers-color-scheme: dark) {
-    color: var(--color-gray-900);
-  }
+  background-color: transparent;
+  color: white;
 
   &:focus-visible {
-    outline: 2px solid var(--color-gray-50);
-    outline-offset: -1px;
-
-    @media (prefers-color-scheme: dark) {
-      outline-color: var(--color-gray-900);
-    }
+    outline: 2px solid white;
+    outline-offset: 2px;
   }
 
   @media (hover: hover) {
@@ -150,6 +136,6 @@
 }
 
 .CloseIcon {
-  width: 2rem;
-  height: 2rem;
+  width: 1.5rem;
+  height: 1.5rem;
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx
index df95d85f314..ea60a8a5f3d 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx
@@ -28,7 +28,7 @@ function XIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
+      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
       {...props}
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
index dab06b9e80e..094f168b033 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleUncontainedDialog() {
   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-normal 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-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -11,12 +11,12 @@ export default function ExampleUncontainedDialog() {
         <Dialog.Viewport className="fixed inset-0 grid place-items-center px-4 py-10 xl:py-6">
           <Dialog.Popup className="group/popup flex h-full w-full justify-center pointer-events-none transition-opacity duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0">
             <Dialog.Close
-              className="absolute right-3 top-2 flex h-7 w-7 items-center justify-center rounded-md border-0 bg-transparent text-gray-50 hover:bg-white/10 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-50 xl:right-3 xl:top-3 xl:h-10 xl:w-10 dark:text-gray-900 dark:focus-visible:outline-gray-900 pointer-events-auto"
+              className="absolute right-3 top-2 flex h-7 w-7 items-center justify-center bg-transparent text-white hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white xl:right-3 xl:top-3 xl:h-10 xl:w-10 pointer-events-auto"
               aria-label="Close"
             >
-              <XIcon className="h-8 w-8" />
+              <XIcon className="h-6 w-6" />
             </Dialog.Close>
-            <div className="pointer-events-auto box-border h-full w-full max-w-[70rem] rounded-lg bg-gray-50 p-6 text-gray-900 outline-1 outline-gray-200 transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[starting-style]/popup:scale-110 dark:outline-gray-300" />
+            <div className="pointer-events-auto box-border h-full w-full max-w-[70rem] bg-white dark:bg-gray-950 p-4 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[starting-style]/popup:scale-105" />
           </Dialog.Popup>
         </Dialog.Viewport>
       </Dialog.Portal>
@@ -32,7 +32,7 @@ function XIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
+      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
       {...props}

From 214ddb52c485bfb01b3538ca2d5b4edf7bd0d6d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 24 Apr 2026 08:54:13 +0200
Subject: [PATCH 043/257] Input brutalist

---
 .../demos/hero/css-modules/index.module.css   | 23 +++++++++++--------
 .../input/demos/hero/css-modules/index.tsx    |  2 +-
 .../input/demos/hero/tailwind/index.tsx       |  6 ++---
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
index 861b9414216..fb75e55475a 100644
--- a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
@@ -6,25 +6,28 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
-  width: 14rem;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  width: 10rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
   background-color: transparent;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
+
+  &::placeholder {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
 
   &:focus {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.tsx
index 47e1580ff5e..e40e184946a 100644
--- a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.tsx
@@ -5,7 +5,7 @@ export default function ExampleInput() {
   return (
     <label className={styles.Label}>
       Name
-      <Input placeholder="Enter your name" className={styles.Input} />
+      <Input placeholder="e.g. Colm Tuite" className={styles.Input} />
     </label>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
index 08c18c81d6b..85fe2c57609 100644
--- a/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
@@ -2,11 +2,11 @@ import { Input } from '@base-ui/react/input';
 
 export default function ExampleInput() {
   return (
-    <label className="flex flex-col items-start gap-1 text-sm text-gray-900 font-bold">
+    <label className="flex flex-col items-start gap-1 text-sm font-bold text-gray-950 dark:text-white">
       Name
       <Input
-        placeholder="Enter your name"
-        className="h-10 w-56 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 font-normal"
+        placeholder="e.g. Colm Tuite"
+        className="h-8 w-40 border border-gray-950 dark:border-white bg-transparent px-2 text-sm font-normal text-gray-950 dark:text-white placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:outline-2 focus:outline-offset-2 focus:outline-blue-800"
       />
     </label>
   );

From 7cf36101a7cdaff7c729e028f4f2cd80fc2282b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 24 Apr 2026 09:42:46 +0200
Subject: [PATCH 044/257] DirectionProvider demo brutalist

---
 .../demos/hero/css-modules/index.module.css   | 22 ++++++++++---------
 .../demos/hero/tailwind/index.tsx             |  8 +++----
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css
index bce91993d30..02aa04f1d36 100644
--- a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css
@@ -4,30 +4,32 @@
   align-items: center;
   width: 14rem;
   padding-block: 0.75rem;
+  touch-action: none;
+  user-select: none;
 }
 
 .Track {
   width: 100%;
-  background-color: var(--color-gray-200);
-  box-shadow: inset 0 0 0 1px var(--color-gray-200);
   height: 0.25rem;
-  border-radius: 0.25rem;
-  position: relative;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  user-select: none;
 }
 
 .Indicator {
-  border-radius: 0.25rem;
-  background-color: var(--color-gray-700);
+  background-color: light-dark(var(--color-gray-950), white);
+  user-select: none;
 }
 
 .Thumb {
+  box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border-radius: 100%;
-  background-color: white;
-  outline: 1px solid var(--color-gray-300);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  user-select: none;
 
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/tailwind/index.tsx
index 3a4e318ec89..097d595bb45 100644
--- a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/tailwind/index.tsx
@@ -6,10 +6,10 @@ export default function ExampleDirectionProvider() {
     <div dir="rtl">
       <DirectionProvider direction="rtl">
         <Slider.Root defaultValue={25}>
-          <Slider.Control className="flex w-56 items-center py-3">
-            <Slider.Track className="relative h-1 w-full rounded-sm bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200">
-              <Slider.Indicator className="rounded-sm bg-gray-700" />
-              <Slider.Thumb className="size-4 rounded-full bg-white outline-1 outline-gray-300 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800" />
+          <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
+            <Slider.Track className="h-1 w-full bg-gray-200 select-none dark:bg-gray-800">
+              <Slider.Indicator className="bg-gray-950 select-none dark:bg-white" />
+              <Slider.Thumb className="box-border size-4 border border-gray-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-gray-950" />
             </Slider.Track>
           </Slider.Control>
         </Slider.Root>

From b6c3825ed8a45dae13eeb89aeeb2560deb96001c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 24 Apr 2026 10:35:54 +0200
Subject: [PATCH 045/257] Popover brutalist

---
 .../popover/demos/_index.module.css           | 129 ++++++++---------
 .../css-modules/index.tsx                     |  23 +--
 .../tailwind/index.tsx                        |  40 ++----
 .../css-modules/index.module.css              | 134 +++++++++---------
 .../css-modules/index.tsx                     |  23 +--
 .../detached-triggers-full/tailwind/index.tsx | 113 ++++-----------
 .../css-modules/index.tsx                     |  23 +--
 .../tailwind/index.tsx                        |  14 +-
 .../popover/demos/hero/css-modules/index.tsx  |  23 +--
 .../popover/demos/hero/tailwind/index.tsx     |  14 +-
 .../components/popover/demos/icons-tw.tsx     |  19 ---
 .../demos/open-on-hover/css-modules/index.tsx |  23 +--
 .../demos/open-on-hover/tailwind/index.tsx    |  14 +-
 13 files changed, 188 insertions(+), 404 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
index e9eaf0990e0..ae8ef078f1d 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
@@ -3,34 +3,36 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 2rem;
+  height: 2rem;
   padding: 0;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  border: none;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
 
@@ -47,10 +49,12 @@
 
 .Popup {
   box-sizing: border-box;
-  padding: 1rem 1.5rem;
-  border-radius: 0.5rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  position: relative;
+  padding: 0.75rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
     transform 150ms,
@@ -60,77 +64,71 @@
   height: var(--popup-height, auto);
   max-width: 500px;
 
+  @media (prefers-color-scheme: dark) {
+    filter: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     transform: scale(0.9);
   }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
-  }
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
 
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    background-color: light-dark(white, var(--color-gray-950));
+    border: 1px solid light-dark(var(--color-gray-950), white);
+    transform: translate(-50%, 50%) rotate(45deg);
   }
 }
 
 .Title {
   margin: 0;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
 .Description {
   margin: 0;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 }
 
 .Container {
@@ -145,33 +143,26 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.375rem;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: none;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/css-modules/index.tsx
index 2229198155d..3a57f5fc968 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/css-modules/index.tsx
@@ -50,9 +50,7 @@ export default function PopoverDetachedTriggersControlledDemo() {
         <Popover.Portal>
           <Popover.Positioner className={styles.Positioner} sideOffset={8}>
             <Popover.Popup className={styles.Popup}>
-              <Popover.Arrow className={styles.Arrow}>
-                <ArrowSvg />
-              </Popover.Arrow>
+              <Popover.Arrow className={styles.Arrow} />
               <Popover.Title className={styles.Title}>Notifications</Popover.Title>
               <Popover.Description className={styles.Description}>
                 You are all caught up. Good job!
@@ -65,25 +63,6 @@ export default function PopoverDetachedTriggersControlledDemo() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
 function BellIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg fill="currentColor" width="20" height="20" viewBox="0 0 16 16" {...props}>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
index 33ca28c1f7c..e4922857569 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { Popover } from '@base-ui/react/popover';
-import { ArrowSvg, BellIcon } from '../../icons-tw';
+import { BellIcon } from '../../icons-tw';
 
 const demoPopover = Popover.createHandle();
 
@@ -18,7 +18,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
     <React.Fragment>
       <div className="flex gap-2 flex-wrap justify-center">
         <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"
+          className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
           handle={demoPopover}
           id="trigger-1"
         >
@@ -26,7 +26,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
         </Popover.Trigger>
 
         <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"
+          className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
           handle={demoPopover}
           id="trigger-2"
         >
@@ -34,7 +34,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
         </Popover.Trigger>
 
         <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"
+          className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
           handle={demoPopover}
           id="trigger-3"
         >
@@ -43,7 +43,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
 
         <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-normal 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-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
@@ -61,33 +61,13 @@ export default function PopoverDetachedTriggersSimpleDemo() {
       >
         <Popover.Portal>
           <Popover.Positioner
-            className="h-(--positioner-height) w-(--positioner-width) max-w-(--available-width)"
+            className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)]"
             sideOffset={8}
           >
-            <Popover.Popup
-              className={`
-              h-(--popup-height,auto)
-              w-(--popup-width,auto) max-w-[500px]
-              origin-[var(--transform-origin)] rounded-lg bg-[canvas]
-              px-6 py-4
-              text-gray-900 shadow-lg
-              shadow-gray-200
-              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>
-              <Popover.Title className="text-base font-bold">Notifications</Popover.Title>
-              <Popover.Description className="text-base text-gray-600">
+            <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] origin-[var(--transform-origin)] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+              <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+              <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
+              <Popover.Description className="text-sm text-gray-600 dark:text-gray-400">
                 You are all caught up. Good job!
               </Popover.Description>
             </Popover.Popup>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
index 4fca1c597bc..2507cbc7be8 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
@@ -3,36 +3,36 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 2rem;
+  height: 2rem;
   padding: 0;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
-  user-select: none;
-  font-size: 1rem;
+  border: none;
+  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  font-family: inherit;
+  font-size: 0.875rem;
   font-weight: 400;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
+  user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
 
@@ -61,9 +61,10 @@
 
 .Popup {
   position: relative;
-  background-color: canvas;
-  color: var(--color-gray-900);
-  border-radius: 0.5rem;
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
 
   /* These are required to make the size animations work */
@@ -77,6 +78,10 @@
   transition-timing-function: var(--easing);
   transition-duration: var(--animation-duration);
 
+  @media (prefers-color-scheme: dark) {
+    filter: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -86,29 +91,17 @@
   &[data-instant] {
     transition: none;
   }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
-  }
 }
 
 .Viewport {
-  --viewport-inline-padding: 1.5rem;
+  --viewport-inline-padding: 1rem;
   box-sizing: border-box;
   /* Required to clip the overflowing content during the slide in/out animations */
   position: relative;
   overflow: clip;
   width: 100%;
   height: 100%;
-  padding: 1rem var(--viewport-inline-padding);
+  padding: 0.75rem var(--viewport-inline-padding);
 
   [data-previous],
   [data-current] {
@@ -147,58 +140,60 @@
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
   transition: left calc(var(--animation-duration)) var(--easing);
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
 
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
-
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    background-color: light-dark(white, var(--color-gray-950));
+    border: 1px solid light-dark(var(--color-gray-950), white);
+    transform: translate(-50%, 50%) rotate(45deg);
   }
 }
 
 .Title {
   margin: 0;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
 .Description {
   margin: 0;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 }
 
 .Container {
@@ -210,7 +205,6 @@
   display: grid;
   grid-template-columns: auto auto;
   column-gap: 16px;
-  margin: 0 -8px;
 
   .Title {
     grid-column: 2;
@@ -222,7 +216,8 @@
     grid-row: 2;
 
     font-size: 0.875rem;
-    color: var(--color-gray-600);
+    line-height: 1.25rem;
+    color: light-dark(var(--color-gray-600), var(--color-gray-400));
   }
 
   .Avatar {
@@ -233,12 +228,11 @@
     justify-content: center;
     align-items: center;
     vertical-align: middle;
-    border-radius: 100%;
     user-select: none;
     font-weight: 700;
-    color: var(--color-gray-900);
-    background-color: var(--color-gray-100);
-    font-size: 1rem;
+    color: light-dark(var(--color-gray-950), white);
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+    font-size: 0.875rem;
     line-height: 1;
     overflow: hidden;
     height: 3rem;
@@ -256,21 +250,29 @@
     grid-row: 3;
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 0.5rem;
     margin-top: 0.5rem;
     padding-top: 0.5rem;
-    border-top: 1px solid var(--color-gray-200);
+    border-top: 1px solid light-dark(var(--color-gray-950), white);
     font-size: 0.875rem;
+    line-height: 1.25rem;
 
     a {
-      color: var(--color-gray-900);
-      text-decoration: none;
+      color: light-dark(var(--color-gray-950), white);
+      text-decoration: underline;
+      text-decoration-thickness: 1px;
+      text-underline-offset: 0.16em;
 
       @media (hover: hover) {
         &:hover {
-          text-decoration: underline;
+          text-decoration: none;
         }
       }
+
+      &:focus-visible {
+        outline: 2px solid var(--color-blue-800);
+        outline-offset: 2px;
+      }
     }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx
index 4792fd6e4b8..26091ae5918 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx
@@ -30,9 +30,7 @@ export default function PopoverDetachedTriggersFullDemo() {
           <Popover.Portal>
             <Popover.Positioner sideOffset={8} className={styles.Positioner}>
               <Popover.Popup className={styles.Popup}>
-                <Popover.Arrow className={styles.Arrow}>
-                  <ArrowSvg />
-                </Popover.Arrow>
+                <Popover.Arrow className={styles.Arrow} />
 
                 <Popover.Viewport className={styles.Viewport}>
                   {Payload !== undefined && <Payload />}
@@ -89,25 +87,6 @@ function ActivityPanel() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
 function BellIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg fill="currentColor" width="20" height="20" viewBox="0 0 16 16" {...props}>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
index f3a4f828dfb..7fe05f32167 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { Popover } from '@base-ui/react/popover';
 import { Avatar } from '@base-ui/react/avatar';
-import { ArrowSvg, BellIcon, ListIcon, UserIcon } from '../../icons-tw';
+import { BellIcon, ListIcon, UserIcon } from '../../icons-tw';
 
 const demoPopover = Popover.createHandle<React.ComponentType>();
 
@@ -10,16 +10,7 @@ export default function PopoverDetachedTriggersFullDemo() {
   return (
     <div className="flex gap-2">
       <Popover.Trigger
-        className={`
-          box-border flex
-          size-10 items-center justify-center
-          rounded-md border border-gray-200
-          bg-gray-50
-          text-base font-normal text-gray-900
-          select-none
-          hover:bg-gray-100 focus-visible:outline-2
-          focus-visible:-outline-offset-1
-          focus-visible:outline-blue-600 active:bg-gray-100 data-popup-open:bg-gray-100`}
+        className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
         payload={NotificationsPanel}
       >
@@ -27,16 +18,7 @@ export default function PopoverDetachedTriggersFullDemo() {
       </Popover.Trigger>
 
       <Popover.Trigger
-        className={`
-          box-border flex
-          size-10 items-center justify-center
-          rounded-md border border-gray-200
-          bg-gray-50
-          text-base font-normal text-gray-900
-          select-none
-          hover:bg-gray-100 focus-visible:outline-2
-          focus-visible:-outline-offset-1
-          focus-visible:outline-blue-600 active:bg-gray-100 data-popup-open:bg-gray-100`}
+        className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
         payload={ActivityPanel}
       >
@@ -44,16 +26,7 @@ export default function PopoverDetachedTriggersFullDemo() {
       </Popover.Trigger>
 
       <Popover.Trigger
-        className={`
-          box-border flex
-          size-10 items-center justify-center
-          rounded-md border border-gray-200
-          bg-gray-50
-          text-base font-normal text-gray-900
-          select-none
-          hover:bg-gray-100 focus-visible:outline-2
-          focus-visible:-outline-offset-1
-          focus-visible:outline-blue-600 active:bg-gray-100 data-popup-open:bg-gray-100`}
+        className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
         payload={ProfilePanel}
       >
@@ -65,53 +38,15 @@ export default function PopoverDetachedTriggersFullDemo() {
           <Popover.Portal>
             <Popover.Positioner
               sideOffset={8}
-              className={`
-                h-(--positioner-height) w-(--positioner-width)
-                max-w-(--available-width)
-                transition-[top,left,right,bottom,transform]
-                duration-[0.35s]
-                ease-[cubic-bezier(0.22,1,0.36,1)]
-                data-instant:transition-none`}
+              className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[instant]:transition-none"
             >
-              <Popover.Popup
-                className={`
-                  relative h-(--popup-height,auto) w-(--popup-width,auto)
-                  max-w-[500px] origin-(--transform-origin)
-                  rounded-lg bg-[canvas] text-gray-900
-                  shadow-lg
-                  shadow-gray-200
-                  outline-1
-                  outline-gray-200
-                  transition-[width,height,opacity,scale]
-                  duration-[0.35s]
-                  ease-[cubic-bezier(0.22,1,0.36,1)]
-                  data-ending-style:scale-90
-                  data-ending-style:opacity-0 data-instant:transition-none
-                  data-starting-style:scale-90
-                  data-starting-style:opacity-0
-                  dark:shadow-none
-                  dark:-outline-offset-1
-                  dark:outline-gray-300`}
-              >
-                <Popover.Arrow
-                  className={`
-                    flex
-                    transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]
-                    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>
+              <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] origin-[var(--transform-origin)] bg-white dark:bg-gray-950 text-gray-950 dark:text-white border border-gray-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+                <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
 
                 <Popover.Viewport
                   className={`
-                    relative h-full w-full overflow-clip p-[1rem_1.5rem]
-                    [&_[data-current]]:w-[calc(var(--popup-width)-3rem)]
+                    relative h-full w-full overflow-clip p-[0.75rem_1rem]
+                    [&_[data-current]]:w-[calc(var(--popup-width)-2rem)]
                     [&_[data-current]]:translate-x-0
                     [&_[data-current]]:opacity-100
                     [&_[data-current]]:transition-[translate,opacity]
@@ -121,7 +56,7 @@ export default function PopoverDetachedTriggersFullDemo() {
                     data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:opacity-0
                     data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:translate-x-1/2
                     data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:opacity-0
-                    [&_[data-previous]]:w-[calc(var(--popup-width)-3rem)]
+                    [&_[data-previous]]:w-[calc(var(--popup-width)-2rem)]
                     [&_[data-previous]]:translate-x-0
                     [&_[data-previous]]:opacity-100
                     [&_[data-previous]]:transition-[translate,opacity]
@@ -146,8 +81,8 @@ export default function PopoverDetachedTriggersFullDemo() {
 function NotificationsPanel() {
   return (
     <React.Fragment>
-      <Popover.Title className="m-0 text-base font-bold">Notifications</Popover.Title>
-      <Popover.Description className="m-0 text-base text-gray-600">
+      <Popover.Title className="m-0 text-sm font-bold leading-5">Notifications</Popover.Title>
+      <Popover.Description className="m-0 text-sm leading-5 text-gray-600 dark:text-gray-400">
         You are all caught up. Good job!
       </Popover.Description>
     </React.Fragment>
@@ -156,11 +91,11 @@ function NotificationsPanel() {
 
 function ProfilePanel() {
   return (
-    <div className="-mx-2 grid grid-cols-[auto_auto] gap-x-4">
-      <Popover.Title className="col-start-2 col-end-3 row-start-1 row-end-2 m-0 text-base font-bold">
+    <div className="grid grid-cols-[auto_auto] gap-x-4">
+      <Popover.Title className="col-start-2 col-end-3 row-start-1 row-end-2 m-0 text-sm font-bold leading-5">
         Jason Eventon
       </Popover.Title>
-      <Avatar.Root className="col-start-1 col-end-2 row-start-1 row-end-3 inline-flex h-12 w-12 items-center justify-center overflow-hidden rounded-full bg-gray-100 align-middle text-base leading-none font-bold text-gray-900 select-none">
+      <Avatar.Root className="col-start-1 col-end-2 row-start-1 row-end-3 inline-flex h-12 w-12 items-center justify-center overflow-hidden bg-gray-200 dark:bg-gray-800 align-middle text-sm leading-none font-bold text-gray-950 dark:text-white select-none">
         <Avatar.Image
           src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
           width="48"
@@ -168,14 +103,20 @@ function ProfilePanel() {
           className="h-full w-full object-cover"
         />
       </Avatar.Root>
-      <span className="col-start-2 col-end-3 row-start-2 row-end-3 text-sm text-gray-600">
+      <span className="col-start-2 col-end-3 row-start-2 row-end-3 text-sm leading-5 text-gray-600 dark:text-gray-400">
         Pro plan
       </span>
-      <div className="col-start-1 col-end-3 row-start-3 row-end-4 mt-2 flex flex-col gap-2 border-t border-gray-200 pt-2 text-sm">
-        <a href="#" className="text-gray-900 no-underline hover:underline">
+      <div className="col-start-1 col-end-3 row-start-3 row-end-4 mt-2 flex flex-col gap-2 border-t border-gray-950 dark:border-white pt-2 text-sm leading-5">
+        <a
+          href="#"
+          className="text-gray-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+        >
           Profile settings
         </a>
-        <a href="#" className="text-gray-900 no-underline hover:underline">
+        <a
+          href="#"
+          className="text-gray-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+        >
           Log out
         </a>
       </div>
@@ -186,8 +127,8 @@ function ProfilePanel() {
 function ActivityPanel() {
   return (
     <React.Fragment>
-      <Popover.Title className="m-0 text-base font-bold">Activity</Popover.Title>
-      <Popover.Description className="m-0 text-base text-gray-600">
+      <Popover.Title className="m-0 text-sm font-bold leading-5">Activity</Popover.Title>
+      <Popover.Description className="m-0 text-sm leading-5 text-gray-600 dark:text-gray-400">
         Nothing interesting happened recently.
       </Popover.Description>
     </React.Fragment>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/css-modules/index.tsx
index 630a49084b0..3c80ef85a1c 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/css-modules/index.tsx
@@ -16,9 +16,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
         <Popover.Portal>
           <Popover.Positioner sideOffset={8}>
             <Popover.Popup className={styles.Popup}>
-              <Popover.Arrow className={styles.Arrow}>
-                <ArrowSvg />
-              </Popover.Arrow>
+              <Popover.Arrow className={styles.Arrow} />
               <Popover.Title className={styles.Title}>Notifications</Popover.Title>
               <Popover.Description className={styles.Description}>
                 You are all caught up. Good job!
@@ -31,25 +29,6 @@ export default function PopoverDetachedTriggersSimpleDemo() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
 function BellIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg fill="currentColor" width="20" height="20" viewBox="0 0 16 16" {...props}>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
index ce21f0af0d6..afe2c008639 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { Popover } from '@base-ui/react/popover';
-import { ArrowSvg, BellIcon } from '../../icons-tw';
+import { BellIcon } from '../../icons-tw';
 
 const demoPopover = Popover.createHandle();
 
@@ -9,7 +9,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
       <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"
+        className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
       >
         <BellIcon aria-label="Notifications" />
@@ -18,12 +18,10 @@ export default function PopoverDetachedTriggersSimpleDemo() {
       <Popover.Root handle={demoPopover}>
         <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-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>
-              <Popover.Title className="text-base font-bold">Notifications</Popover.Title>
-              <Popover.Description className="text-base text-gray-600">
+            <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+              <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+              <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
+              <Popover.Description className="text-sm text-gray-600 dark:text-gray-400">
                 You are all caught up. Good job!
               </Popover.Description>
             </Popover.Popup>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/css-modules/index.tsx
index d1dd7dbd75d..af144e3e555 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/css-modules/index.tsx
@@ -11,9 +11,7 @@ export default function ExamplePopover() {
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
           <Popover.Popup className={styles.Popup}>
-            <Popover.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </Popover.Arrow>
+            <Popover.Arrow className={styles.Arrow} />
             <Popover.Title className={styles.Title}>Notifications</Popover.Title>
             <Popover.Description className={styles.Description}>
               You are all caught up. Good job!
@@ -25,25 +23,6 @@ export default function ExamplePopover() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
 function BellIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg fill="currentColor" width="20" height="20" viewBox="0 0 16 16" {...props}>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
index 3957e36f0f2..2ca6e0f864a 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
@@ -1,20 +1,18 @@
 import { Popover } from '@base-ui/react/popover';
-import { BellIcon, ArrowSvg } from '../../icons-tw';
+import { BellIcon } from '../../icons-tw';
 
 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 font-normal">
+      <Popover.Trigger className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
         <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-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>
-            <Popover.Title className="text-base font-bold">Notifications</Popover.Title>
-            <Popover.Description className="text-base text-gray-600">
+          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+            <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+            <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
+            <Popover.Description className="text-sm text-gray-600 dark:text-gray-400">
               You are all caught up. Good job!
             </Popover.Description>
           </Popover.Popup>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/icons-tw.tsx b/docs/src/app/(docs)/react/components/popover/demos/icons-tw.tsx
index 7cd2cde565d..66c9d3efe2c 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/icons-tw.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/icons-tw.tsx
@@ -1,24 +1,5 @@
 import * as React from 'react';
 
-export function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
-
 export function BellIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg fill="currentColor" width="20" height="20" viewBox="0 0 16 16" {...props}>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/css-modules/index.tsx
index 18306bcdbe9..f182e66a617 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/css-modules/index.tsx
@@ -11,9 +11,7 @@ export default function ExamplePopover() {
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
           <Popover.Popup className={styles.Popup}>
-            <Popover.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </Popover.Arrow>
+            <Popover.Arrow className={styles.Arrow} />
             <Popover.Title className={styles.Title}>Notifications</Popover.Title>
             <Popover.Description className={styles.Description}>
               You are all caught up. Good job!
@@ -25,25 +23,6 @@ export default function ExamplePopover() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
 function BellIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg fill="currentColor" width="20" height="20" viewBox="0 0 16 16" {...props}>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
index 11d55136593..393097da47d 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
@@ -1,23 +1,21 @@
 import { Popover } from '@base-ui/react/popover';
-import { BellIcon, ArrowSvg } from '../../icons-tw';
+import { BellIcon } from '../../icons-tw';
 
 export default function ExamplePopover() {
   return (
     <Popover.Root>
       <Popover.Trigger
         openOnHover
-        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"
+        className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
       >
         <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-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>
-            <Popover.Title className="text-base font-bold">Notifications</Popover.Title>
-            <Popover.Description className="text-base text-gray-600">
+          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+            <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+            <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
+            <Popover.Description className="text-sm text-gray-600 dark:text-gray-400">
               You are all caught up. Good job!
             </Popover.Description>
           </Popover.Popup>

From 57fe784bf12d12ae44bb7442311ead747e4b108f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 24 Apr 2026 10:48:41 +0200
Subject: [PATCH 046/257] Tweak textarea in Dialog demo

---
 .../close-confirmation/css-modules/index.module.css      | 9 +++++----
 .../dialog/demos/close-confirmation/tailwind/index.tsx   | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
index 3b035f5ecea..4f6916817c9 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
@@ -112,29 +112,30 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  margin-top: 1rem;
+  margin-top: 0.25rem;
 }
 
 .Textarea {
   box-sizing: border-box;
   padding-block: 0.5rem;
-  padding-inline: 0.75rem;
+  padding-inline: 0.5rem;
   margin: 0;
   border: 1px solid light-dark(var(--color-gray-950), white);
   width: 100%;
   min-height: 8rem;
   font-family: inherit;
   font-size: 0.875rem;
+  font-weight: 400;
   line-height: 1.25rem;
   background-color: transparent;
   color: light-dark(var(--color-gray-950), white);
 
   &::placeholder {
-    color: light-dark(var(--color-gray-600), var(--color-gray-400));
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
index 2c4053a5951..7a332857e79 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
@@ -34,7 +34,7 @@ export default function ExampleDialog() {
             New tweet
           </Dialog.Title>
           <form
-            className="mt-4 flex flex-col gap-4"
+            className="mt-1 flex flex-col gap-4"
             onSubmit={(event) => {
               event.preventDefault();
               // Close the dialog when submitting
@@ -44,7 +44,7 @@ export default function ExampleDialog() {
             <textarea
               aria-labelledby={titleId}
               required
-              className="min-h-32 w-full border border-gray-950 dark:border-white bg-transparent px-3 py-2 text-sm leading-5 text-gray-950 dark:text-white placeholder:text-gray-600 dark:placeholder:text-gray-400 focus:outline-2 focus:outline-offset-2 focus:outline-blue-800"
+              className="min-h-32 w-full border border-gray-950 dark:border-white bg-transparent px-2 py-2 text-sm font-normal leading-5 text-gray-950 dark:text-white placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800"
               placeholder="What’s on your mind?"
               value={textareaValue}
               onChange={(event) => setTextareaValue(event.target.value)}

From d76bce8a5261e3d1ea8296d7bf660246ce9cfed2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 24 Apr 2026 10:53:39 +0200
Subject: [PATCH 047/257] Input: change outline offset

---
 .../components/input/demos/hero/css-modules/index.module.css    | 2 +-
 .../(docs)/react/components/input/demos/hero/tailwind/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
index fb75e55475a..49e80c39902 100644
--- a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
@@ -28,6 +28,6 @@
 
   &:focus {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
index 85fe2c57609..6c5a1943573 100644
--- a/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleInput() {
       Name
       <Input
         placeholder="e.g. Colm Tuite"
-        className="h-8 w-40 border border-gray-950 dark:border-white bg-transparent px-2 text-sm font-normal text-gray-950 dark:text-white placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:outline-2 focus:outline-offset-2 focus:outline-blue-800"
+        className="h-8 w-40 border border-gray-950 dark:border-white bg-transparent px-2 text-sm font-normal text-gray-950 dark:text-white placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800"
       />
     </label>
   );

From feab37e23635b8e40758281423860b33c3588bc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 24 Apr 2026 11:07:12 +0200
Subject: [PATCH 048/257] Switch: fix outline color

---
 .../components/switch/demos/hero/css-modules/index.module.css  | 3 +--
 .../react/components/switch/demos/hero/tailwind/index.tsx      | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
index e31e5d7fcae..5c31cc6e0f2 100644
--- a/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
@@ -23,8 +23,7 @@
   }
 
   &:focus-visible {
-    outline-width: 2px;
-    outline-style: solid;
+    outline: 2px solid var(--color-blue-800);
     outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
index a9725c6f3a9..a409168a8c3 100644
--- a/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
@@ -5,7 +5,7 @@ export default function ExampleSwitch() {
     <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
       <Switch.Root
         defaultChecked
-        className="box-border flex h-5 w-9 shrink-0 border border-gray-900 bg-gray-50 p-0.5 dark:border-gray-50 dark:bg-gray-900 data-checked:bg-gray-900 dark:data-checked:bg-gray-50 focus-visible:outline-2 focus-visible:outline-offset-2"
+        className="box-border flex h-5 w-9 shrink-0 border border-gray-900 bg-gray-50 p-0.5 dark:border-gray-50 dark:bg-gray-900 data-checked:bg-gray-900 dark:data-checked:bg-gray-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
       >
         <Switch.Thumb className="size-3.5 bg-gray-900 transition-transform duration-150 data-checked:translate-x-4 data-checked:bg-gray-50 dark:bg-gray-50 dark:data-checked:bg-gray-900" />
       </Switch.Root>

From 781f720980b65db872267b0f759286f69720ee0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 24 Apr 2026 11:23:21 +0200
Subject: [PATCH 049/257] All: remove outline offset

---
 .../components/alert-dialog/demos/_index.module.css    |  2 +-
 .../detached-triggers-controlled/tailwind/index.tsx    |  2 +-
 .../demos/detached-triggers-simple/tailwind/index.tsx  |  2 +-
 .../demos/hero/css-modules/index.module.css            |  2 +-
 .../alert-dialog/demos/hero/tailwind/index.tsx         |  2 +-
 .../button/demos/hero/css-modules/index.module.css     |  2 +-
 .../components/button/demos/hero/tailwind/index.tsx    |  2 +-
 .../button/demos/loading/css-modules/index.module.css  |  2 +-
 .../components/button/demos/loading/tailwind/index.tsx |  2 +-
 .../demos/hero/css-modules/index.module.css            |  2 +-
 .../collapsible/demos/hero/tailwind/index.tsx          |  2 +-
 .../react/components/dialog/demos/_index.module.css    |  2 +-
 .../close-confirmation/css-modules/index.module.css    |  2 +-
 .../dialog/demos/close-confirmation/tailwind/index.tsx | 10 +++++-----
 .../detached-triggers-controlled/tailwind/index.tsx    | 10 +++++-----
 .../demos/detached-triggers-simple/tailwind/index.tsx  |  4 ++--
 .../dialog/demos/hero/css-modules/index.module.css     |  2 +-
 .../components/dialog/demos/hero/tailwind/index.tsx    |  4 ++--
 .../demos/inside-scroll/css-modules/index.module.css   |  2 +-
 .../dialog/demos/inside-scroll/tailwind/index.tsx      |  4 ++--
 .../dialog/demos/nested/css-modules/index.module.css   |  4 ++--
 .../components/dialog/demos/nested/tailwind/index.tsx  |  8 ++++----
 .../demos/outside-scroll/css-modules/index.module.css  |  4 ++--
 .../dialog/demos/outside-scroll/tailwind/index.tsx     |  4 ++--
 .../demos/uncontained/css-modules/index.module.css     |  6 +++---
 .../dialog/demos/uncontained/tailwind/index.tsx        |  4 ++--
 .../react/components/popover/demos/_index.module.css   |  4 ++--
 .../detached-triggers-controlled/tailwind/index.tsx    |  8 ++++----
 .../css-modules/index.module.css                       |  2 +-
 .../demos/detached-triggers-full/tailwind/index.tsx    |  6 +++---
 .../demos/detached-triggers-simple/tailwind/index.tsx  |  2 +-
 .../components/popover/demos/hero/tailwind/index.tsx   |  2 +-
 .../popover/demos/open-on-hover/tailwind/index.tsx     |  2 +-
 .../select/demos/grouped/css-modules/index.module.css  |  2 +-
 .../components/select/demos/grouped/tailwind/index.tsx |  2 +-
 .../select/demos/hero/css-modules/index.module.css     |  2 +-
 .../components/select/demos/hero/tailwind/index.tsx    |  2 +-
 .../select/demos/multiple/css-modules/index.module.css |  2 +-
 .../select/demos/multiple/tailwind/index.tsx           |  2 +-
 .../demos/object-values/css-modules/index.module.css   |  2 +-
 .../select/demos/object-values/tailwind/index.tsx      |  2 +-
 .../demos/hero/css-modules/index.module.css            |  2 +-
 .../toggle-group/demos/hero/tailwind/index.tsx         |  6 +++---
 .../demos/multiple/css-modules/index.module.css        |  2 +-
 .../toggle-group/demos/multiple/tailwind/index.tsx     |  6 +++---
 .../toggle/demos/hero/css-modules/index.module.css     |  2 +-
 .../components/toggle/demos/hero/tailwind/index.tsx    |  2 +-
 .../css-modules/index.module.css                       |  4 ++--
 48 files changed, 79 insertions(+), 79 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
index 14e98498c17..8241ec06a82 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
@@ -23,7 +23,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 9f2729e9439..8a76049c13e 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -7,7 +7,7 @@ type AlertPayload = { message: string };
 const demoAlertDialog = AlertDialog.createHandle<AlertPayload>();
 
 const buttonClasses =
-  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800';
+  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
index 8011ad55597..e49c6f428ed 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { AlertDialog } from '@base-ui/react/alert-dialog';
 const demoAlertDialog = AlertDialog.createHandle();
 
 const buttonClasses =
-  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800';
+  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
index 4856ab96fe0..de73b7e018c 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
@@ -27,7 +27,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
index e5bf634fd6d..8a18b68ddaa 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
@@ -1,7 +1,7 @@
 import { AlertDialog } from '@base-ui/react/alert-dialog';
 
 const buttonClasses =
-  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800';
+  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
index 7af6a6bcf06..6b124713f8b 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
@@ -28,6 +28,6 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
index 74d4ca02c93..fb222d78ed7 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Button } from '@base-ui/react/button';
 
 export default function ExampleButton() {
   return (
-    <Button className="flex items-center justify-center h-8 px-3 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:data-disabled:text-gray-400">
+    <Button className="flex items-center justify-center h-8 px-3 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:data-disabled:text-gray-400">
       Submit
     </Button>
   );
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
index 8d6c95ba07d..fab5ee5c912 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
@@ -24,7 +24,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 
   &[data-disabled] {
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
index 49a97f090b6..2865e1a314d 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleButton() {
 
   return (
     <Button
-      className="flex items-center justify-center h-8 px-3 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:data-disabled:text-gray-400"
+      className="flex items-center justify-center h-8 px-3 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:data-disabled:text-gray-400"
       disabled={loading}
       focusableWhenDisabled
       onClick={() => {
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
index 6db19d14fc1..ac31e2d140e 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
@@ -40,7 +40,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 
   &[data-panel-open] .Icon {
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
index 71efd7dfca4..3bb93120857 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Collapsible } from '@base-ui/react/collapsible';
 export default function ExampleCollapsible() {
   return (
     <Collapsible.Root className="flex min-h-36 w-56 flex-col justify-center text-gray-950 dark:text-white">
-      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none bg-gray-200 px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700">
+      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none bg-gray-200 px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700">
         Recovery keys
         <ChevronIcon className="size-3 transition-transform duration-100 ease-out group-data-panel-open:rotate-90" />
       </Collapsible.Trigger>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
index 2455d790a0c..7e10cb11ef7 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
@@ -23,7 +23,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
index 4f6916817c9..a3cb89b852c 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
@@ -23,7 +23,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
index 7a332857e79..4c6c3a5e992 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleDialog() {
         }
       }}
     >
-      <Dialog.Trigger className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Tweet
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -50,12 +50,12 @@ export default function ExampleDialog() {
               onChange={(event) => setTextareaValue(event.target.value)}
             />
             <div className="flex justify-end gap-3">
-              <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Cancel
               </Dialog.Close>
               <button
                 type="submit"
-                className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+                className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
               >
                 Tweet
               </button>
@@ -73,12 +73,12 @@ export default function ExampleDialog() {
               Your tweet will be lost.
             </AlertDialog.Description>
             <div className="flex justify-end gap-3">
-              <AlertDialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
+              <AlertDialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Go back
               </AlertDialog.Close>
               <button
                 type="button"
-                className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+                className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
                 onClick={() => {
                   setConfirmationOpen(false);
                   setDialogOpen(false);
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 5b3d9b73488..26cbb8bfe40 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -17,7 +17,7 @@ export default function DialogDetachedTriggersControlledDemo() {
     <React.Fragment>
       <div className="flex flex-wrap gap-2 justify-center">
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoDialog}
           id="trigger-1"
           payload={1}
@@ -26,7 +26,7 @@ export default function DialogDetachedTriggersControlledDemo() {
         </Dialog.Trigger>
 
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoDialog}
           id="trigger-2"
           payload={2}
@@ -35,7 +35,7 @@ export default function DialogDetachedTriggersControlledDemo() {
         </Dialog.Trigger>
 
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoDialog}
           id="trigger-3"
           payload={3}
@@ -45,7 +45,7 @@ export default function DialogDetachedTriggersControlledDemo() {
 
         <button
           type="button"
-          className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
@@ -70,7 +70,7 @@ export default function DialogDetachedTriggersControlledDemo() {
               )}
 
               <div className="flex justify-end gap-3 mt-4">
-                <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
+                <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                   Close
                 </Dialog.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
index 811fe547c6c..822daebfa5b 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function DialogDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
       <Dialog.Trigger
-        className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoDialog}
       >
         View notifications
@@ -23,7 +23,7 @@ export default function DialogDetachedTriggersSimpleDemo() {
               You are all caught up. Good job!
             </Dialog.Description>
             <div className="flex justify-end gap-3 mt-4">
-              <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Close
               </Dialog.Close>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
index 68ecd7d49b8..9d018e34011 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
@@ -23,7 +23,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
index a281ef8857f..d3f9812dcc4 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -14,7 +14,7 @@ export default function ExampleDialog() {
             You are all caught up. Good job!
           </Dialog.Description>
           <div className="flex justify-end gap-3 mt-4">
-            <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
+            <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
               Close
             </Dialog.Close>
           </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
index b8924ebacbe..0cde3aa803c 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
@@ -23,7 +23,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
index 9cf2fd95862..8bafe0df66c 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function InsideScrollDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -36,7 +36,7 @@ export default function InsideScrollDialog() {
               </ScrollArea.Scrollbar>
             </ScrollArea.Root>
             <div className="mt-4 flex justify-end gap-3">
-              <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Close
               </Dialog.Close>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
index 38e961e37b2..4f105c0f57f 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
@@ -23,7 +23,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
 
@@ -52,7 +52,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
index da03c16ba70..55f783f63b8 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -16,7 +16,7 @@ export default function ExampleDialog() {
           <div className="flex items-center justify-end gap-3 mt-4">
             <div className="mr-auto flex">
               <Dialog.Root>
-                <Dialog.Trigger className="flex h-8 items-center justify-center bg-transparent px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-200 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
+                <Dialog.Trigger className="flex h-8 items-center justify-center bg-transparent px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-200 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                   Customize
                 </Dialog.Trigger>
                 <Dialog.Portal>
@@ -28,7 +28,7 @@ export default function ExampleDialog() {
                       Review your settings here.
                     </Dialog.Description>
                     <div className="flex items-center justify-end gap-3 mt-4">
-                      <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
+                      <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                         Close
                       </Dialog.Close>
                     </div>
@@ -37,7 +37,7 @@ export default function ExampleDialog() {
               </Dialog.Root>
             </div>
 
-            <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
+            <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
               Close
             </Dialog.Close>
           </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
index 9262a15ebac..679e9be5b36 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
@@ -23,7 +23,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
 
@@ -184,7 +184,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index 59901508fe3..0083e228b5f 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function OutsideScrollDialog() {
   const popupRef = React.useRef<HTMLDivElement>(null);
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -30,7 +30,7 @@ export default function OutsideScrollDialog() {
                     </Dialog.Title>
                     <Dialog.Close
                       aria-label="Close"
-                      className="relative top-[-0.25rem] right-[-0.25rem] flex items-center justify-center w-7 h-7 bg-transparent text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-950 dark:hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+                      className="relative top-[-0.25rem] right-[-0.25rem] flex items-center justify-center w-7 h-7 bg-transparent text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-950 dark:hover:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
                     >
                       <XIcon className="h-4 w-4" />
                     </Dialog.Close>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
index a4decf9005c..af16429b73f 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
@@ -23,7 +23,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
 
@@ -118,8 +118,8 @@
   color: white;
 
   &:focus-visible {
-    outline: 2px solid white;
-    outline-offset: 2px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 
   @media (hover: hover) {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
index 094f168b033..93454a19f6c 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleUncontainedDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -11,7 +11,7 @@ export default function ExampleUncontainedDialog() {
         <Dialog.Viewport className="fixed inset-0 grid place-items-center px-4 py-10 xl:py-6">
           <Dialog.Popup className="group/popup flex h-full w-full justify-center pointer-events-none transition-opacity duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0">
             <Dialog.Close
-              className="absolute right-3 top-2 flex h-7 w-7 items-center justify-center bg-transparent text-white hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white xl:right-3 xl:top-3 xl:h-10 xl:w-10 pointer-events-auto"
+              className="absolute right-3 top-2 flex h-7 w-7 items-center justify-center bg-transparent text-white hover:bg-white/10 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 xl:right-3 xl:top-3 xl:h-10 xl:w-10 pointer-events-auto"
               aria-label="Close"
             >
               <XIcon className="h-6 w-6" />
diff --git a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
index ae8ef078f1d..96bc420bb38 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
@@ -32,7 +32,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
 
@@ -163,6 +163,6 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
index e4922857569..72e3b7e4ad8 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
     <React.Fragment>
       <div className="flex gap-2 flex-wrap justify-center">
         <Popover.Trigger
-          className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoPopover}
           id="trigger-1"
         >
@@ -26,7 +26,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
         </Popover.Trigger>
 
         <Popover.Trigger
-          className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoPopover}
           id="trigger-2"
         >
@@ -34,7 +34,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
         </Popover.Trigger>
 
         <Popover.Trigger
-          className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoPopover}
           id="trigger-3"
         >
@@ -43,7 +43,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
 
         <button
           type="button"
-          className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
index 2507cbc7be8..5a94e3956a0 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
@@ -32,7 +32,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
index 7fe05f32167..f8aae6149b8 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
@@ -10,7 +10,7 @@ export default function PopoverDetachedTriggersFullDemo() {
   return (
     <div className="flex gap-2">
       <Popover.Trigger
-        className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
         payload={NotificationsPanel}
       >
@@ -18,7 +18,7 @@ export default function PopoverDetachedTriggersFullDemo() {
       </Popover.Trigger>
 
       <Popover.Trigger
-        className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
         payload={ActivityPanel}
       >
@@ -26,7 +26,7 @@ export default function PopoverDetachedTriggersFullDemo() {
       </Popover.Trigger>
 
       <Popover.Trigger
-        className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
         payload={ProfilePanel}
       >
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
index afe2c008639..d7b070be3eb 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
       <Popover.Trigger
-        className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
       >
         <BellIcon aria-label="Notifications" />
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
index 2ca6e0f864a..de8784597cd 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { BellIcon } from '../../icons-tw';
 export default function ExamplePopover() {
   return (
     <Popover.Root>
-      <Popover.Trigger className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800">
+      <Popover.Trigger className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         <BellIcon aria-label="Notifications" />
       </Popover.Trigger>
       <Popover.Portal>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
index 393097da47d..b0afa233e01 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExamplePopover() {
     <Popover.Root>
       <Popover.Trigger
         openOnHover
-        className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         <BellIcon aria-label="Notifications" />
       </Popover.Trigger>
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index a2fb29eba01..7f8ffa8be72 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -50,7 +50,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index 18c01ae2a53..4992f7d1c99 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleSelectGrouped() {
         Produce
       </Field.Label>
       <Select.Root items={groupedProduce}>
-        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 bg-gray-200 text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-300 font-normal dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:data-[popup-open]:bg-gray-700">
+        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 bg-gray-200 text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-300 font-normal dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:data-[popup-open]:bg-gray-700">
           <Select.Value
             className="data-[placeholder]:text-gray-600 dark:data-[placeholder]:text-gray-400"
             placeholder="Select produce"
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
index 6d19eb34862..334c27bc5b9 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
@@ -50,7 +50,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index ffce17a1612..8dd0e45f75a 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function ExampleSelect() {
         <Select.Label className="cursor-default text-sm leading-5 font-bold text-gray-950 dark:text-white">
           Apple
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 bg-gray-200 text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-300 font-normal dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:data-[popup-open]:bg-gray-700">
+        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 bg-gray-200 text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-300 font-normal dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:data-[popup-open]:bg-gray-700">
           <Select.Value
             className="data-[placeholder]:text-gray-600 dark:data-[placeholder]:text-gray-400"
             placeholder="Select apple"
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
index ce76b5326cf..5464595d691 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
@@ -50,7 +50,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index 1a96fb58e0d..b33ed11ace3 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -36,7 +36,7 @@ export default function MultiSelectExample() {
         <Select.Label className="cursor-default text-sm leading-5 font-bold text-gray-950 dark:text-white">
           Languages
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 bg-gray-200 text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-300 font-normal dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:data-[popup-open]:bg-gray-700">
+        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 bg-gray-200 text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-300 font-normal dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:data-[popup-open]:bg-gray-700">
           <Select.Value className="data-[placeholder]:text-gray-600 dark:data-[placeholder]:text-gray-400">
             {renderValue}
           </Select.Value>
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
index 6bfce978b1e..a1b067c4628 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
@@ -47,7 +47,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index 0e12488eb7c..84416946a33 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ObjectValueSelect() {
         <Select.Label className="cursor-default text-sm leading-5 font-bold text-gray-950 dark:text-white">
           Shipping method
         </Select.Label>
-        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-start justify-between gap-3 pl-3 pr-2 py-1.5 text-sm leading-5 bg-gray-200 text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-300 font-normal dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:data-[popup-open]:bg-gray-700">
+        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-start justify-between gap-3 pl-3 pr-2 py-1.5 text-sm leading-5 bg-gray-200 text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-300 font-normal dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:data-[popup-open]:bg-gray-700">
           <Select.Value>
             {(method: ShippingMethod) => (
               <span className="flex flex-col items-start gap-0.5">
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
index 1b3d90a6089..58ba8408c28 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
@@ -33,7 +33,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
index f55f82cdfca..5e091232bc8 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/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 border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
       >
         <AlignLeftIcon className="size-4" />
       </Toggle>
       <Toggle
         aria-label="Align center"
         value="center"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
       >
         <AlignCenterIcon className="size-4" />
       </Toggle>
       <Toggle
         aria-label="Align right"
         value="right"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
       >
         <AlignRightIcon className="size-4" />
       </Toggle>
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
index 1b3d90a6089..58ba8408c28 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
@@ -33,7 +33,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
index da97a7d792f..f0cd635d782 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
@@ -12,21 +12,21 @@ export default function ExampleToggleGroupMultiple() {
       <Toggle
         aria-label="Bold"
         value="bold"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
       >
         <BoldIcon />
       </Toggle>
       <Toggle
         aria-label="Italic"
         value="italic"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
       >
         <ItalicIcon />
       </Toggle>
       <Toggle
         aria-label="Underline"
         value="underline"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
       >
         <UnderlineIcon />
       </Toggle>
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
index 4a0dc5d5e9a..e7f34ce3741 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
@@ -25,7 +25,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
index 0d6899c0b79..6955e69b777 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleToggle() {
   return (
     <Toggle
       aria-label="Favorite"
-      className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-pressed:text-gray-950 dark:data-pressed:text-white"
+      className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-pressed:text-gray-950 dark:data-pressed:text-white"
       render={(props, state) => {
         if (state.pressed) {
           return (
diff --git a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
index f30245b8d0d..de2bddec669 100644
--- a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
@@ -39,7 +39,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }
 
@@ -73,6 +73,6 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 }

From 969ac5dadf339bf9f705935a61cb87c93d2a3e21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 24 Apr 2026 11:24:47 +0200
Subject: [PATCH 050/257] Collapsible: fix trigger's padding

---
 .../react/components/collapsible/demos/hero/tailwind/index.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
index 3bb93120857..707f48372ce 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Collapsible } from '@base-ui/react/collapsible';
 export default function ExampleCollapsible() {
   return (
     <Collapsible.Root className="flex min-h-36 w-56 flex-col justify-center text-gray-950 dark:text-white">
-      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none bg-gray-200 px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700">
+      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none bg-gray-200 pl-3 pr-2 text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700">
         Recovery keys
         <ChevronIcon className="size-3 transition-transform duration-100 ease-out group-data-panel-open:rotate-90" />
       </Collapsible.Trigger>

From 5db16978af7bbc4fe6ba787146b29fe76c5869c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 24 Apr 2026 11:39:27 +0200
Subject: [PATCH 051/257] ScrollArea: adjustements

---
 .../scroll-area/demos/both/css-modules/index.module.css       | 4 ++--
 .../components/scroll-area/demos/both/tailwind/index.tsx      | 4 ++--
 .../scroll-area/demos/hero/css-modules/index.module.css       | 4 ++--
 .../components/scroll-area/demos/hero/tailwind/index.tsx      | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
index a2ad58df1ab..7fd0f912ab2 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
@@ -6,9 +6,9 @@
 }
 
 .Viewport {
+  box-sizing: border-box;
   height: 100%;
-  outline: 1px solid light-dark(var(--color-gray-950), white);
-  outline-offset: -1px;
+  border: 1px solid light-dark(var(--color-gray-950), white);
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
index 74b4c0efcef..e66703ef228 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
@@ -3,8 +3,8 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function ExampleScrollAreaBoth() {
   return (
     <ScrollArea.Root className="h-80 w-80 max-w-[calc(100vw-8rem)]">
-      <ScrollArea.Viewport className="h-full outline-1 -outline-offset-1 outline-gray-950 dark:outline-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
-        <ScrollArea.Content className="p-5">
+      <ScrollArea.Viewport className="box-border h-full border border-gray-950 dark:border-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <ScrollArea.Content className="pt-3 pr-6 pb-6 pl-3">
           <ul className="m-0 grid list-none grid-cols-[repeat(10,6.25rem)] grid-rows-[repeat(10,6.25rem)] gap-3 p-0">
             {Array.from({ length: 100 }, (_, i) => (
               <li
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
index 52ce51e78af..4590ee89bf3 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
@@ -7,9 +7,9 @@
 }
 
 .Viewport {
+  box-sizing: border-box;
   height: 100%;
-  outline: 1px solid light-dark(var(--color-gray-950), white);
-  outline-offset: -1px;
+  border: 1px solid light-dark(var(--color-gray-950), white);
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
index 0fd5ff8877a..cf8575ab478 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function ExampleScrollArea() {
   return (
     <ScrollArea.Root className="h-[8.5rem] w-96 max-w-[calc(100vw-8rem)] bg-white dark:bg-gray-950">
-      <ScrollArea.Viewport className="h-full outline-1 -outline-offset-1 outline-gray-950 dark:outline-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <ScrollArea.Viewport className="box-border h-full border border-gray-950 dark:border-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         <ScrollArea.Content className="flex flex-col gap-4 py-2 pr-5 pl-3 text-sm leading-[1.375rem] text-gray-950 dark:text-white">
           <p>
             Vernacular architecture is building done outside any academic tradition, and without

From 5da93f53e6916755385525542285643e84dae6c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 24 Apr 2026 17:10:54 +0200
Subject: [PATCH 052/257] Dialog: remove unnecessary styles

---
 .../dialog/demos/hero/css-modules/index.module.css       | 2 --
 .../components/dialog/demos/hero/tailwind/index.tsx      | 4 ++--
 .../demos/outside-scroll/css-modules/index.module.css    | 9 +++++----
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
index 9d018e34011..c4e0a0f60f9 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
@@ -34,7 +34,6 @@
   background-color: black;
   opacity: 0.2;
   transition: opacity 150ms;
-  touch-action: none;
 
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
@@ -66,7 +65,6 @@
   color: light-dark(var(--color-gray-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition: all 150ms;
-  touch-action: none;
 
   @media (prefers-color-scheme: dark) {
     box-shadow: none;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
index d3f9812dcc4..13684b5b086 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
@@ -7,8 +7,8 @@ export default function ExampleDialog() {
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 touch-none data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
-        <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 touch-none data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+        <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
           <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
           <Dialog.Description className="text-sm text-gray-600 dark:text-gray-400">
             You are all caught up. Good job!
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
index 679e9be5b36..62fd319d9ca 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
@@ -36,14 +36,15 @@
   backdrop-filter: blur(1.5px);
   background-image: linear-gradient(to bottom, rgb(0 0 0 / 5%) 0, rgb(0 0 0 / 10%) 50%);
 
-  @media (prefers-color-scheme: dark) {
-    opacity: 0.7;
-  }
-
+  /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
     position: absolute;
   }
 
+  @media (prefers-color-scheme: dark) {
+    opacity: 0.7;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     backdrop-filter: blur(0);

From 4cedfbd3e88db65d50dd480f2c9c020204268120 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 24 Apr 2026 19:06:32 +0200
Subject: [PATCH 053/257] Dialog / AlertDialog: standardize backdrops

---
 .../alert-dialog/demos/_index.module.css      |  4 +-
 .../tailwind/index.tsx                        |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../demos/hero/css-modules/index.module.css   |  4 +-
 .../demos/hero/tailwind/index.tsx             |  2 +-
 .../components/dialog/demos/_index.module.css |  2 +-
 .../css-modules/index.module.css              |  2 +-
 .../close-confirmation/tailwind/index.tsx     |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../demos/hero/css-modules/index.module.css   |  2 +-
 .../dialog/demos/hero/tailwind/index.tsx      |  2 +-
 .../css-modules/index.module.css              |  2 +-
 .../demos/inside-scroll/tailwind/index.tsx    |  6 +--
 .../demos/nested/css-modules/index.module.css |  2 +-
 .../dialog/demos/nested/tailwind/index.tsx    |  2 +-
 .../css-modules/index.module.css              | 10 ++--
 .../demos/outside-scroll/tailwind/index.tsx   |  6 +--
 .../uncontained/css-modules/index.module.css  | 52 +++++++++++--------
 .../demos/uncontained/tailwind/index.tsx      |  8 +--
 20 files changed, 59 insertions(+), 57 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
index 8241ec06a82..e38ec3fd79d 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
@@ -36,7 +36,7 @@
   min-height: 100dvh;
   inset: 0;
   background-color: black;
-  opacity: 0.08;
+  opacity: 0.2;
   transition: opacity 150ms;
 
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
@@ -45,7 +45,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    opacity: 0.7;
+    opacity: 0.5;
   }
 
   &[data-starting-style],
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 8a76049c13e..228861e82ad 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -70,7 +70,7 @@ export default function AlertDialogDetachedTriggersControlledDemo() {
       >
         {({ payload }) => (
           <AlertDialog.Portal>
-            <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-[0.08] transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+            <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
             <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
               <AlertDialog.Title className="text-sm font-bold">
                 {payload?.message ?? 'Are you sure?'}
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
index e49c6f428ed..4fd52109b2b 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function AlertDialogDetachedTriggersSimpleDemo() {
 
       <AlertDialog.Root handle={demoAlertDialog}>
         <AlertDialog.Portal>
-          <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-[0.08] transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+          <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
           <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
             <AlertDialog.Title className="text-sm font-bold">Discard draft?</AlertDialog.Title>
             <AlertDialog.Description className="text-sm text-gray-600 dark:text-gray-400">
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
index de73b7e018c..252567ba577 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
@@ -36,7 +36,7 @@
   min-height: 100dvh;
   inset: 0;
   background-color: black;
-  opacity: 0.08;
+  opacity: 0.2;
   transition: opacity 150ms;
 
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
@@ -45,7 +45,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    opacity: 0.7;
+    opacity: 0.5;
   }
 
   &[data-starting-style],
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
index 8a18b68ddaa..e0b9f1e8842 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
@@ -10,7 +10,7 @@ export default function ExampleAlertDialog() {
     <AlertDialog.Root>
       <AlertDialog.Trigger className={dangerButtonClasses}>Discard draft</AlertDialog.Trigger>
       <AlertDialog.Portal>
-        <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-[0.08] transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+        <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
         <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
           <AlertDialog.Title className="text-sm font-bold">Discard draft?</AlertDialog.Title>
           <AlertDialog.Description className="text-sm text-gray-600 dark:text-gray-400">
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
index 7e10cb11ef7..f3fd7e1b6d5 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
@@ -41,7 +41,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    opacity: 0.7;
+    opacity: 0.5;
   }
 
   &[data-starting-style],
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
index a3cb89b852c..8ccda7007ec 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
@@ -41,7 +41,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    opacity: 0.7;
+    opacity: 0.5;
   }
 
   &[data-starting-style],
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
index 4c6c3a5e992..b6ab0fc114b 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
@@ -28,7 +28,7 @@ export default function ExampleDialog() {
         Tweet
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Popup className="fixed top-[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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
           <Dialog.Title id={titleId} className="text-sm font-bold">
             New tweet
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 26cbb8bfe40..1fee468ec00 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -63,7 +63,7 @@ export default function DialogDetachedTriggersControlledDemo() {
       >
         {({ payload }) => (
           <Dialog.Portal>
-            <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+            <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
             <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
               {payload !== undefined && (
                 <Dialog.Title className="text-sm font-bold">Dialog {payload}</Dialog.Title>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
index 822daebfa5b..0489f3cc7a2 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function DialogDetachedTriggersSimpleDemo() {
 
       <Dialog.Root handle={demoDialog}>
         <Dialog.Portal>
-          <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+          <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
           <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
             <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
             <Dialog.Description className="text-sm text-gray-600 dark:text-gray-400">
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
index c4e0a0f60f9..a843c04bad9 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
@@ -41,7 +41,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    opacity: 0.7;
+    opacity: 0.5;
   }
 
   &[data-starting-style],
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
index 13684b5b086..5f986916c14 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleDialog() {
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
           <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
           <Dialog.Description className="text-sm text-gray-600 dark:text-gray-400">
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
index 0cde3aa803c..69f5a5d1606 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
@@ -39,7 +39,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    opacity: 0.7;
+    opacity: 0.5;
   }
 
   &[data-starting-style],
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
index 8bafe0df66c..b1337641c6b 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function InsideScrollDialog() {
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="fixed inset-0 flex items-center justify-center overflow-hidden py-6 [@media(min-height:600px)]:pb-12 [@media(min-height:600px)]:pt-8">
           <Dialog.Popup className="relative flex w-[min(40rem,calc(100vw-2rem))] max-h-full max-w-full min-h-0 flex-col overflow-hidden bg-white dark:bg-gray-950 p-4 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0">
             <div className="mb-1 flex items-start justify-between gap-3">
@@ -18,8 +18,8 @@ export default function InsideScrollDialog() {
             <Dialog.Description className="m-0 mb-3 text-sm leading-5 text-gray-600 dark:text-gray-400">
               This layout keeps the popup fully on screen while allowing its content to scroll.
             </Dialog.Description>
-            <ScrollArea.Root className="relative flex min-h-0 flex-1 overflow-hidden border-y border-gray-950 dark:border-white">
-              <ScrollArea.Viewport className="flex-1 min-h-0 overflow-y-auto overscroll-contain py-4 pr-4 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+            <ScrollArea.Root className="relative flex min-h-0 flex-auto overflow-hidden border-y border-gray-950 dark:border-white">
+              <ScrollArea.Viewport className="flex-auto min-h-0 overflow-y-auto overscroll-contain py-4 pr-4 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 <ScrollArea.Content className="flex flex-col gap-4">
                   {CONTENT_SECTIONS.map((item) => (
                     <section key={item.title}>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
index 4f105c0f57f..bb2b1101dc0 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
@@ -70,7 +70,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    opacity: 0.7;
+    opacity: 0.5;
   }
 
   &[data-starting-style],
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
index 55f783f63b8..dffd35b163d 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleDialog() {
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Popup className="fixed top-[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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
           <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
           <Dialog.Description className="text-sm text-gray-600 dark:text-gray-400">
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
index 62fd319d9ca..a8c762a5b06 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
@@ -30,21 +30,17 @@
 .Backdrop {
   position: fixed;
   inset: 0;
+  background-color: light-dark(rgb(0 0 0 / 20%), rgb(0 0 0 / 50%));
   transition-duration: 600ms;
   transition-property: -webkit-backdrop-filter, backdrop-filter, opacity;
   transition-timing-function: var(--ease-out-fast);
   backdrop-filter: blur(1.5px);
-  background-image: linear-gradient(to bottom, rgb(0 0 0 / 5%) 0, rgb(0 0 0 / 10%) 50%);
 
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
     position: absolute;
   }
 
-  @media (prefers-color-scheme: dark) {
-    opacity: 0.7;
-  }
-
   &[data-starting-style],
   &[data-ending-style] {
     backdrop-filter: blur(0);
@@ -169,8 +165,8 @@
   right: -0.25rem;
   top: -0.25rem;
   justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
+  width: 2rem;
+  height: 2rem;
   padding: 0;
   border: none;
   background-color: transparent;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index 0083e228b5f..4f88b874cbc 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -11,7 +11,7 @@ export default function OutsideScrollDialog() {
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 bg-[linear-gradient(to_bottom,rgb(0_0_0/5%)_0,rgb(0_0_0/10%)_50%)] opacity-100 transition-[backdrop-filter,opacity] duration-[600ms] ease-[var(--ease-out-fast)] backdrop-blur-[1.5px] data-[starting-style]:backdrop-blur-0 data-[starting-style]:opacity-0 data-[ending-style]:backdrop-blur-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-[350ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Backdrop className="fixed inset-0 bg-black/20 dark:bg-black/50 transition-[backdrop-filter,opacity] duration-[600ms] ease-[var(--ease-out-fast)] backdrop-blur-[1.5px] data-[starting-style]:backdrop-blur-0 data-[starting-style]:opacity-0 data-[ending-style]:backdrop-blur-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-[350ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="group/dialog fixed inset-0">
           <ScrollArea.Root
             style={{ position: undefined }}
@@ -30,7 +30,7 @@ export default function OutsideScrollDialog() {
                     </Dialog.Title>
                     <Dialog.Close
                       aria-label="Close"
-                      className="relative top-[-0.25rem] right-[-0.25rem] flex items-center justify-center w-7 h-7 bg-transparent text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-950 dark:hover:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+                      className="relative top-[-0.25rem] right-[-0.25rem] inline-flex items-center justify-center w-8 h-8 bg-transparent text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-950 dark:hover:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
                     >
                       <XIcon className="h-4 w-4" />
                     </Dialog.Close>
@@ -70,7 +70,7 @@ export default function OutsideScrollDialog() {
                 </Dialog.Popup>
               </ScrollArea.Content>
             </ScrollArea.Viewport>
-            <ScrollArea.Scrollbar className="pointer-events-none flex w-3 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity duration-[250ms] data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-[75ms] data-[scrolling]:delay-[0ms] hover:pointer-events-auto hover:opacity-100 hover:duration-[75ms] hover:delay-[0ms] group-data-[ending-style]/dialog:opacity-0 group-data-[ending-style]/dialog:duration-300">
+            <ScrollArea.Scrollbar className="pointer-events-none flex w-3 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity duration-[250ms] data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-[75ms] data-[scrolling]:delay-[0ms] hover:pointer-events-auto hover:opacity-100 hover:duration-[75ms] hover:delay-[0ms] group-data-[ending-style]/dialog:opacity-0 group-data-[ending-style]/dialog:duration-[250ms]">
               <ScrollArea.Thumb className="w-full bg-gray-950 dark:bg-white" />
             </ScrollArea.Scrollbar>
           </ScrollArea.Root>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
index af16429b73f..51e97d7a9de 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
@@ -31,9 +31,8 @@
   position: fixed;
   min-height: 100dvh;
   inset: 0;
-  background-color: black;
-  opacity: 0.7;
-  backdrop-filter: blur(2px);
+  background-color: light-dark(rgb(0 0 0 / 20%), rgb(0 0 0 / 50%));
+  backdrop-filter: blur(1px);
   transition:
     opacity 150ms,
     backdrop-filter 150ms;
@@ -43,10 +42,6 @@
     position: absolute;
   }
 
-  @media (prefers-color-scheme: dark) {
-    opacity: 0.7;
-  }
-
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -58,7 +53,7 @@
   inset: 0;
   display: grid;
   place-items: center;
-  padding: 2.5rem 1rem;
+  padding: 3rem 1rem;
 
   @media (min-width: 80rem) {
     padding-block: 1.5rem;
@@ -66,9 +61,11 @@
 }
 
 .PopupRoot {
+  position: relative;
   display: flex;
   justify-content: center;
   width: 100%;
+  max-width: 70rem;
   height: 100%;
   transition: opacity 150ms;
   pointer-events: none;
@@ -77,6 +74,10 @@
   &[data-ending-style] {
     opacity: 0;
   }
+
+  @media (min-width: 80rem) {
+    max-width: none;
+  }
 }
 
 .Popup {
@@ -104,34 +105,39 @@
 .Close {
   box-sizing: border-box;
   position: absolute;
-  top: 0.5rem;
-  right: 0.75rem;
+  top: -2.5rem;
+  right: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: auto;
-  width: 1.75rem;
-  height: 1.75rem;
+  width: 2rem;
+  height: 2rem;
   margin: 0;
-  border: none;
-  background-color: transparent;
-  color: white;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
-  &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
-    outline-offset: -2px;
+  @media (prefers-color-scheme: dark) {
+    box-shadow: none;
+  }
+
+  @media (min-width: 80rem) {
+    top: 0;
+    width: 2.5rem;
+    height: 2.5rem;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: rgb(255 255 255 / 0.1);
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  @media (min-width: 80rem) {
-    top: 0.75rem;
-    width: 2.5rem;
-    height: 2.5rem;
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
index 93454a19f6c..1ce725b23c6 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
@@ -7,11 +7,11 @@ export default function ExampleUncontainedDialog() {
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-70 backdrop-blur-[2px] transition-[opacity,backdrop-filter] duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 supports-[-webkit-touch-callout:none]:absolute dark:opacity-70" />
-        <Dialog.Viewport className="fixed inset-0 grid place-items-center px-4 py-10 xl:py-6">
-          <Dialog.Popup className="group/popup flex h-full w-full justify-center pointer-events-none transition-opacity duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0">
+        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black/20 dark:bg-black/50 backdrop-blur-[1px] transition-[opacity,backdrop-filter] duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Viewport className="fixed inset-0 grid place-items-center px-4 py-12 xl:py-6">
+          <Dialog.Popup className="group/popup relative flex h-full w-full max-w-[70rem] xl:max-w-none justify-center pointer-events-none transition-opacity duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0">
             <Dialog.Close
-              className="absolute right-3 top-2 flex h-7 w-7 items-center justify-center bg-transparent text-white hover:bg-white/10 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 xl:right-3 xl:top-3 xl:h-10 xl:w-10 pointer-events-auto"
+              className="absolute right-0 -top-10 flex h-8 w-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 xl:top-0 xl:h-10 xl:w-10 pointer-events-auto"
               aria-label="Close"
             >
               <XIcon className="h-6 w-6" />

From e9c4461a3d7d1138f60a8fe4453d69f95b39769b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 24 Apr 2026 19:06:53 +0200
Subject: [PATCH 054/257] Reduce height of demo preview

---
 docs/src/components/Demo/Demo.css | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/docs/src/components/Demo/Demo.css b/docs/src/components/Demo/Demo.css
index 5ba9ea7350c..c0c76f86ee3 100644
--- a/docs/src/components/Demo/Demo.css
+++ b/docs/src/components/Demo/Demo.css
@@ -68,11 +68,6 @@
     display: flex;
     justify-content: center;
     align-items: center;
-
-    @media (--xs) {
-      padding: 3rem 1.5rem;
-      min-height: 11.25rem; /* Match .DemoCodeBlockRoot pre min-height */
-    }
   }
 
   .DemoToolbar {

From 7f27cdbc3e423f16e97058ddd548468d404dcaa6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 24 Apr 2026 19:13:26 +0200
Subject: [PATCH 055/257] Button: new outline look

---
 .../button/demos/hero/css-modules/index.module.css     | 10 +++++++---
 .../components/button/demos/hero/tailwind/index.tsx    |  2 +-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
index 6b124713f8b..7cf7a655cd0 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
@@ -6,9 +6,9 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: none;
+  border: 1px solid light-dark(var(--color-gray-950), white);
   border-radius: 0;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -18,10 +18,14 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
   &[data-disabled] {
     color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
index fb222d78ed7..1ae128a7b0e 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Button } from '@base-ui/react/button';
 
 export default function ExampleButton() {
   return (
-    <Button className="flex items-center justify-center h-8 px-3 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:data-disabled:text-gray-400">
+    <Button className="flex items-center justify-center h-8 px-3 border border-gray-950 dark:border-white rounded-none bg-white dark:bg-gray-950 text-sm font-normal leading-5 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-50 dark:hover:not-data-disabled:bg-gray-900 active:not-data-disabled:bg-gray-100 dark:active:not-data-disabled:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:data-disabled:text-gray-400">
       Submit
     </Button>
   );

From d11734c3de05dcf7e9f2561325b8e297fc84fb1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 24 Apr 2026 19:40:47 +0200
Subject: [PATCH 056/257] Buttons: new outline style

---
 .../alert-dialog/demos/_index.module.css      | 10 +++++++---
 .../tailwind/index.tsx                        |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../demos/hero/css-modules/index.module.css   | 10 +++++++---
 .../demos/hero/tailwind/index.tsx             |  2 +-
 .../loading/css-modules/index.module.css      | 12 +++++++----
 .../button/demos/loading/tailwind/index.tsx   |  2 +-
 .../demos/hero/css-modules/index.module.css   | 10 +++++++---
 .../collapsible/demos/hero/tailwind/index.tsx |  2 +-
 .../components/dialog/demos/_index.module.css | 10 +++++++---
 .../css-modules/index.module.css              | 10 +++++++---
 .../close-confirmation/tailwind/index.tsx     | 10 +++++-----
 .../tailwind/index.tsx                        | 10 +++++-----
 .../tailwind/index.tsx                        |  4 ++--
 .../demos/hero/css-modules/index.module.css   | 10 +++++++---
 .../dialog/demos/hero/tailwind/index.tsx      |  4 ++--
 .../css-modules/index.module.css              | 10 +++++++---
 .../demos/inside-scroll/tailwind/index.tsx    |  4 ++--
 .../demos/nested/css-modules/index.module.css | 10 +++++++---
 .../dialog/demos/nested/tailwind/index.tsx    |  6 +++---
 .../css-modules/index.module.css              | 10 +++++++---
 .../demos/outside-scroll/tailwind/index.tsx   |  2 +-
 .../uncontained/css-modules/index.module.css  | 10 +++++++---
 .../demos/uncontained/tailwind/index.tsx      |  2 +-
 .../popover/demos/_index.module.css           | 20 +++++++++++--------
 .../tailwind/index.tsx                        |  8 ++++----
 .../css-modules/index.module.css              | 10 +++++-----
 .../detached-triggers-full/tailwind/index.tsx |  6 +++---
 .../tailwind/index.tsx                        |  2 +-
 .../popover/demos/hero/tailwind/index.tsx     |  2 +-
 .../demos/open-on-hover/tailwind/index.tsx    |  2 +-
 .../grouped/css-modules/index.module.css      | 12 +++++++----
 .../select/demos/grouped/tailwind/index.tsx   |  2 +-
 .../demos/hero/css-modules/index.module.css   | 12 +++++++----
 .../select/demos/hero/tailwind/index.tsx      |  2 +-
 .../multiple/css-modules/index.module.css     | 12 +++++++----
 .../select/demos/multiple/tailwind/index.tsx  |  2 +-
 .../css-modules/index.module.css              | 12 +++++++----
 .../demos/object-values/tailwind/index.tsx    |  2 +-
 .../demos/hero/css-modules/index.module.css   |  6 +++++-
 .../demos/hero/tailwind/index.tsx             |  6 +++---
 .../demos/hero/css-modules/index.module.css   |  8 ++++++--
 .../toggle/demos/hero/tailwind/index.tsx      |  2 +-
 43 files changed, 182 insertions(+), 110 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
index e38ec3fd79d..0c708eafb4c 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
@@ -6,8 +6,8 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: none;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -17,10 +17,14 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 228861e82ad..a027d3b101e 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -7,7 +7,7 @@ type AlertPayload = { message: string };
 const demoAlertDialog = AlertDialog.createHandle<AlertPayload>();
 
 const buttonClasses =
-  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
+  'flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
index 4fd52109b2b..59b0f14a754 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { AlertDialog } from '@base-ui/react/alert-dialog';
 const demoAlertDialog = AlertDialog.createHandle();
 
 const buttonClasses =
-  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
+  'flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
index 252567ba577..b38d02291e8 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
@@ -6,8 +6,8 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: none;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -21,10 +21,14 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
index e0b9f1e8842..cd074482b9c 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
@@ -1,7 +1,7 @@
 import { AlertDialog } from '@base-ui/react/alert-dialog';
 
 const buttonClasses =
-  'flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
+  'flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
index fab5ee5c912..4ebe69632bf 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
@@ -6,22 +6,26 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: none;
+  border: 1px solid light-dark(var(--color-gray-950), white);
   border-radius: 0;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
+  line-height: 1.25rem;
   color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
index 2865e1a314d..4b6c283c3f9 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleButton() {
 
   return (
     <Button
-      className="flex items-center justify-center h-8 px-3 border-none rounded-none bg-gray-200 dark:bg-gray-800 font-inherit text-sm font-normal leading-6 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-300 dark:hover:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:data-disabled:text-gray-400"
+      className="flex items-center justify-center h-8 px-3 border border-gray-950 dark:border-white rounded-none bg-white dark:bg-gray-950 text-sm font-normal leading-5 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-50 dark:hover:not-data-disabled:bg-gray-900 active:not-data-disabled:bg-gray-100 dark:active:not-data-disabled:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:data-disabled:text-gray-400"
       disabled={loading}
       focusableWhenDisabled
       onClick={() => {
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
index ac31e2d140e..a4981fc51a8 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
@@ -22,9 +22,9 @@
   height: 2rem;
   padding: 0 0.5rem 0 0.75rem;
   margin: 0;
-  border: none;
+  border: 1px solid light-dark(var(--color-gray-950), white);
   border-radius: 0;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  background-color: light-dark(white, var(--color-gray-950));
   color: light-dark(var(--color-gray-950), white);
   font-family: inherit;
   font-size: 0.875rem;
@@ -34,10 +34,14 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
index 707f48372ce..7c54fedafac 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Collapsible } from '@base-ui/react/collapsible';
 export default function ExampleCollapsible() {
   return (
     <Collapsible.Root className="flex min-h-36 w-56 flex-col justify-center text-gray-950 dark:text-white">
-      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none bg-gray-200 pl-3 pr-2 text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700">
+      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none border border-gray-950 dark:border-white bg-white dark:bg-gray-950 pl-3 pr-2 text-sm leading-5 font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Recovery keys
         <ChevronIcon className="size-3 transition-transform duration-100 ease-out group-data-panel-open:rotate-90" />
       </Collapsible.Trigger>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
index f3fd7e1b6d5..1e783b7a2a7 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
@@ -6,8 +6,8 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: none;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -17,10 +17,14 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
index 8ccda7007ec..59f6f903928 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
@@ -6,8 +6,8 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: none;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -17,10 +17,14 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
index b6ab0fc114b..bb66b749323 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleDialog() {
         }
       }}
     >
-      <Dialog.Trigger className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Tweet
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -50,12 +50,12 @@ export default function ExampleDialog() {
               onChange={(event) => setTextareaValue(event.target.value)}
             />
             <div className="flex justify-end gap-3">
-              <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Cancel
               </Dialog.Close>
               <button
                 type="submit"
-                className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+                className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
               >
                 Tweet
               </button>
@@ -73,12 +73,12 @@ export default function ExampleDialog() {
               Your tweet will be lost.
             </AlertDialog.Description>
             <div className="flex justify-end gap-3">
-              <AlertDialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <AlertDialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Go back
               </AlertDialog.Close>
               <button
                 type="button"
-                className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+                className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
                 onClick={() => {
                   setConfirmationOpen(false);
                   setDialogOpen(false);
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 1fee468ec00..11fc164ea03 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -17,7 +17,7 @@ export default function DialogDetachedTriggersControlledDemo() {
     <React.Fragment>
       <div className="flex flex-wrap gap-2 justify-center">
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoDialog}
           id="trigger-1"
           payload={1}
@@ -26,7 +26,7 @@ export default function DialogDetachedTriggersControlledDemo() {
         </Dialog.Trigger>
 
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoDialog}
           id="trigger-2"
           payload={2}
@@ -35,7 +35,7 @@ export default function DialogDetachedTriggersControlledDemo() {
         </Dialog.Trigger>
 
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoDialog}
           id="trigger-3"
           payload={3}
@@ -45,7 +45,7 @@ export default function DialogDetachedTriggersControlledDemo() {
 
         <button
           type="button"
-          className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
@@ -70,7 +70,7 @@ export default function DialogDetachedTriggersControlledDemo() {
               )}
 
               <div className="flex justify-end gap-3 mt-4">
-                <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                   Close
                 </Dialog.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
index 0489f3cc7a2..23377423eaa 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function DialogDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
       <Dialog.Trigger
-        className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoDialog}
       >
         View notifications
@@ -23,7 +23,7 @@ export default function DialogDetachedTriggersSimpleDemo() {
               You are all caught up. Good job!
             </Dialog.Description>
             <div className="flex justify-end gap-3 mt-4">
-              <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Close
               </Dialog.Close>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
index a843c04bad9..21431bc31c2 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
@@ -6,8 +6,8 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: none;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -17,10 +17,14 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
index 5f986916c14..6cbf03e3267 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -14,7 +14,7 @@ export default function ExampleDialog() {
             You are all caught up. Good job!
           </Dialog.Description>
           <div className="flex justify-end gap-3 mt-4">
-            <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+            <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
               Close
             </Dialog.Close>
           </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
index 69f5a5d1606..70b0efd19d7 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
@@ -6,8 +6,8 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: none;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -17,10 +17,14 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
index b1337641c6b..e2ca1c42562 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function InsideScrollDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -36,7 +36,7 @@ export default function InsideScrollDialog() {
               </ScrollArea.Scrollbar>
             </ScrollArea.Root>
             <div className="mt-4 flex justify-end gap-3">
-              <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Close
               </Dialog.Close>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
index bb2b1101dc0..e93c6f9fa6f 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
@@ -6,8 +6,8 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: none;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -17,10 +17,14 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
index dffd35b163d..929b8fa3c5e 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -28,7 +28,7 @@ export default function ExampleDialog() {
                       Review your settings here.
                     </Dialog.Description>
                     <div className="flex items-center justify-end gap-3 mt-4">
-                      <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                      <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                         Close
                       </Dialog.Close>
                     </div>
@@ -37,7 +37,7 @@ export default function ExampleDialog() {
               </Dialog.Root>
             </div>
 
-            <Dialog.Close className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+            <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
               Close
             </Dialog.Close>
           </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
index a8c762a5b06..a53461491d0 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
@@ -6,8 +6,8 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: none;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -17,10 +17,14 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index 4f88b874cbc..fc3f462c6b3 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function OutsideScrollDialog() {
   const popupRef = React.useRef<HTMLDivElement>(null);
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
index 51e97d7a9de..1d52e57d492 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
@@ -6,8 +6,8 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: none;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -17,10 +17,14 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
index 1ce725b23c6..5cec5140b83 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleUncontainedDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
index 96bc420bb38..948beac339a 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
@@ -7,8 +7,8 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  border: none;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -18,16 +18,16 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
@@ -146,8 +146,8 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: none;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -157,10 +157,14 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
index 72e3b7e4ad8..9e6feffca1b 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
     <React.Fragment>
       <div className="flex gap-2 flex-wrap justify-center">
         <Popover.Trigger
-          className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoPopover}
           id="trigger-1"
         >
@@ -26,7 +26,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
         </Popover.Trigger>
 
         <Popover.Trigger
-          className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoPopover}
           id="trigger-2"
         >
@@ -34,7 +34,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
         </Popover.Trigger>
 
         <Popover.Trigger
-          className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoPopover}
           id="trigger-3"
         >
@@ -43,7 +43,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
 
         <button
           type="button"
-          className="flex h-8 items-center justify-center bg-gray-200 dark:bg-gray-800 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-300 dark:hover:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
index 5a94e3956a0..754cd1a9907 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
@@ -7,8 +7,8 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  border: none;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -18,16 +18,16 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
index f8aae6149b8..849bfb6bd4c 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
@@ -10,7 +10,7 @@ export default function PopoverDetachedTriggersFullDemo() {
   return (
     <div className="flex gap-2">
       <Popover.Trigger
-        className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
         payload={NotificationsPanel}
       >
@@ -18,7 +18,7 @@ export default function PopoverDetachedTriggersFullDemo() {
       </Popover.Trigger>
 
       <Popover.Trigger
-        className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
         payload={ActivityPanel}
       >
@@ -26,7 +26,7 @@ export default function PopoverDetachedTriggersFullDemo() {
       </Popover.Trigger>
 
       <Popover.Trigger
-        className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
         payload={ProfilePanel}
       >
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
index d7b070be3eb..9f8a9463ac6 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
       <Popover.Trigger
-        className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
       >
         <BellIcon aria-label="Notifications" />
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
index de8784597cd..afd4f1aeb01 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { BellIcon } from '../../icons-tw';
 export default function ExamplePopover() {
   return (
     <Popover.Root>
-      <Popover.Trigger className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Popover.Trigger className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         <BellIcon aria-label="Notifications" />
       </Popover.Trigger>
       <Popover.Portal>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
index b0afa233e01..ea5d4de9e53 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExamplePopover() {
     <Popover.Root>
       <Popover.Trigger
         openOnHover
-        className="flex size-8 items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-700 data-[popup-open]:bg-gray-300 dark:data-[popup-open]:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         <BellIcon aria-label="Notifications" />
       </Popover.Trigger>
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index 7f8ffa8be72..034c7bf4912 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -28,8 +28,8 @@
   padding-right: 0.5rem;
   margin: 0;
   outline: 0;
-  border: none;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -40,12 +40,16 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index 4992f7d1c99..dc305f9fb8e 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleSelectGrouped() {
         Produce
       </Field.Label>
       <Select.Root items={groupedProduce}>
-        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 bg-gray-200 text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-300 font-normal dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:data-[popup-open]:bg-gray-700">
+        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 font-normal">
           <Select.Value
             className="data-[placeholder]:text-gray-600 dark:data-[placeholder]:text-gray-400"
             placeholder="Select produce"
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
index 334c27bc5b9..380679acd1c 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
@@ -28,8 +28,8 @@
   padding-right: 0.5rem;
   margin: 0;
   outline: 0;
-  border: none;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -40,12 +40,16 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index 8dd0e45f75a..358bcd2e359 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function ExampleSelect() {
         <Select.Label className="cursor-default text-sm leading-5 font-bold text-gray-950 dark:text-white">
           Apple
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 bg-gray-200 text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-300 font-normal dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:data-[popup-open]:bg-gray-700">
+        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 font-normal">
           <Select.Value
             className="data-[placeholder]:text-gray-600 dark:data-[placeholder]:text-gray-400"
             placeholder="Select apple"
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
index 5464595d691..4c2e04d8160 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
@@ -28,8 +28,8 @@
   padding-right: 0.5rem;
   margin: 0;
   outline: 0;
-  border: none;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -40,12 +40,16 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index b33ed11ace3..63719b72f7a 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -36,7 +36,7 @@ export default function MultiSelectExample() {
         <Select.Label className="cursor-default text-sm leading-5 font-bold text-gray-950 dark:text-white">
           Languages
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 bg-gray-200 text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-300 font-normal dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:data-[popup-open]:bg-gray-700">
+        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 font-normal">
           <Select.Value className="data-[placeholder]:text-gray-600 dark:data-[placeholder]:text-gray-400">
             {renderValue}
           </Select.Value>
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
index a1b067c4628..dc2fee7a931 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
@@ -25,8 +25,8 @@
   padding-right: 0.5rem;
   margin: 0;
   outline: 0;
-  border: none;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -37,12 +37,16 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index 84416946a33..404c4e1550b 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ObjectValueSelect() {
         <Select.Label className="cursor-default text-sm leading-5 font-bold text-gray-950 dark:text-white">
           Shipping method
         </Select.Label>
-        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-start justify-between gap-3 pl-3 pr-2 py-1.5 text-sm leading-5 bg-gray-200 text-gray-950 select-none hover:bg-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-300 font-normal dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:data-[popup-open]:bg-gray-700">
+        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-start justify-between gap-3 pl-3 pr-2 py-1.5 text-sm leading-5 border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 font-normal">
           <Select.Value>
             {(method: ShippingMethod) => (
               <span className="flex flex-col items-start gap-0.5">
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
index 58ba8408c28..b32bc106d5b 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
@@ -22,10 +22,14 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
   &[data-pressed] {
     background-color: light-dark(var(--color-gray-950), white);
     color: light-dark(white, var(--color-gray-950));
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
index 5e091232bc8..e47764e6267 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/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 border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-50 dark:hover:not-data-disabled:bg-gray-900 active:not-data-disabled:bg-gray-100 dark:active:not-data-disabled:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
       >
         <AlignLeftIcon className="size-4" />
       </Toggle>
       <Toggle
         aria-label="Align center"
         value="center"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-50 dark:hover:not-data-disabled:bg-gray-900 active:not-data-disabled:bg-gray-100 dark:active:not-data-disabled:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
       >
         <AlignCenterIcon className="size-4" />
       </Toggle>
       <Toggle
         aria-label="Align right"
         value="right"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-50 dark:hover:not-data-disabled:bg-gray-900 active:not-data-disabled:bg-gray-100 dark:active:not-data-disabled:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
       >
         <AlignRightIcon className="size-4" />
       </Toggle>
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
index e7f34ce3741..327518a0067 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
@@ -14,11 +14,15 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    &:hover {
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
   &[data-pressed] {
     color: light-dark(var(--color-gray-950), white);
   }
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
index 6955e69b777..ebfede8709c 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleToggle() {
   return (
     <Toggle
       aria-label="Favorite"
-      className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-pressed:text-gray-950 dark:data-pressed:text-white"
+      className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-50 dark:hover:not-data-disabled:bg-gray-900 active:not-data-disabled:bg-gray-100 dark:active:not-data-disabled:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-pressed:text-gray-950 dark:data-pressed:text-white"
       render={(props, state) => {
         if (state.pressed) {
           return (

From 0619ddcd4c4257e829f4d0c452a7b866e5d5c4b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 27 Apr 2026 12:21:28 +0200
Subject: [PATCH 057/257] Select: remove annoying popup outline

---
 .../select/demos/grouped/css-modules/index.module.css         | 4 +++-
 .../react/components/select/demos/grouped/tailwind/index.tsx  | 4 ++--
 .../components/select/demos/hero/css-modules/index.module.css | 1 +
 .../react/components/select/demos/hero/tailwind/index.tsx     | 2 +-
 .../select/demos/multiple/css-modules/index.module.css        | 1 +
 .../react/components/select/demos/multiple/tailwind/index.tsx | 2 +-
 .../select/demos/object-values/css-modules/index.module.css   | 1 +
 .../components/select/demos/object-values/tailwind/index.tsx  | 2 +-
 8 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index 034c7bf4912..eda409a1798 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -70,6 +70,7 @@
 
 .Popup {
   box-sizing: border-box;
+  outline: 0;
   border: 1px solid light-dark(var(--color-gray-950), white);
   background-color: light-dark(white, var(--color-gray-950));
   background-clip: padding-box;
@@ -117,8 +118,9 @@
 .GroupLabel {
   box-sizing: border-box;
   padding: 0.5rem 1rem 0.25rem calc(0.625rem + 0.75rem + 0.5rem);
-  font-size: 0.6875rem;
+  font-size: 0.75rem;
   font-weight: 700;
+  line-height: 1rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: light-dark(var(--color-gray-500), var(--color-gray-400));
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index dc305f9fb8e..b0d15d71430 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleSelectGrouped() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[2] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-gray-950">
                 ⏶
               </Select.ScrollUpArrow>
@@ -32,7 +32,7 @@ export default function ExampleSelectGrouped() {
                 {groupedProduce.map((group, index) => (
                   <React.Fragment key={group.value}>
                     <Select.Group className="block pb-0.5">
-                      <Select.GroupLabel className="sticky top-0 z-[1] bg-white pr-4 pb-1 pl-[1.875rem] pt-2 text-[0.6875rem] font-bold text-gray-500 uppercase tracking-wider dark:bg-gray-950 dark:text-gray-400">
+                      <Select.GroupLabel className="sticky top-0 z-[1] bg-white pr-4 pb-1 pl-[1.875rem] pt-2 text-xs font-bold text-gray-500 uppercase tracking-wider dark:bg-gray-950 dark:text-gray-400">
                         {group.value}
                       </Select.GroupLabel>
                       {group.items.map((item) => (
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
index 380679acd1c..a7ec86f8ffd 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
@@ -70,6 +70,7 @@
 
 .Popup {
   box-sizing: border-box;
+  outline: 0;
   border: 1px solid light-dark(var(--color-gray-950), white);
   background-color: light-dark(white, var(--color-gray-950));
   background-clip: padding-box;
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index 358bcd2e359..34e8f52a604 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -27,7 +27,7 @@ export default function ExampleSelect() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-gray-950">
                 ⏶
               </Select.ScrollUpArrow>
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
index 4c2e04d8160..ed55d7da2ef 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
@@ -69,6 +69,7 @@
 
 .Popup {
   box-sizing: border-box;
+  outline: 0;
   padding-block: 0.25rem;
   border: 1px solid light-dark(var(--color-gray-950), white);
   background-color: light-dark(white, var(--color-gray-950));
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index 63719b72f7a..0f81a9923bc 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -50,7 +50,7 @@ export default function MultiSelectExample() {
             sideOffset={8}
             alignItemWithTrigger={false}
           >
-            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding overflow-y-auto border border-gray-950 bg-white py-1 text-gray-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding overflow-y-auto border border-gray-950 bg-white py-1 text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
               {values.map((value) => (
                 <Select.Item
                   key={value}
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
index dc2fee7a931..6d62d8f3e31 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
@@ -87,6 +87,7 @@
 
 .Popup {
   box-sizing: border-box;
+  outline: 0;
   border: 1px solid light-dark(var(--color-gray-950), white);
   background-color: light-dark(white, var(--color-gray-950));
   background-clip: padding-box;
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index 404c4e1550b..018dae2b538 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -26,7 +26,7 @@ export default function ObjectValueSelect() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-gray-950">
                 ⏶
               </Select.ScrollUpArrow>

From 62195324ec04aa34831c42b11ebaf0d508187049 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 27 Apr 2026 12:39:33 +0200
Subject: [PATCH 058/257] Select: adjust TW transition classes

---
 .../react/components/select/demos/grouped/tailwind/index.tsx    | 2 +-
 .../react/components/select/demos/hero/tailwind/index.tsx       | 2 +-
 .../react/components/select/demos/multiple/tailwind/index.tsx   | 2 +-
 .../components/select/demos/object-values/tailwind/index.tsx    | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index b0d15d71430..bf9ec6906e7 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleSelectGrouped() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[2] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-gray-950">
                 ⏶
               </Select.ScrollUpArrow>
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index 34e8f52a604..1279040f4a8 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -27,7 +27,7 @@ export default function ExampleSelect() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-gray-950">
                 ⏶
               </Select.ScrollUpArrow>
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index 0f81a9923bc..4e987c711fb 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -50,7 +50,7 @@ export default function MultiSelectExample() {
             sideOffset={8}
             alignItemWithTrigger={false}
           >
-            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding overflow-y-auto border border-gray-950 bg-white py-1 text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding overflow-y-auto border border-gray-950 bg-white py-1 text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
               {values.map((value) => (
                 <Select.Item
                   key={value}
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index 018dae2b538..e3c607f1238 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -26,7 +26,7 @@ export default function ObjectValueSelect() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-gray-950">
                 ⏶
               </Select.ScrollUpArrow>

From 8138687b0c21b286894a27b25fd01067eb36a309 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 27 Apr 2026 12:39:42 +0200
Subject: [PATCH 059/257] AlertDialog: adjust TW transition classes

---
 .../demos/detached-triggers-controlled/tailwind/index.tsx       | 2 +-
 .../demos/detached-triggers-simple/tailwind/index.tsx           | 2 +-
 .../react/components/alert-dialog/demos/hero/tailwind/index.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index a027d3b101e..34047ff4890 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -71,7 +71,7 @@ export default function AlertDialogDetachedTriggersControlledDemo() {
         {({ payload }) => (
           <AlertDialog.Portal>
             <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-            <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+            <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
               <AlertDialog.Title className="text-sm font-bold">
                 {payload?.message ?? 'Are you sure?'}
               </AlertDialog.Title>
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
index 59b0f14a754..95327b43d9f 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -19,7 +19,7 @@ export default function AlertDialogDetachedTriggersSimpleDemo() {
       <AlertDialog.Root handle={demoAlertDialog}>
         <AlertDialog.Portal>
           <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-          <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+          <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
             <AlertDialog.Title className="text-sm font-bold">Discard draft?</AlertDialog.Title>
             <AlertDialog.Description className="text-sm text-gray-600 dark:text-gray-400">
               This action cannot be undone.
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
index cd074482b9c..3bacf81cbe0 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
@@ -11,7 +11,7 @@ export default function ExampleAlertDialog() {
       <AlertDialog.Trigger className={dangerButtonClasses}>Discard draft</AlertDialog.Trigger>
       <AlertDialog.Portal>
         <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+        <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
           <AlertDialog.Title className="text-sm font-bold">Discard draft?</AlertDialog.Title>
           <AlertDialog.Description className="text-sm text-gray-600 dark:text-gray-400">
             You can’t undo this action.

From 33b420071f7685a47272800beb4234feb7f94e7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 27 Apr 2026 12:39:50 +0200
Subject: [PATCH 060/257] Dialog: adjust TW transition classes

---
 .../dialog/demos/close-confirmation/tailwind/index.tsx        | 4 ++--
 .../demos/detached-triggers-controlled/tailwind/index.tsx     | 2 +-
 .../dialog/demos/detached-triggers-simple/tailwind/index.tsx  | 2 +-
 .../react/components/dialog/demos/hero/tailwind/index.tsx     | 2 +-
 .../components/dialog/demos/inside-scroll/tailwind/index.tsx  | 2 +-
 .../react/components/dialog/demos/nested/tailwind/index.tsx   | 4 ++--
 .../components/dialog/demos/outside-scroll/tailwind/index.tsx | 2 +-
 .../components/dialog/demos/uncontained/tailwind/index.tsx    | 2 +-
 8 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
index bb66b749323..53412d20d21 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
@@ -29,7 +29,7 @@ export default function ExampleDialog() {
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-[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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
           <Dialog.Title id={titleId} className="text-sm font-bold">
             New tweet
           </Dialog.Title>
@@ -67,7 +67,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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
             <AlertDialog.Title className="text-sm font-bold">Discard tweet?</AlertDialog.Title>
             <AlertDialog.Description className="text-sm text-gray-600 dark:text-gray-400 mb-4">
               Your tweet will be lost.
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 11fc164ea03..45cb3d5f321 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -64,7 +64,7 @@ export default function DialogDetachedTriggersControlledDemo() {
         {({ payload }) => (
           <Dialog.Portal>
             <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-            <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+            <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
               {payload !== undefined && (
                 <Dialog.Title className="text-sm font-bold">Dialog {payload}</Dialog.Title>
               )}
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
index 23377423eaa..d85be86c1c6 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -17,7 +17,7 @@ export default function DialogDetachedTriggersSimpleDemo() {
       <Dialog.Root handle={demoDialog}>
         <Dialog.Portal>
           <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-          <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+          <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
             <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
             <Dialog.Description className="text-sm text-gray-600 dark:text-gray-400">
               You are all caught up. Good job!
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
index 6cbf03e3267..baf21c1c57e 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleDialog() {
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+        <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
           <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
           <Dialog.Description className="text-sm text-gray-600 dark:text-gray-400">
             You are all caught up. Good job!
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
index e2ca1c42562..adf2a0ed7dd 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
@@ -11,7 +11,7 @@ export default function InsideScrollDialog() {
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="fixed inset-0 flex items-center justify-center overflow-hidden py-6 [@media(min-height:600px)]:pb-12 [@media(min-height:600px)]:pt-8">
-          <Dialog.Popup className="relative flex w-[min(40rem,calc(100vw-2rem))] max-h-full max-w-full min-h-0 flex-col overflow-hidden bg-white dark:bg-gray-950 p-4 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0">
+          <Dialog.Popup className="relative flex w-[min(40rem,calc(100vw-2rem))] max-h-full max-w-full min-h-0 flex-col overflow-hidden bg-white dark:bg-gray-950 p-4 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-150 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0">
             <div className="mb-1 flex items-start justify-between gap-3">
               <Dialog.Title className="m-0 text-base font-bold leading-6">Dialog</Dialog.Title>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
index 929b8fa3c5e..2703643c657 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleDialog() {
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-[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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
           <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
           <Dialog.Description className="text-sm text-gray-600 dark:text-gray-400">
             You are all caught up. Good job!
@@ -20,7 +20,7 @@ export default function ExampleDialog() {
                   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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
                     <Dialog.Title className="text-sm font-bold">
                       Customize notifications
                     </Dialog.Title>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index fc3f462c6b3..51622c90819 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -22,7 +22,7 @@ export default function OutsideScrollDialog() {
                 <Dialog.Popup
                   ref={popupRef}
                   initialFocus={popupRef}
-                  className="outline-0 relative mx-auto my-16 w-[min(40rem,calc(100vw-2rem))] bg-white dark:bg-gray-950 p-4 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-transform duration-[700ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-[starting-style]:translate-y-[100dvh] data-[ending-style]:translate-y-[max(100dvh,100%)] data-[ending-style]:duration-[350ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] motion-reduce:transition-none"
+                  className="outline-0 relative mx-auto my-16 w-[min(40rem,calc(100vw-2rem))] bg-white dark:bg-gray-950 p-4 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[translate] duration-[700ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-[starting-style]:translate-y-[100dvh] data-[ending-style]:translate-y-[max(100dvh,100%)] data-[ending-style]:duration-[350ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] motion-reduce:transition-none"
                 >
                   <div className="mb-1 flex items-start justify-between gap-3">
                     <Dialog.Title className="m-0 text-base font-bold leading-6">
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
index 5cec5140b83..40152f24fc5 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function ExampleUncontainedDialog() {
             >
               <XIcon className="h-6 w-6" />
             </Dialog.Close>
-            <div className="pointer-events-auto box-border h-full w-full max-w-[70rem] bg-white dark:bg-gray-950 p-4 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[starting-style]/popup:scale-105" />
+            <div className="pointer-events-auto box-border h-full w-full max-w-[70rem] bg-white dark:bg-gray-950 p-4 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[starting-style]/popup:scale-105" />
           </Dialog.Popup>
         </Dialog.Viewport>
       </Dialog.Portal>

From de96fc7fa7c895c95d6f2ce100f77e65fc63fd99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 27 Apr 2026 12:51:31 +0200
Subject: [PATCH 061/257] Select: tweak transitions

---
 .../select/demos/grouped/css-modules/index.module.css       | 6 +++---
 .../components/select/demos/grouped/tailwind/index.tsx      | 2 +-
 .../select/demos/hero/css-modules/index.module.css          | 6 +++---
 .../react/components/select/demos/hero/tailwind/index.tsx   | 2 +-
 .../select/demos/multiple/css-modules/index.module.css      | 6 +++---
 .../components/select/demos/multiple/tailwind/index.tsx     | 2 +-
 .../select/demos/object-values/css-modules/index.module.css | 6 +++---
 .../select/demos/object-values/tailwind/index.tsx           | 2 +-
 8 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index eda409a1798..2a3bf062881 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -79,8 +79,8 @@
   transform-origin: var(--transform-origin);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
     box-shadow: none;
@@ -89,7 +89,7 @@
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.98);
   }
 
   &[data-side='none'] {
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index bf9ec6906e7..3e5a0338c00 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleSelectGrouped() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[2] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-gray-950">
                 ⏶
               </Select.ScrollUpArrow>
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
index a7ec86f8ffd..0c4a76a3fc7 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
@@ -79,8 +79,8 @@
   transform-origin: var(--transform-origin);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
     box-shadow: none;
@@ -89,7 +89,7 @@
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.98);
   }
 
   &[data-side='none'] {
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index 1279040f4a8..8bf8308015b 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -27,7 +27,7 @@ export default function ExampleSelect() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-gray-950">
                 ⏶
               </Select.ScrollUpArrow>
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
index ed55d7da2ef..a370c060893 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
@@ -79,8 +79,8 @@
   transform-origin: var(--transform-origin);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
   overflow-y: auto;
   max-height: var(--available-height);
 
@@ -91,7 +91,7 @@
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.98);
   }
 
   &[data-side='none'] {
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index 4e987c711fb..b6855bf85b4 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -50,7 +50,7 @@ export default function MultiSelectExample() {
             sideOffset={8}
             alignItemWithTrigger={false}
           >
-            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding overflow-y-auto border border-gray-950 bg-white py-1 text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding overflow-y-auto border border-gray-950 bg-white py-1 text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
               {values.map((value) => (
                 <Select.Item
                   key={value}
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
index 6d62d8f3e31..faa963999b3 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
@@ -96,8 +96,8 @@
   transform-origin: var(--transform-origin);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
     box-shadow: none;
@@ -106,7 +106,7 @@
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.98);
   }
 
   &[data-side='none'] {
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index e3c607f1238..d9e52578767 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -26,7 +26,7 @@ export default function ObjectValueSelect() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]: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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-gray-950">
                 ⏶
               </Select.ScrollUpArrow>

From f8850a14601f44961f361d54ba8b14596a7e759a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 27 Apr 2026 12:51:44 +0200
Subject: [PATCH 062/257] Popover: tweak transition

---
 .../(docs)/react/components/popover/demos/_index.module.css | 6 +++---
 .../demos/detached-triggers-controlled/tailwind/index.tsx   | 2 +-
 .../demos/detached-triggers-simple/tailwind/index.tsx       | 2 +-
 .../react/components/popover/demos/hero/tailwind/index.tsx  | 2 +-
 .../popover/demos/open-on-hover/tailwind/index.tsx          | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
index 948beac339a..173d2dfcdb9 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
@@ -57,8 +57,8 @@
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   width: var(--popup-width, auto);
   height: var(--popup-height, auto);
@@ -71,7 +71,7 @@
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.98);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
index 9e6feffca1b..900d0708cad 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -64,7 +64,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
             className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)]"
             sideOffset={8}
           >
-            <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] origin-[var(--transform-origin)] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+            <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] origin-[var(--transform-origin)] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
               <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
               <Popover.Description className="text-sm text-gray-600 dark:text-gray-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
index 9f8a9463ac6..87ba193de36 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
       <Popover.Root handle={demoPopover}>
         <Popover.Portal>
           <Popover.Positioner sideOffset={8}>
-            <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+            <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
               <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
               <Popover.Description className="text-sm text-gray-600 dark:text-gray-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
index afd4f1aeb01..12406b06234 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExamplePopover() {
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
-          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
             <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
             <Popover.Description className="text-sm text-gray-600 dark:text-gray-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
index ea5d4de9e53..1aeb051b172 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExamplePopover() {
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
-          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
             <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
             <Popover.Description className="text-sm text-gray-600 dark:text-gray-400">

From 26df2b49e50dcef27c09f1a357e4cba10e40462a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 27 Apr 2026 12:53:32 +0200
Subject: [PATCH 063/257] AlertDialog: tweak transition

---
 .../react/components/alert-dialog/demos/_index.module.css   | 6 ++++--
 .../demos/detached-triggers-controlled/tailwind/index.tsx   | 2 +-
 .../demos/detached-triggers-simple/tailwind/index.tsx       | 2 +-
 .../alert-dialog/demos/hero/css-modules/index.module.css    | 6 ++++--
 .../components/alert-dialog/demos/hero/tailwind/index.tsx   | 2 +-
 5 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
index 0c708eafb4c..bc3126c3b74 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
@@ -72,7 +72,9 @@
   background-color: light-dark(white, var(--color-gray-950));
   color: light-dark(var(--color-gray-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
-  transition: all 150ms;
+  transition:
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
     box-shadow: none;
@@ -81,7 +83,7 @@
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: translate(-50%, -50%) scale(0.9);
+    transform: translate(-50%, -50%) scale(0.98);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 34047ff4890..de5232201e8 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -71,7 +71,7 @@ export default function AlertDialogDetachedTriggersControlledDemo() {
         {({ payload }) => (
           <AlertDialog.Portal>
             <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-            <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+            <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
               <AlertDialog.Title className="text-sm font-bold">
                 {payload?.message ?? 'Are you sure?'}
               </AlertDialog.Title>
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
index 95327b43d9f..bdd6ce57e16 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -19,7 +19,7 @@ export default function AlertDialogDetachedTriggersSimpleDemo() {
       <AlertDialog.Root handle={demoAlertDialog}>
         <AlertDialog.Portal>
           <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-          <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+          <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
             <AlertDialog.Title className="text-sm font-bold">Discard draft?</AlertDialog.Title>
             <AlertDialog.Description className="text-sm text-gray-600 dark:text-gray-400">
               This action cannot be undone.
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
index b38d02291e8..33a7760a336 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
@@ -72,7 +72,9 @@
   background-color: light-dark(white, var(--color-gray-950));
   color: light-dark(var(--color-gray-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
-  transition: all 150ms;
+  transition:
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
     box-shadow: none;
@@ -81,7 +83,7 @@
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: translate(-50%, -50%) scale(0.9);
+    transform: translate(-50%, -50%) scale(0.98);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
index 3bacf81cbe0..7027fc3454e 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
@@ -11,7 +11,7 @@ export default function ExampleAlertDialog() {
       <AlertDialog.Trigger className={dangerButtonClasses}>Discard draft</AlertDialog.Trigger>
       <AlertDialog.Portal>
         <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+        <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
           <AlertDialog.Title className="text-sm font-bold">Discard draft?</AlertDialog.Title>
           <AlertDialog.Description className="text-sm text-gray-600 dark:text-gray-400">
             You can’t undo this action.

From 4306b76086b818bc592fbcac1597bee12082fea3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 27 Apr 2026 12:56:09 +0200
Subject: [PATCH 064/257] Dialog: tweak transition

---
 .../react/components/dialog/demos/_index.module.css       | 6 ++++--
 .../demos/close-confirmation/css-modules/index.module.css | 6 ++++--
 .../dialog/demos/close-confirmation/tailwind/index.tsx    | 4 ++--
 .../demos/detached-triggers-controlled/tailwind/index.tsx | 2 +-
 .../demos/detached-triggers-simple/tailwind/index.tsx     | 2 +-
 .../dialog/demos/hero/css-modules/index.module.css        | 6 ++++--
 .../react/components/dialog/demos/hero/tailwind/index.tsx | 2 +-
 .../demos/inside-scroll/css-modules/index.module.css      | 4 +++-
 .../dialog/demos/inside-scroll/tailwind/index.tsx         | 2 +-
 .../dialog/demos/nested/css-modules/index.module.css      | 6 ++++--
 .../components/dialog/demos/nested/tailwind/index.tsx     | 4 ++--
 .../demos/outside-scroll/css-modules/index.module.css     | 8 ++++----
 .../dialog/demos/outside-scroll/tailwind/index.tsx        | 4 ++--
 13 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
index 1e783b7a2a7..a7d453bd093 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
@@ -68,7 +68,9 @@
   background-color: light-dark(white, var(--color-gray-950));
   color: light-dark(var(--color-gray-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
-  transition: all 150ms;
+  transition:
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
     box-shadow: none;
@@ -77,7 +79,7 @@
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: translate(-50%, -50%) scale(0.9);
+    transform: translate(-50%, -50%) scale(0.98);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
index 59f6f903928..f3f859ea37f 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
@@ -67,7 +67,9 @@
   background-color: light-dark(white, var(--color-gray-950));
   color: light-dark(var(--color-gray-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
-  transition: all 150ms;
+  transition:
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   transform: translate(-50%, -50%) scale(calc(1 - 0.1 * var(--nested-dialogs)));
   translate: 0 calc(0px + 1.25rem * var(--nested-dialogs));
@@ -88,7 +90,7 @@
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: translate(-50%, -50%) scale(0.9);
+    transform: translate(-50%, -50%) scale(0.98);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
index 53412d20d21..7d57add7618 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
@@ -29,7 +29,7 @@ export default function ExampleDialog() {
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-[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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
           <Dialog.Title id={titleId} className="text-sm font-bold">
             New tweet
           </Dialog.Title>
@@ -67,7 +67,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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
             <AlertDialog.Title className="text-sm font-bold">Discard tweet?</AlertDialog.Title>
             <AlertDialog.Description className="text-sm text-gray-600 dark:text-gray-400 mb-4">
               Your tweet will be lost.
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 45cb3d5f321..267fa0117e6 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -64,7 +64,7 @@ export default function DialogDetachedTriggersControlledDemo() {
         {({ payload }) => (
           <Dialog.Portal>
             <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-            <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+            <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
               {payload !== undefined && (
                 <Dialog.Title className="text-sm font-bold">Dialog {payload}</Dialog.Title>
               )}
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
index d85be86c1c6..0c41044c2d1 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -17,7 +17,7 @@ export default function DialogDetachedTriggersSimpleDemo() {
       <Dialog.Root handle={demoDialog}>
         <Dialog.Portal>
           <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-          <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+          <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
             <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
             <Dialog.Description className="text-sm text-gray-600 dark:text-gray-400">
               You are all caught up. Good job!
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
index 21431bc31c2..00d5b8b1494 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
@@ -68,7 +68,9 @@
   background-color: light-dark(white, var(--color-gray-950));
   color: light-dark(var(--color-gray-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
-  transition: all 150ms;
+  transition:
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
     box-shadow: none;
@@ -77,7 +79,7 @@
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: translate(-50%, -50%) scale(0.9);
+    transform: translate(-50%, -50%) scale(0.98);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
index baf21c1c57e..fb7d29f0e0e 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleDialog() {
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+        <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
           <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
           <Dialog.Description className="text-sm text-gray-600 dark:text-gray-400">
             You are all caught up. Good job!
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
index 70b0efd19d7..ff9b2df9041 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
@@ -124,7 +124,9 @@
   background-color: light-dark(white, var(--color-gray-950));
   color: light-dark(var(--color-gray-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
-  transition: all 150ms;
+  transition:
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
   overflow: hidden;
   min-height: 0;
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
index adf2a0ed7dd..1c90cc34890 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
@@ -11,7 +11,7 @@ export default function InsideScrollDialog() {
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="fixed inset-0 flex items-center justify-center overflow-hidden py-6 [@media(min-height:600px)]:pb-12 [@media(min-height:600px)]:pt-8">
-          <Dialog.Popup className="relative flex w-[min(40rem,calc(100vw-2rem))] max-h-full max-w-full min-h-0 flex-col overflow-hidden bg-white dark:bg-gray-950 p-4 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-150 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0">
+          <Dialog.Popup className="relative flex w-[min(40rem,calc(100vw-2rem))] max-h-full max-w-full min-h-0 flex-col overflow-hidden bg-white dark:bg-gray-950 p-4 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0">
             <div className="mb-1 flex items-start justify-between gap-3">
               <Dialog.Title className="m-0 text-base font-bold leading-6">Dialog</Dialog.Title>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
index e93c6f9fa6f..6b0b403e993 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
@@ -96,7 +96,9 @@
   background-color: light-dark(white, var(--color-gray-950));
   color: light-dark(var(--color-gray-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
-  transition: all 150ms;
+  transition:
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   transform: translate(-50%, -50%) scale(calc(1 - 0.1 * var(--nested-dialogs)));
   translate: 0 calc(0px + 1.25rem * var(--nested-dialogs));
@@ -117,7 +119,7 @@
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: translate(-50%, -50%) scale(0.9);
+    transform: translate(-50%, -50%) scale(0.98);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
index 2703643c657..cdf7b48dffd 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleDialog() {
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-[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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
           <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
           <Dialog.Description className="text-sm text-gray-600 dark:text-gray-400">
             You are all caught up. Good job!
@@ -20,7 +20,7 @@ export default function ExampleDialog() {
                   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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-90 data-[starting-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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
                     <Dialog.Title className="text-sm font-bold">
                       Customize notifications
                     </Dialog.Title>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
index a53461491d0..dcb62768355 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
@@ -35,7 +35,7 @@
   position: fixed;
   inset: 0;
   background-color: light-dark(rgb(0 0 0 / 20%), rgb(0 0 0 / 50%));
-  transition-duration: 600ms;
+  transition-duration: 350ms;
   transition-property: -webkit-backdrop-filter, backdrop-filter, opacity;
   transition-timing-function: var(--ease-out-fast);
   backdrop-filter: blur(1.5px);
@@ -52,7 +52,7 @@
   }
 
   &[data-ending-style] {
-    transition-duration: 350ms;
+    transition-duration: 220ms;
     transition-timing-function: cubic-bezier(0.375, 0.015, 0.545, 0.455);
   }
 }
@@ -117,7 +117,7 @@
   background-color: light-dark(white, var(--color-gray-950));
   color: light-dark(var(--color-gray-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
-  transition: transform 700ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  transition: transform 350ms cubic-bezier(0.45, 1.005, 0, 1.005);
   outline: 0;
 
   @media (prefers-color-scheme: dark) {
@@ -134,7 +134,7 @@
 
   &[data-ending-style] {
     transform: translateY(max(100dvh, 100%));
-    transition-duration: 350ms;
+    transition-duration: 220ms;
     transition-timing-function: cubic-bezier(0.375, 0.015, 0.545, 0.455);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index 51622c90819..20d8e5ffadb 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -11,7 +11,7 @@ export default function OutsideScrollDialog() {
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 bg-black/20 dark:bg-black/50 transition-[backdrop-filter,opacity] duration-[600ms] ease-[var(--ease-out-fast)] backdrop-blur-[1.5px] data-[starting-style]:backdrop-blur-0 data-[starting-style]:opacity-0 data-[ending-style]:backdrop-blur-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-[350ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Backdrop className="fixed inset-0 bg-black/20 dark:bg-black/50 transition-[backdrop-filter,opacity] duration-[350ms] ease-[var(--ease-out-fast)] backdrop-blur-[1.5px] data-[starting-style]:backdrop-blur-0 data-[starting-style]:opacity-0 data-[ending-style]:backdrop-blur-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-[220ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="group/dialog fixed inset-0">
           <ScrollArea.Root
             style={{ position: undefined }}
@@ -22,7 +22,7 @@ export default function OutsideScrollDialog() {
                 <Dialog.Popup
                   ref={popupRef}
                   initialFocus={popupRef}
-                  className="outline-0 relative mx-auto my-16 w-[min(40rem,calc(100vw-2rem))] bg-white dark:bg-gray-950 p-4 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[translate] duration-[700ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-[starting-style]:translate-y-[100dvh] data-[ending-style]:translate-y-[max(100dvh,100%)] data-[ending-style]:duration-[350ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] motion-reduce:transition-none"
+                  className="outline-0 relative mx-auto my-16 w-[min(40rem,calc(100vw-2rem))] bg-white dark:bg-gray-950 p-4 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[translate] duration-[350ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-[starting-style]:translate-y-[100dvh] data-[ending-style]:translate-y-[max(100dvh,100%)] data-[ending-style]:duration-[220ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] motion-reduce:transition-none"
                 >
                   <div className="mb-1 flex items-start justify-between gap-3">
                     <Dialog.Title className="m-0 text-base font-bold leading-6">

From 000d6ce5ba06b56c2ce91c640fa94563a8e4e32c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 27 Apr 2026 12:56:20 +0200
Subject: [PATCH 065/257] Menu brutalist

---
 .../components/menu/demos/_index.module.css   | 102 ++++++++----------
 .../css-modules/index.module.css              |  76 ++++++-------
 .../checkbox-items/css-modules/index.tsx      |  22 ++--
 .../demos/checkbox-items/tailwind/index.tsx   |  41 ++++---
 .../tailwind/index.tsx                        |  22 ++--
 .../detached-triggers-full/tailwind/index.tsx |  34 +++---
 .../tailwind/index.tsx                        |  14 +--
 .../group-labels/css-modules/index.module.css |  86 +++++++--------
 .../demos/group-labels/css-modules/index.tsx  |  28 +++--
 .../demos/group-labels/tailwind/index.tsx     |  68 ++++++------
 .../demos/hero/css-modules/index.module.css   |  76 ++++++-------
 .../menu/demos/hero/tailwind/index.tsx        |  41 +++----
 .../css-modules/index.module.css              |  76 ++++++-------
 .../demos/open-on-hover/tailwind/index.tsx    |  31 +++---
 .../radio-items/css-modules/index.module.css  |  76 ++++++-------
 .../demos/radio-items/css-modules/index.tsx   |  14 ++-
 .../menu/demos/radio-items/tailwind/index.tsx |  42 ++++----
 .../submenu/css-modules/index.module.css      |  90 +++++++---------
 .../menu/demos/submenu/tailwind/index.tsx     |  73 +++++--------
 19 files changed, 473 insertions(+), 539 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
index fe5733d7935..1c793f890ea 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
@@ -3,34 +3,34 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 2rem;
+  height: 2rem;
   padding: 0;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -52,33 +52,37 @@
   align-items: center;
   justify-content: center;
   gap: 0.375rem;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
+  &[data-popup-open] {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -88,31 +92,26 @@
 
 .Popup {
   box-sizing: border-box;
+  outline: 0;
   padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+    transform: scale(0.98);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    filter: none;
   }
 }
 
@@ -141,19 +140,15 @@
 }
 
 .ArrowFill {
-  fill: canvas;
+  fill: light-dark(white, var(--color-gray-950));
 }
 
 .ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
+  fill: light-dark(var(--color-gray-950), white);
 }
 
 .ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
-  }
+  fill: light-dark(white, var(--color-gray-950));
 }
 
 .Item {
@@ -171,7 +166,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: light-dark(white, var(--color-gray-950));
   }
 
   &[data-highlighted]::before {
@@ -180,16 +175,11 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
-  }
-
-  &[data-disabled][data-highlighted]::before {
-    background-color: var(--color-gray-300);
+    background-color: light-dark(var(--color-gray-950), white);
   }
 
   &[data-disabled] {
-    color: var(--color-gray-400);
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 }
 
@@ -197,12 +187,12 @@
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--color-gray-500);
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
   padding: 0.5rem 1rem;
 }
 
 .Separator {
-  margin: 0.375rem 1rem;
+  margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: light-dark(var(--color-gray-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
index 8a31b2a1594..ff05eb4deae 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
@@ -4,37 +4,37 @@
   align-items: center;
   justify-content: center;
   gap: 0.375rem;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -48,31 +48,26 @@
 
 .Popup {
   box-sizing: border-box;
+  outline: 0;
   padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+    transform: scale(0.98);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    filter: none;
   }
 }
 
@@ -101,19 +96,15 @@
 }
 
 .ArrowFill {
-  fill: canvas;
+  fill: light-dark(white, var(--color-gray-950));
 }
 
 .ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
+  fill: light-dark(var(--color-gray-950), white);
 }
 
 .ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
-  }
+  fill: light-dark(white, var(--color-gray-950));
 }
 
 .CheckboxItem {
@@ -134,7 +125,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: light-dark(white, var(--color-gray-950));
   }
 
   &[data-highlighted]::before {
@@ -143,16 +134,11 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
-  }
-
-  &[data-disabled][data-highlighted]::before {
-    background-color: var(--color-gray-300);
+    background-color: light-dark(var(--color-gray-950), white);
   }
 
   &[data-disabled] {
-    color: var(--color-gray-400);
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 }
 
@@ -171,7 +157,7 @@
 }
 
 .Separator {
-  margin: 0.375rem 1rem;
+  margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: light-dark(var(--color-gray-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
index 6eb873239ab..bba318c8716 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
@@ -25,7 +25,7 @@ export default function ExampleMenu() {
               className={styles.CheckboxItem}
             >
               <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                <CheckIcon className={styles.CheckboxItemIndicatorIcon} />
+                <CheckboxCheckIcon className={styles.CheckboxItemIndicatorIcon} />
               </Menu.CheckboxItemIndicator>
               <span className={styles.CheckboxItemText}>Minimap</span>
             </Menu.CheckboxItem>
@@ -35,7 +35,7 @@ export default function ExampleMenu() {
               className={styles.CheckboxItem}
             >
               <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                <CheckIcon className={styles.CheckboxItemIndicatorIcon} />
+                <CheckboxCheckIcon className={styles.CheckboxItemIndicatorIcon} />
               </Menu.CheckboxItemIndicator>
               <span className={styles.CheckboxItemText}>Search</span>
             </Menu.CheckboxItem>
@@ -45,7 +45,7 @@ export default function ExampleMenu() {
               className={styles.CheckboxItem}
             >
               <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                <CheckIcon className={styles.CheckboxItemIndicatorIcon} />
+                <CheckboxCheckIcon className={styles.CheckboxItemIndicatorIcon} />
               </Menu.CheckboxItemIndicator>
               <span className={styles.CheckboxItemText}>Sidebar</span>
             </Menu.CheckboxItem>
@@ -83,10 +83,20 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   );
 }
 
-function CheckIcon(props: React.ComponentProps<'svg'>) {
+function CheckboxCheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index 9dc4c6fbe8c..7984c2a211a 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -2,6 +2,9 @@
 import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
+const checkboxItemClass =
+  "grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[disabled]:text-gray-500 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-gray-400";
+
 export default function ExampleMenu() {
   const [showMinimap, setShowMinimap] = React.useState(true);
   const [showSearch, setShowSearch] = React.useState(true);
@@ -9,42 +12,42 @@ 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-normal 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-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-[popup-open]:bg-gray-800">
         Workspace <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 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.Popup className="origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
             <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-hidden 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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
+              className={checkboxItemClass}
             >
               <Menu.CheckboxItemIndicator className="col-start-1">
-                <CheckIcon className="size-3" />
+                <CheckboxCheckIcon className="size-3" />
               </Menu.CheckboxItemIndicator>
               <span className="col-start-2">Minimap</span>
             </Menu.CheckboxItem>
             <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-hidden 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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
+              className={checkboxItemClass}
             >
               <Menu.CheckboxItemIndicator className="col-start-1">
-                <CheckIcon className="size-3" />
+                <CheckboxCheckIcon className="size-3" />
               </Menu.CheckboxItemIndicator>
               <span className="col-start-2">Search</span>
             </Menu.CheckboxItem>
             <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-hidden 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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
+              className={checkboxItemClass}
             >
               <Menu.CheckboxItemIndicator className="col-start-1">
-                <CheckIcon className="size-3" />
+                <CheckboxCheckIcon className="size-3" />
               </Menu.CheckboxItemIndicator>
               <span className="col-start-2">Sidebar</span>
             </Menu.CheckboxItem>
@@ -60,15 +63,15 @@ function ArrowSvg(props: React.ComponentProps<'svg'>) {
     <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
       <path
         d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
+        className="fill-white dark:fill-gray-950"
       />
       <path
         d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
+        className="fill-gray-950 dark:fill-white"
       />
       <path
         d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
+        className="fill-white dark:fill-gray-950"
       />
     </svg>
   );
@@ -82,10 +85,20 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   );
 }
 
-function CheckIcon(props: React.ComponentProps<'svg'>) {
+function CheckboxCheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
index 047849adb1b..227ab53689f 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -3,7 +3,11 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const itemClass =
-  'flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300';
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[disabled]:text-gray-500 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-gray-400";
+const triggerClass =
+  'flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-[popup-open]:bg-gray-800';
+const popupClass =
+  'origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]';
 
 interface MenuItemDefinition {
   label: string;
@@ -49,7 +53,7 @@ export default function MenuDetachedTriggersControlledDemo() {
           handle={demoMenu}
           payload={'library' as const}
           id="menu-trigger-1"
-          className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal 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={triggerClass}
         >
           Library
         </Menu.Trigger>
@@ -57,7 +61,7 @@ export default function MenuDetachedTriggersControlledDemo() {
           handle={demoMenu}
           payload={'playback' as const}
           id="menu-trigger-2"
-          className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal 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={triggerClass}
         >
           Playback
         </Menu.Trigger>
@@ -65,14 +69,14 @@ export default function MenuDetachedTriggersControlledDemo() {
           handle={demoMenu}
           payload={'share' as const}
           id="menu-trigger-3"
-          className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal 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={triggerClass}
         >
           Share
         </Menu.Trigger>
 
         <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-normal 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={triggerClass}
           onClick={() => {
             setActiveTrigger('menu-trigger-2');
             setOpen(true);
@@ -91,7 +95,7 @@ export default function MenuDetachedTriggersControlledDemo() {
         {({ payload }) => (
           <Menu.Portal>
             <Menu.Positioner sideOffset={8} className="outline-hidden">
-              <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 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.Popup className={popupClass}>
                 <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>
@@ -116,15 +120,15 @@ function ArrowSvg(props: React.ComponentProps<'svg'>) {
     <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
       <path
         d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
+        className="fill-white dark:fill-gray-950"
       />
       <path
         d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
+        className="fill-gray-950 dark:fill-white"
       />
       <path
         d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
+        className="fill-white dark:fill-gray-950"
       />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
index e26c320e37a..6bca7222692 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
@@ -36,22 +36,25 @@ type MenuKey = keyof typeof MENUS;
 const demoMenu = Menu.createHandle<MenuKey>();
 
 const triggerClass = `
-  flex h-10 items-center justify-center
-  rounded-md border border-gray-200 bg-gray-50
-  px-3.5 text-base font-normal text-gray-900
+  flex h-8 items-center justify-center
+  rounded-none border border-gray-950 bg-white
+  px-3 text-sm leading-5 font-normal text-gray-950
   select-none
-  hover:bg-gray-100 active:bg-gray-100 data-popup-open:bg-gray-100
+  hover:bg-gray-50 active:bg-gray-100 data-[popup-open]:bg-gray-100
+  dark:border-white dark:bg-gray-950 dark:text-white
+  dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-[popup-open]:bg-gray-800
   focus-visible:outline focus-visible:outline-2
-  focus-visible:-outline-offset-1 focus-visible:outline-blue-800
+  focus-visible:-outline-offset-2 focus-visible:outline-blue-800
 `;
 
 const itemClass = `
   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]:relative data-[highlighted]:z-0 data-[highlighted]:text-white
   data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1
   data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1]
-  data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900
+  data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-['']
+  dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white
 `;
 
 export default function MenuDetachedTriggersFullDemo() {
@@ -83,15 +86,14 @@ export default function MenuDetachedTriggersFullDemo() {
               <Menu.Popup
                 className={`
                   relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] py-1
-                  origin-[var(--transform-origin)] rounded-md
-                  bg-[canvas] text-gray-900 shadow-lg shadow-gray-200
-                  outline outline-1 outline-gray-200
+                  origin-[var(--transform-origin)] border border-gray-950
+                  bg-white text-gray-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))]
                   transition-[width,height,opacity,scale]
                   duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]
                   data-[starting-style]:scale-90 data-[starting-style]:opacity-0
                   data-[ending-style]:scale-90 data-[ending-style]:opacity-0
                   data-instant:transition-none
-                  dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300
+                  dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]
                 `}
               >
                 <Menu.Arrow
@@ -137,7 +139,7 @@ export default function MenuDetachedTriggersFullDemo() {
                       <React.Fragment key={groupIndex}>
                         <Menu.Group>
                           {groupIndex === 0 && (
-                            <Menu.GroupLabel className="px-4 py-2 text-xs tracking-[0.05em] text-gray-500 uppercase">
+                            <Menu.GroupLabel className="px-4 py-2 text-xs tracking-[0.05em] text-gray-600 uppercase dark:text-gray-400">
                               {MENUS[payload].heading}
                             </Menu.GroupLabel>
                           )}
@@ -148,7 +150,7 @@ export default function MenuDetachedTriggersFullDemo() {
                           ))}
                         </Menu.Group>
                         {groupIndex < MENUS[payload].groups.length - 1 && (
-                          <Menu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
+                          <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
                         )}
                       </React.Fragment>
                     ))}
@@ -167,15 +169,15 @@ function ArrowSvg(props: React.ComponentProps<'svg'>) {
     <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
       <path
         d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
+        className="fill-white dark:fill-gray-950"
       />
       <path
         d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
+        className="fill-gray-950 dark:fill-white"
       />
       <path
         d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
+        className="fill-white dark:fill-gray-950"
       />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
index a17122804ab..9c2fbef7064 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
@@ -4,9 +4,9 @@ import { Menu } from '@base-ui/react/menu';
 
 const demoMenu = Menu.createHandle();
 const popupClass =
-  'origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 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';
+  'origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]';
 const itemClass =
-  'flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300';
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[disabled]:text-gray-500 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-gray-400";
 
 export default function MenuDetachedTriggersSimpleDemo() {
   return (
@@ -14,7 +14,7 @@ export default function MenuDetachedTriggersSimpleDemo() {
       <Menu.Trigger
         handle={demoMenu}
         aria-label="Project actions"
-        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 dark:border-gray-300 dark:bg-gray-100 dark:text-gray-900"
+        className="flex size-8 items-center justify-center rounded-none border border-gray-950 bg-white text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-[popup-open]:bg-gray-800"
       >
         <DotsIcon />
       </Menu.Trigger>
@@ -29,7 +29,7 @@ export default function MenuDetachedTriggersSimpleDemo() {
               <Menu.Item className={itemClass}>Rename</Menu.Item>
               <Menu.Item className={itemClass}>Duplicate</Menu.Item>
               <Menu.Item className={itemClass}>Move to folder</Menu.Item>
-              <Menu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
+              <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
               <Menu.Item className={itemClass}>Archive</Menu.Item>
               <Menu.Item className={`${itemClass} text-red-600`}>Delete</Menu.Item>
             </Menu.Popup>
@@ -45,15 +45,15 @@ export function ArrowSvg(props: React.ComponentProps<'svg'>) {
     <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
       <path
         d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
+        className="fill-white dark:fill-gray-950"
       />
       <path
         d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
+        className="fill-gray-950 dark:fill-white"
       />
       <path
         d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
+        className="fill-white dark:fill-gray-950"
       />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
index a6e6daa619a..cd863f3df0b 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
@@ -4,37 +4,37 @@
   align-items: center;
   justify-content: center;
   gap: 0.375rem;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -48,31 +48,26 @@
 
 .Popup {
   box-sizing: border-box;
+  outline: 0;
   padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+    transform: scale(0.98);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    filter: none;
   }
 }
 
@@ -101,19 +96,15 @@
 }
 
 .ArrowFill {
-  fill: canvas;
+  fill: light-dark(white, var(--color-gray-950));
 }
 
 .ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
+  fill: light-dark(var(--color-gray-950), white);
 }
 
 .ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
-  }
+  fill: light-dark(white, var(--color-gray-950));
 }
 
 .CheckboxItem,
@@ -134,7 +125,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: light-dark(white, var(--color-gray-950));
   }
 
   &[data-highlighted]::before {
@@ -143,16 +134,11 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
-  }
-
-  &[data-disabled][data-highlighted]::before {
-    background-color: var(--color-gray-300);
+    background-color: light-dark(var(--color-gray-950), white);
   }
 
   &[data-disabled] {
-    color: var(--color-gray-400);
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 }
 
@@ -174,11 +160,10 @@
 }
 
 .Separator {
-  margin-block: 0.375rem;
-  margin-left: 1.875rem;
-  margin-right: 1rem;
+  margin-block: 0.25rem;
+  margin-inline: 0.25rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: light-dark(var(--color-gray-950), white);
 }
 
 .GroupLabel {
@@ -187,7 +172,10 @@
   padding-block: 0.5rem;
   padding-left: 1.875rem;
   padding-right: 2rem;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
+  font-weight: 700;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: light-dark(var(--color-gray-500), var(--color-gray-400));
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
index fb1d37e3cdf..d96520554c4 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
@@ -26,19 +26,19 @@ export default function ExampleMenu() {
               <Menu.RadioGroup value={value} onValueChange={setValue}>
                 <Menu.RadioItem className={styles.RadioItem} value="date">
                   <Menu.RadioItemIndicator className={styles.RadioItemIndicator}>
-                    <CheckIcon className={styles.RadioItemIndicatorIcon} />
+                    <CheckboxCheckIcon className={styles.RadioItemIndicatorIcon} />
                   </Menu.RadioItemIndicator>
                   <span className={styles.RadioItemText}>Date</span>
                 </Menu.RadioItem>
                 <Menu.RadioItem className={styles.RadioItem} value="name">
                   <Menu.RadioItemIndicator className={styles.RadioItemIndicator}>
-                    <CheckIcon className={styles.RadioItemIndicatorIcon} />
+                    <CheckboxCheckIcon className={styles.RadioItemIndicatorIcon} />
                   </Menu.RadioItemIndicator>
                   <span className={styles.RadioItemText}>Name</span>
                 </Menu.RadioItem>
                 <Menu.RadioItem className={styles.RadioItem} value="type">
                   <Menu.RadioItemIndicator className={styles.RadioItemIndicator}>
-                    <CheckIcon className={styles.RadioItemIndicatorIcon} />
+                    <CheckboxCheckIcon className={styles.RadioItemIndicatorIcon} />
                   </Menu.RadioItemIndicator>
                   <span className={styles.RadioItemText}>Type</span>
                 </Menu.RadioItem>
@@ -55,7 +55,7 @@ export default function ExampleMenu() {
                 className={styles.CheckboxItem}
               >
                 <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                  <CheckIcon className={styles.CheckboxItemIndicatorIcon} />
+                  <CheckboxCheckIcon className={styles.CheckboxItemIndicatorIcon} />
                 </Menu.CheckboxItemIndicator>
                 <span className={styles.CheckboxItemText}>Minimap</span>
               </Menu.CheckboxItem>
@@ -65,7 +65,7 @@ export default function ExampleMenu() {
                 className={styles.CheckboxItem}
               >
                 <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                  <CheckIcon className={styles.CheckboxItemIndicatorIcon} />
+                  <CheckboxCheckIcon className={styles.CheckboxItemIndicatorIcon} />
                 </Menu.CheckboxItemIndicator>
                 <span className={styles.CheckboxItemText}>Search</span>
               </Menu.CheckboxItem>
@@ -75,7 +75,7 @@ export default function ExampleMenu() {
                 className={styles.CheckboxItem}
               >
                 <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                  <CheckIcon className={styles.CheckboxItemIndicatorIcon} />
+                  <CheckboxCheckIcon className={styles.CheckboxItemIndicatorIcon} />
                 </Menu.CheckboxItemIndicator>
                 <span className={styles.CheckboxItemText}>Sidebar</span>
               </Menu.CheckboxItem>
@@ -114,10 +114,20 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   );
 }
 
-function CheckIcon(props: React.ComponentProps<'svg'>) {
+function CheckboxCheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index f5cadcd14c5..6a4addbec93 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -2,6 +2,9 @@
 import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
+const itemClass =
+  "grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[disabled]:text-gray-500 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-gray-400";
+
 export default function ExampleMenu() {
   const [value, setValue] = React.useState('date');
   const [showMinimap, setShowMinimap] = React.useState(true);
@@ -10,84 +13,75 @@ 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-normal 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-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-[popup-open]:bg-gray-800">
         View <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 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.Popup className="origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
             <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.Group>
-              <Menu.GroupLabel className="cursor-default py-2 pr-8 pl-7.5 text-sm leading-4 text-gray-600 select-none">
+              <Menu.GroupLabel className="cursor-default py-2 pr-8 pl-7.5 text-xs font-bold tracking-wider text-gray-500 uppercase select-none dark:text-gray-400">
                 Sort
               </Menu.GroupLabel>
               <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-hidden 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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
-                >
+                <Menu.RadioItem value="date" className={itemClass}>
                   <Menu.RadioItemIndicator className="col-start-1">
-                    <CheckIcon className="size-3" />
+                    <CheckboxCheckIcon className="size-3" />
                   </Menu.RadioItemIndicator>
                   <span className="col-start-2">Date</span>
                 </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-hidden 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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
-                >
+                <Menu.RadioItem value="name" className={itemClass}>
                   <Menu.RadioItemIndicator className="col-start-1">
-                    <CheckIcon className="size-3" />
+                    <CheckboxCheckIcon className="size-3" />
                   </Menu.RadioItemIndicator>
                   <span className="col-start-2">Name</span>
                 </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-hidden 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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
-                >
+                <Menu.RadioItem value="type" className={itemClass}>
                   <Menu.RadioItemIndicator className="col-start-1">
-                    <CheckIcon className="size-3" />
+                    <CheckboxCheckIcon className="size-3" />
                   </Menu.RadioItemIndicator>
                   <span className="col-start-2">Type</span>
                 </Menu.RadioItem>
               </Menu.RadioGroup>
             </Menu.Group>
 
-            <Menu.Separator className="my-1.5 mr-4 ml-7.5 h-px bg-gray-200" />
+            <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
 
             <Menu.Group>
-              <Menu.GroupLabel className="cursor-default py-2 pr-8 pl-7.5 text-sm leading-4 text-gray-600 select-none">
+              <Menu.GroupLabel className="cursor-default py-2 pr-8 pl-7.5 text-xs font-bold tracking-wider text-gray-500 uppercase select-none dark:text-gray-400">
                 Workspace
               </Menu.GroupLabel>
               <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-hidden 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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
+                className={itemClass}
               >
                 <Menu.CheckboxItemIndicator className="col-start-1">
-                  <CheckIcon className="size-3" />
+                  <CheckboxCheckIcon className="size-3" />
                 </Menu.CheckboxItemIndicator>
                 <span className="col-start-2">Minimap</span>
               </Menu.CheckboxItem>
               <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-hidden 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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
+                className={itemClass}
               >
                 <Menu.CheckboxItemIndicator className="col-start-1">
-                  <CheckIcon className="size-3" />
+                  <CheckboxCheckIcon className="size-3" />
                 </Menu.CheckboxItemIndicator>
                 <span className="col-start-2">Search</span>
               </Menu.CheckboxItem>
               <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-hidden 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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
+                className={itemClass}
               >
                 <Menu.CheckboxItemIndicator className="col-start-1">
-                  <CheckIcon className="size-3" />
+                  <CheckboxCheckIcon className="size-3" />
                 </Menu.CheckboxItemIndicator>
                 <span className="col-start-2">Sidebar</span>
               </Menu.CheckboxItem>
@@ -104,15 +98,15 @@ function ArrowSvg(props: React.ComponentProps<'svg'>) {
     <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
       <path
         d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
+        className="fill-white dark:fill-gray-950"
       />
       <path
         d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
+        className="fill-gray-950 dark:fill-white"
       />
       <path
         d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
+        className="fill-white dark:fill-gray-950"
       />
     </svg>
   );
@@ -126,10 +120,20 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   );
 }
 
-function CheckIcon(props: React.ComponentProps<'svg'>) {
+function CheckboxCheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
index 12d2e965a42..2da7bb67e9d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
@@ -4,37 +4,37 @@
   align-items: center;
   justify-content: center;
   gap: 0.375rem;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -48,31 +48,26 @@
 
 .Popup {
   box-sizing: border-box;
+  outline: 0;
   padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+    transform: scale(0.98);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    filter: none;
   }
 }
 
@@ -101,19 +96,15 @@
 }
 
 .ArrowFill {
-  fill: canvas;
+  fill: light-dark(white, var(--color-gray-950));
 }
 
 .ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
+  fill: light-dark(var(--color-gray-950), white);
 }
 
 .ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
-  }
+  fill: light-dark(white, var(--color-gray-950));
 }
 
 .Item {
@@ -130,7 +121,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: light-dark(white, var(--color-gray-950));
   }
 
   &[data-highlighted]::before {
@@ -139,21 +130,16 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
-  }
-
-  &[data-disabled][data-highlighted]::before {
-    background-color: var(--color-gray-300);
+    background-color: light-dark(var(--color-gray-950), white);
   }
 
   &[data-disabled] {
-    color: var(--color-gray-400);
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 }
 
 .Separator {
-  margin: 0.375rem 1rem;
+  margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: light-dark(var(--color-gray-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
index d2849f38c71..ecc8b06ae46 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
@@ -1,38 +1,29 @@
 import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
+const itemClass =
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[disabled]:text-gray-500 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-gray-400";
+
 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-normal 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-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-[popup-open]:bg-gray-800">
         Song <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 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.Popup className="origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
             <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-hidden 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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
-              Add to Library
-            </Menu.Item>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
-              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-hidden 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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
-              Play Next
-            </Menu.Item>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
-              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-hidden 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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
-              Favorite
-            </Menu.Item>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
-              Share
-            </Menu.Item>
+            <Menu.Item className={itemClass}>Add to Library</Menu.Item>
+            <Menu.Item className={itemClass}>Add to Playlist</Menu.Item>
+            <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+            <Menu.Item className={itemClass}>Play Next</Menu.Item>
+            <Menu.Item className={itemClass}>Play Last</Menu.Item>
+            <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+            <Menu.Item className={itemClass}>Favorite</Menu.Item>
+            <Menu.Item className={itemClass}>Share</Menu.Item>
           </Menu.Popup>
         </Menu.Positioner>
       </Menu.Portal>
@@ -45,15 +36,15 @@ function ArrowSvg(props: React.ComponentProps<'svg'>) {
     <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
       <path
         d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
+        className="fill-white dark:fill-gray-950"
       />
       <path
         d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
+        className="fill-gray-950 dark:fill-white"
       />
       <path
         d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
+        className="fill-white dark:fill-gray-950"
       />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
index 12d2e965a42..2da7bb67e9d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
@@ -4,37 +4,37 @@
   align-items: center;
   justify-content: center;
   gap: 0.375rem;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -48,31 +48,26 @@
 
 .Popup {
   box-sizing: border-box;
+  outline: 0;
   padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+    transform: scale(0.98);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    filter: none;
   }
 }
 
@@ -101,19 +96,15 @@
 }
 
 .ArrowFill {
-  fill: canvas;
+  fill: light-dark(white, var(--color-gray-950));
 }
 
 .ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
+  fill: light-dark(var(--color-gray-950), white);
 }
 
 .ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
-  }
+  fill: light-dark(white, var(--color-gray-950));
 }
 
 .Item {
@@ -130,7 +121,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: light-dark(white, var(--color-gray-950));
   }
 
   &[data-highlighted]::before {
@@ -139,21 +130,16 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
-  }
-
-  &[data-disabled][data-highlighted]::before {
-    background-color: var(--color-gray-300);
+    background-color: light-dark(var(--color-gray-950), white);
   }
 
   &[data-disabled] {
-    color: var(--color-gray-400);
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 }
 
 .Separator {
-  margin: 0.375rem 1rem;
+  margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: light-dark(var(--color-gray-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
index 6a4fda26a8a..c7619bbff1b 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
@@ -1,34 +1,29 @@
 import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
+const itemClass =
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[disabled]:text-gray-500 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-gray-400";
+
 export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger
         openOnHover
-        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-normal 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"
+        className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-[popup-open]:bg-gray-800"
       >
         Add to playlist <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 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.Popup className="origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
             <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-hidden 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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
-              Get Up!
-            </Menu.Item>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
-              Inside Out
-            </Menu.Item>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
-              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-hidden 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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
-              New playlist…
-            </Menu.Item>
+            <Menu.Item className={itemClass}>Get Up!</Menu.Item>
+            <Menu.Item className={itemClass}>Inside Out</Menu.Item>
+            <Menu.Item className={itemClass}>Night Beats</Menu.Item>
+            <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+            <Menu.Item className={itemClass}>New playlist…</Menu.Item>
           </Menu.Popup>
         </Menu.Positioner>
       </Menu.Portal>
@@ -41,15 +36,15 @@ function ArrowSvg(props: React.ComponentProps<'svg'>) {
     <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
       <path
         d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
+        className="fill-white dark:fill-gray-950"
       />
       <path
         d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
+        className="fill-gray-950 dark:fill-white"
       />
       <path
         d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
+        className="fill-white dark:fill-gray-950"
       />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
index 116cef8c699..96e9662a6ce 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
@@ -4,37 +4,37 @@
   align-items: center;
   justify-content: center;
   gap: 0.375rem;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -48,31 +48,26 @@
 
 .Popup {
   box-sizing: border-box;
+  outline: 0;
   padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+    transform: scale(0.98);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    filter: none;
   }
 }
 
@@ -101,19 +96,15 @@
 }
 
 .ArrowFill {
-  fill: canvas;
+  fill: light-dark(white, var(--color-gray-950));
 }
 
 .ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
+  fill: light-dark(var(--color-gray-950), white);
 }
 
 .ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
-  }
+  fill: light-dark(white, var(--color-gray-950));
 }
 
 .RadioItem {
@@ -133,7 +124,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: light-dark(white, var(--color-gray-950));
   }
 
   &[data-highlighted]::before {
@@ -142,16 +133,11 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
-  }
-
-  &[data-disabled][data-highlighted]::before {
-    background-color: var(--color-gray-300);
+    background-color: light-dark(var(--color-gray-950), white);
   }
 
   &[data-disabled] {
-    color: var(--color-gray-400);
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 }
 
@@ -170,7 +156,7 @@
 }
 
 .Separator {
-  margin: 0.375rem 1rem;
+  margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: light-dark(var(--color-gray-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
index 3df77c471e7..e0290682b81 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
@@ -72,8 +72,18 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index 2a8c24c1ec5..c5489741018 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -2,42 +2,36 @@
 import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
+const radioItemClass =
+  "grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[disabled]:text-gray-500 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-gray-400";
+
 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-normal 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-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-[popup-open]:bg-gray-800">
         Sort <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 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.Popup className="origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
             <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-hidden 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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
-              >
+              <Menu.RadioItem value="date" className={radioItemClass}>
                 <Menu.RadioItemIndicator className="col-start-1">
                   <CheckIcon className="size-3" />
                 </Menu.RadioItemIndicator>
                 <span className="col-start-2">Date</span>
               </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-hidden 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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
-              >
+              <Menu.RadioItem value="name" className={radioItemClass}>
                 <Menu.RadioItemIndicator className="col-start-1">
                   <CheckIcon className="size-3" />
                 </Menu.RadioItemIndicator>
                 <span className="col-start-2">Name</span>
               </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-hidden 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-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300"
-              >
+              <Menu.RadioItem value="type" className={radioItemClass}>
                 <Menu.RadioItemIndicator className="col-start-1">
                   <CheckIcon className="size-3" />
                 </Menu.RadioItemIndicator>
@@ -56,15 +50,15 @@ function ArrowSvg(props: React.ComponentProps<'svg'>) {
     <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
       <path
         d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
+        className="fill-white dark:fill-gray-950"
       />
       <path
         d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
+        className="fill-gray-950 dark:fill-white"
       />
       <path
         d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
+        className="fill-white dark:fill-gray-950"
       />
     </svg>
   );
@@ -80,8 +74,18 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
index 6910c7196ad..43f7b3c7fa3 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
@@ -4,37 +4,37 @@
   align-items: center;
   justify-content: center;
   gap: 0.375rem;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -48,31 +48,26 @@
 
 .Popup {
   box-sizing: border-box;
+  outline: 0;
   padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+    transform: scale(0.98);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    filter: none;
   }
 }
 
@@ -101,19 +96,15 @@
 }
 
 .ArrowFill {
-  fill: canvas;
+  fill: light-dark(white, var(--color-gray-950));
 }
 
 .ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
+  fill: light-dark(var(--color-gray-950), white);
 }
 
 .ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
-  }
+  fill: light-dark(white, var(--color-gray-950));
 }
 
 .Item,
@@ -133,38 +124,31 @@
     position: relative;
   }
 
-  &[data-popup-open]::before {
-    content: '';
-    z-index: -1;
-    position: absolute;
-    inset-block: 0;
-    inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-100);
-  }
-
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: light-dark(white, var(--color-gray-950));
   }
 
+  &[data-popup-open]::before,
   &[data-highlighted]::before {
     content: '';
     z-index: -1;
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
   }
 
-  &[data-disabled][data-highlighted]::before {
-    background-color: var(--color-gray-300);
+  &[data-popup-open]::before {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
+  &[data-highlighted]::before {
+    background-color: light-dark(var(--color-gray-950), white);
   }
 
   &[data-disabled] {
-    color: var(--color-gray-400);
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 }
 
@@ -176,7 +160,7 @@
 }
 
 .Separator {
-  margin: 0.375rem 1rem;
+  margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: light-dark(var(--color-gray-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
index 09882315b66..633ac80796a 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
@@ -2,24 +2,29 @@
 import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
+const popupClass =
+  'origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]';
+const itemClass =
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[disabled]:text-gray-500 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-gray-400";
+const submenuTriggerClass =
+  "flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[disabled]:text-gray-500 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-gray-400";
+
 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-normal 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-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-[popup-open]:bg-gray-800">
         Song <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 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.Popup className={popupClass}>
             <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-hidden 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-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
-              Add to Library
-            </Menu.Item>
+            <Menu.Item className={itemClass}>Add to Library</Menu.Item>
 
             <Menu.SubmenuRoot>
-              <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 outline-hidden 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-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900 data-[disabled]:text-gray-400 data-[disabled]:data-[highlighted]:before:bg-gray-300">
+              <Menu.SubmenuTrigger className={submenuTriggerClass}>
                 Add to Playlist <ChevronRightIcon />
               </Menu.SubmenuTrigger>
               <Menu.Portal>
@@ -28,47 +33,27 @@ export default function ExampleMenu() {
                   sideOffset={getOffset}
                   alignOffset={getOffset}
                 >
-                  <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 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-hidden 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-xs 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-hidden 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-xs 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-hidden 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-xs 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-hidden 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-xs 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-hidden 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-xs 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-hidden 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-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-                      Share
-                    </Menu.Item>
+                  <Menu.Popup className={popupClass}>
+                    <Menu.Item className={itemClass}>Add to Library</Menu.Item>
+                    <Menu.Item className={itemClass}>Add to Playlist</Menu.Item>
+                    <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+                    <Menu.Item className={itemClass}>Play Next</Menu.Item>
+                    <Menu.Item className={itemClass}>Play Last</Menu.Item>
+                    <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+                    <Menu.Item className={itemClass}>Favorite</Menu.Item>
+                    <Menu.Item className={itemClass}>Share</Menu.Item>
                   </Menu.Popup>
                 </Menu.Positioner>
               </Menu.Portal>
             </Menu.SubmenuRoot>
 
-            <Menu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
+            <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
 
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-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-xs 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-hidden 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-xs 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-hidden 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-xs 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-hidden 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-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-              Share
-            </Menu.Item>
+            <Menu.Item className={itemClass}>Play Next</Menu.Item>
+            <Menu.Item className={itemClass}>Play Last</Menu.Item>
+            <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+            <Menu.Item className={itemClass}>Favorite</Menu.Item>
+            <Menu.Item className={itemClass}>Share</Menu.Item>
           </Menu.Popup>
         </Menu.Positioner>
       </Menu.Portal>
@@ -85,15 +70,15 @@ function ArrowSvg(props: React.ComponentProps<'svg'>) {
     <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
       <path
         d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
+        className="fill-white dark:fill-gray-950"
       />
       <path
         d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
+        className="fill-gray-950 dark:fill-white"
       />
       <path
         d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
+        className="fill-white dark:fill-gray-950"
       />
     </svg>
   );

From e9d96040af5834140bacbca22d919318eb0bcd89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 27 Apr 2026 12:56:20 +0200
Subject: [PATCH 066/257] Menu brutalist

---
 .../menu/demos/submenu/css-modules/index.module.css           | 4 ++++
 .../react/components/menu/demos/submenu/tailwind/index.tsx    | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
index 43f7b3c7fa3..1be047ede0d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
@@ -147,6 +147,10 @@
     background-color: light-dark(var(--color-gray-950), white);
   }
 
+  &[data-highlighted][data-popup-open]::before {
+    background-color: light-dark(var(--color-gray-950), white);
+  }
+
   &[data-disabled] {
     color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
index 633ac80796a..48d01845dc2 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
@@ -5,9 +5,9 @@ import { Menu } from '@base-ui/react/menu';
 const popupClass =
   'origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]';
 const itemClass =
-  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[disabled]:text-gray-500 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-gray-400";
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 data-[disabled]:text-gray-500 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-gray-400";
 const submenuTriggerClass =
-  "flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[disabled]:text-gray-500 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-gray-400";
+  "flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 data-[disabled]:text-gray-500 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-gray-400";
 
 export default function ExampleMenu() {
   return (

From 4f0d9c1352221c521abe84d3ca46599680cbbbea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 27 Apr 2026 13:13:47 +0200
Subject: [PATCH 067/257] ContextMenu brutalist

---
 .../demos/hero/css-modules/index.module.css   | 51 +++++++------
 .../demos/hero/tailwind/index.tsx             | 35 ++++-----
 .../submenu/css-modules/index.module.css      | 76 +++++++++----------
 .../demos/submenu/tailwind/index.tsx          | 57 ++++++--------
 4 files changed, 102 insertions(+), 117 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
index efa3b4c0aa4..637d0d66c7c 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
@@ -5,12 +5,19 @@
   justify-content: center;
   width: 15rem;
   height: 12rem;
-  border: 1px solid var(--color-gray-300);
-  color: var(--color-gray-900);
-  border-radius: 0.375rem;
+  outline: 0;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
   font-weight: 400;
+  color: light-dark(var(--color-gray-950), white);
   -webkit-user-select: none;
   user-select: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
+  }
 }
 
 .Positioner {
@@ -19,29 +26,26 @@
 
 .Popup {
   box-sizing: border-box;
+  outline: 0;
   padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
+  &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+    transform: scale(0.98);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    filter: none;
   }
 }
 
@@ -59,7 +63,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: light-dark(white, var(--color-gray-950));
   }
 
   &[data-highlighted]::before {
@@ -68,13 +72,16 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    background-color: light-dark(var(--color-gray-950), white);
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 }
 
 .Separator {
-  margin: 0.375rem 1rem;
+  margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: light-dark(var(--color-gray-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
index 97539a18a37..5ed26f2ab95 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
@@ -1,34 +1,25 @@
 import { ContextMenu } from '@base-ui/react/context-menu';
 
+const itemClass =
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[disabled]:text-gray-500 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-gray-400";
+
 export default function ExampleMenu() {
   return (
     <ContextMenu.Root>
-      <ContextMenu.Trigger className="flex h-[12rem] w-[15rem] items-center justify-center rounded-sm border border-gray-300 text-gray-900 select-none font-normal">
+      <ContextMenu.Trigger className="flex h-[12rem] w-[15rem] items-center justify-center rounded-none border border-gray-950 bg-white text-gray-950 select-none font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-950 dark:text-white">
         Right click here
       </ContextMenu.Trigger>
       <ContextMenu.Portal>
         <ContextMenu.Positioner className="outline-hidden">
-          <ContextMenu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[opacity] data-[ending-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-            <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-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
-            </ContextMenu.Item>
-            <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-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
-            </ContextMenu.Item>
-            <ContextMenu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
-            <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-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
-            </ContextMenu.Item>
-            <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-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
-            </ContextMenu.Item>
-            <ContextMenu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
-            <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-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
-            </ContextMenu.Item>
-            <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-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
-            </ContextMenu.Item>
+          <ContextMenu.Popup className="origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
+            <ContextMenu.Item className={itemClass}>Add to Library</ContextMenu.Item>
+            <ContextMenu.Item className={itemClass}>Add to Playlist</ContextMenu.Item>
+            <ContextMenu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+            <ContextMenu.Item className={itemClass}>Play Next</ContextMenu.Item>
+            <ContextMenu.Item className={itemClass}>Play Last</ContextMenu.Item>
+            <ContextMenu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+            <ContextMenu.Item className={itemClass}>Favorite</ContextMenu.Item>
+            <ContextMenu.Item className={itemClass}>Share</ContextMenu.Item>
           </ContextMenu.Popup>
         </ContextMenu.Positioner>
       </ContextMenu.Portal>
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
index 92245678b48..31fe9cbcbd6 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
@@ -5,12 +5,19 @@
   justify-content: center;
   width: 15rem;
   height: 12rem;
-  border: 1px solid var(--color-gray-300);
-  color: var(--color-gray-900);
-  border-radius: 0.375rem;
+  outline: 0;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
   font-weight: 400;
+  color: light-dark(var(--color-gray-950), white);
   -webkit-user-select: none;
   user-select: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
+  }
 }
 
 .Positioner {
@@ -20,37 +27,26 @@
 .Popup,
 .SubmenuPopup {
   box-sizing: border-box;
+  outline: 0;
   padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
+  &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+    transform: scale(0.98);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
-  }
-}
-
-.SubmenuPopup {
-  &[data-starting-style],
-  &[data-ending-style] {
-    transform: scale(0.9);
-    opacity: 0;
+    filter: none;
   }
 }
 
@@ -79,19 +75,15 @@
 }
 
 .ArrowFill {
-  fill: canvas;
+  fill: light-dark(white, var(--color-gray-950));
 }
 
 .ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
+  fill: light-dark(var(--color-gray-950), white);
 }
 
 .ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
-  }
+  fill: light-dark(white, var(--color-gray-950));
 }
 
 .Item,
@@ -117,14 +109,13 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: light-dark(white, var(--color-gray-950));
   }
 
   &[data-highlighted]::before {
@@ -133,8 +124,15 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    background-color: light-dark(var(--color-gray-950), white);
+  }
+
+  &[data-highlighted][data-popup-open]::before {
+    background-color: light-dark(var(--color-gray-950), white);
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 }
 
@@ -146,7 +144,7 @@
 }
 
 .Separator {
-  margin: 0.375rem 1rem;
+  margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: light-dark(var(--color-gray-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
index 75b719bd7e2..39ae3de6bcc 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
@@ -1,59 +1,48 @@
 import * as React from 'react';
 import { ContextMenu } from '@base-ui/react/context-menu';
 
+const popupClass =
+  'origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]';
+const itemClass =
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 data-[disabled]:text-gray-500 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-gray-400";
+const submenuTriggerClass =
+  "flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 data-[disabled]:text-gray-500 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-gray-400";
+
 export default function ExampleContextMenu() {
   return (
     <ContextMenu.Root>
-      <ContextMenu.Trigger className="flex h-[12rem] w-[15rem] items-center justify-center rounded-sm border border-gray-300 text-gray-900 select-none font-normal">
+      <ContextMenu.Trigger className="flex h-[12rem] w-[15rem] items-center justify-center rounded-none border border-gray-950 bg-white text-gray-950 select-none font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-950 dark:text-white">
         Right click here
       </ContextMenu.Trigger>
       <ContextMenu.Portal>
         <ContextMenu.Positioner className="outline-hidden">
-          <ContextMenu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[opacity] data-[ending-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-            <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-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-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-              Add to Library
-            </ContextMenu.Item>
+          <ContextMenu.Popup className={popupClass}>
+            <ContextMenu.Item className={itemClass}>Add to Library</ContextMenu.Item>
 
             <ContextMenu.SubmenuRoot>
-              <ContextMenu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 outline-hidden 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-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
+              <ContextMenu.SubmenuTrigger className={submenuTriggerClass}>
                 Add to Playlist <ChevronRightIcon />
               </ContextMenu.SubmenuTrigger>
               <ContextMenu.Portal>
                 <ContextMenu.Positioner className="outline-hidden" alignOffset={-4} sideOffset={-4}>
-                  <ContextMenu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 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">
-                    <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-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-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-                      Get Up!
-                    </ContextMenu.Item>
-                    <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-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-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-                      Inside Out
-                    </ContextMenu.Item>
-                    <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-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-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-                      Night Beats
-                    </ContextMenu.Item>
-                    <ContextMenu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
-                    <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-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-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-                      New playlist…
-                    </ContextMenu.Item>
+                  <ContextMenu.Popup className={popupClass}>
+                    <ContextMenu.Item className={itemClass}>Get Up!</ContextMenu.Item>
+                    <ContextMenu.Item className={itemClass}>Inside Out</ContextMenu.Item>
+                    <ContextMenu.Item className={itemClass}>Night Beats</ContextMenu.Item>
+                    <ContextMenu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+                    <ContextMenu.Item className={itemClass}>New playlist…</ContextMenu.Item>
                   </ContextMenu.Popup>
                 </ContextMenu.Positioner>
               </ContextMenu.Portal>
             </ContextMenu.SubmenuRoot>
 
-            <ContextMenu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
+            <ContextMenu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
 
-            <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-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-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-              Play Next
-            </ContextMenu.Item>
-            <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-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-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-              Play Last
-            </ContextMenu.Item>
-            <ContextMenu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
-            <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-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-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-              Favorite
-            </ContextMenu.Item>
-            <ContextMenu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-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-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
-              Share
-            </ContextMenu.Item>
+            <ContextMenu.Item className={itemClass}>Play Next</ContextMenu.Item>
+            <ContextMenu.Item className={itemClass}>Play Last</ContextMenu.Item>
+            <ContextMenu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+            <ContextMenu.Item className={itemClass}>Favorite</ContextMenu.Item>
+            <ContextMenu.Item className={itemClass}>Share</ContextMenu.Item>
           </ContextMenu.Popup>
         </ContextMenu.Positioner>
       </ContextMenu.Portal>

From 1110c93a0f51b62abf2207fcb544e6a86d73ec45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 27 Apr 2026 13:59:24 +0200
Subject: [PATCH 068/257] useRender brutalist

---
 .../css-modules/index.module.css              | 48 +++++++++++--------
 .../render-callback/css-modules/index.tsx     |  2 +-
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
index 5e10a3d4c3a..bda29f8013a 100644
--- a/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
@@ -3,43 +3,51 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  gap: 0.25rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
-  & span {
-    font-variant-numeric: tabular-nums;
-    display: inline-block;
-    text-align: end;
-    min-width: 2.5ch;
-  }
-
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
+.count {
+  display: inline-block;
+  min-width: 2ch;
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
 .suffix {
-  margin-left: 0.125rem;
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+  border-left: 1px solid currentColor;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
diff --git a/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.tsx b/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.tsx
index 7d8d231fbf5..3937ba7cdc4 100644
--- a/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.tsx
@@ -22,7 +22,7 @@ function Counter(props: CounterProps) {
     type: 'button',
     children: (
       <React.Fragment>
-        Counter: <span>{count}</span>
+        Counter: <span className={styles.count}>{count}</span>
       </React.Fragment>
     ),
     onClick() {

From b38154f6aaaa125b5b5fdf24eabcbd91fd0f26ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 27 Apr 2026 14:21:00 +0200
Subject: [PATCH 069/257] NumberField brutalist

---
 .../demos/hero/css-modules/index.module.css   | 62 +++++++++++--------
 .../demos/hero/css-modules/index.tsx          |  9 +--
 .../demos/hero/tailwind/index.tsx             | 27 +++++---
 3 files changed, 57 insertions(+), 41 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
index 7e8f299d932..d435da6a399 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
@@ -20,37 +20,37 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Group {
   display: flex;
+  height: 2rem;
 }
 
 .Input {
   box-sizing: border-box;
   margin: 0;
-  padding: 0;
+  padding: 0 0.75rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-right: 0;
+  border-left: 0;
   border-radius: 0;
-  border-top: 1px solid var(--color-gray-200);
-  border-bottom: 1px solid var(--color-gray-200);
-  border-left: none;
-  border-right: none;
-  width: 6rem;
-  height: 2.5rem;
+  width: 7ch;
+  height: 100%;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
   background-color: transparent;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
 
-  text-align: center;
+  text-align: left;
   font-variant-numeric: tabular-nums;
 
   &:focus {
     z-index: 1;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -60,35 +60,43 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 2rem;
+  height: 100%;
   margin: 0;
   outline: 0;
   padding: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
   background-clip: padding-box;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
+
+  &:focus-visible {
+    z-index: 1;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
 .Decrement {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  border-right: 1px solid light-dark(var(--color-gray-950), white);
 }
 
 .Increment {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  border-left: 1px solid light-dark(var(--color-gray-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx
index b5ef4842427..e5ffb04eb7a 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx
@@ -44,10 +44,11 @@ function PlusIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 10 10"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.6"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M0 5H5M10 5H5M5 5V0M5 5V10" />
+      <path d="M5 0.5V9.5" />
+      <path d="M0.5 5H9.5" />
     </svg>
   );
 }
@@ -60,10 +61,10 @@ function MinusIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 10 10"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.6"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M0 5H10" />
+      <path d="M0.5 5H9.5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
index d15a8275ed2..a05181e698d 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
@@ -1,12 +1,18 @@
 import * as React from 'react';
 import { NumberField } from '@base-ui/react/number-field';
 
+const stepperClasses =
+  'flex h-full w-8 items-center justify-center border border-gray-950 rounded-none bg-white bg-clip-padding text-gray-950 outline-0 select-none hover:not-data-disabled:bg-gray-50 active:not-data-disabled:bg-gray-100 data-disabled:text-gray-500 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-900 dark:active:not-data-disabled:bg-gray-800 dark:data-disabled:text-gray-400';
+
 export default function ExampleNumberField() {
   const id = React.useId();
   return (
     <NumberField.Root id={id} defaultValue={100} className="flex flex-col items-start gap-1">
-      <NumberField.ScrubArea className="cursor-ew-resize">
-        <label htmlFor={id} className="cursor-ew-resize text-sm font-bold text-gray-900">
+      <NumberField.ScrubArea className="cursor-ew-resize font-bold select-none">
+        <label
+          htmlFor={id}
+          className="cursor-ew-resize text-sm leading-5 font-bold text-gray-950 dark:text-white"
+        >
           Amount
         </label>
         <NumberField.ScrubAreaCursor className="drop-shadow-[0_1px_1px_#0008] filter">
@@ -14,12 +20,12 @@ export default function ExampleNumberField() {
         </NumberField.ScrubAreaCursor>
       </NumberField.ScrubArea>
 
-      <NumberField.Group className="flex">
-        <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">
+      <NumberField.Group className="flex h-8">
+        <NumberField.Decrement className={stepperClasses}>
           <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 font-normal" />
-        <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">
+        <NumberField.Input className="h-full w-[7ch] border-y border-gray-950 rounded-none bg-transparent px-3 text-left text-sm font-normal text-gray-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white" />
+        <NumberField.Increment className={stepperClasses}>
           <PlusIcon />
         </NumberField.Increment>
       </NumberField.Group>
@@ -43,10 +49,11 @@ function PlusIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 10 10"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.6"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M0 5H5M10 5H5M5 5V0M5 5V10" />
+      <path d="M5 0.5V9.5" />
+      <path d="M0.5 5H9.5" />
     </svg>
   );
 }
@@ -59,10 +66,10 @@ function MinusIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 10 10"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.6"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M0 5H10" />
+      <path d="M0.5 5H9.5" />
     </svg>
   );
 }

From f2b800c994fb06120b837275b0e5d90169d6c0a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 27 Apr 2026 14:47:46 +0200
Subject: [PATCH 070/257] Menu: fix arrow on dark mode

---
 .../components/menu/demos/_index.module.css   | 39 +++++++++++--------
 .../css-modules/index.module.css              | 39 +++++++++++--------
 .../checkbox-items/css-modules/index.tsx      | 23 +----------
 .../demos/checkbox-items/tailwind/index.tsx   | 25 +-----------
 .../css-modules/index.tsx                     | 23 +----------
 .../tailwind/index.tsx                        | 25 +-----------
 .../css-modules/index.tsx                     | 23 +----------
 .../detached-triggers-full/tailwind/index.tsx | 37 +++++-------------
 .../css-modules/index.tsx                     | 23 +----------
 .../tailwind/index.tsx                        | 25 +-----------
 .../group-labels/css-modules/index.module.css | 39 +++++++++++--------
 .../demos/group-labels/css-modules/index.tsx  | 23 +----------
 .../demos/group-labels/tailwind/index.tsx     | 25 +-----------
 .../demos/hero/css-modules/index.module.css   | 39 +++++++++++--------
 .../menu/demos/hero/css-modules/index.tsx     | 23 +----------
 .../menu/demos/hero/tailwind/index.tsx        | 25 +-----------
 .../css-modules/index.module.css              | 39 +++++++++++--------
 .../demos/open-on-hover/css-modules/index.tsx | 23 +----------
 .../demos/open-on-hover/tailwind/index.tsx    | 25 +-----------
 .../radio-items/css-modules/index.module.css  | 39 +++++++++++--------
 .../demos/radio-items/css-modules/index.tsx   | 23 +----------
 .../menu/demos/radio-items/tailwind/index.tsx | 25 +-----------
 .../submenu/css-modules/index.module.css      | 39 +++++++++++--------
 .../menu/demos/submenu/css-modules/index.tsx  | 23 +----------
 .../menu/demos/submenu/tailwind/index.tsx     | 25 +-----------
 25 files changed, 196 insertions(+), 521 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
index 1c793f890ea..ffcf9ae3c23 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
@@ -92,6 +92,7 @@
 
 .Popup {
   box-sizing: border-box;
+  position: relative;
   outline: 0;
   padding-block: 0.25rem;
   border: 1px solid light-dark(var(--color-gray-950), white);
@@ -116,39 +117,45 @@
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
 
-.ArrowFill {
-  fill: light-dark(white, var(--color-gray-950));
-}
-
-.ArrowOuterStroke {
-  fill: light-dark(var(--color-gray-950), white);
-}
-
-.ArrowInnerStroke {
-  fill: light-dark(white, var(--color-gray-950));
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    background-color: light-dark(white, var(--color-gray-950));
+    border: 1px solid light-dark(var(--color-gray-950), white);
+    transform: translate(-50%, 50%) rotate(45deg);
+  }
 }
 
 .Item {
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
index ff05eb4deae..0b0c88e4130 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
@@ -48,6 +48,7 @@
 
 .Popup {
   box-sizing: border-box;
+  position: relative;
   outline: 0;
   padding-block: 0.25rem;
   border: 1px solid light-dark(var(--color-gray-950), white);
@@ -72,39 +73,45 @@
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
-
-.ArrowFill {
-  fill: light-dark(white, var(--color-gray-950));
-}
 
-.ArrowOuterStroke {
-  fill: light-dark(var(--color-gray-950), white);
-}
-
-.ArrowInnerStroke {
-  fill: light-dark(white, var(--color-gray-950));
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    background-color: light-dark(white, var(--color-gray-950));
+    border: 1px solid light-dark(var(--color-gray-950), white);
+    transform: translate(-50%, 50%) rotate(45deg);
+  }
 }
 
 .CheckboxItem {
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
index bba318c8716..fb3f4c2a32b 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
@@ -16,9 +16,7 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
           <Menu.Popup className={styles.Popup}>
-            <Menu.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </Menu.Arrow>
+            <Menu.Arrow className={styles.Arrow} />
             <Menu.CheckboxItem
               checked={showMinimap}
               onCheckedChange={setShowMinimap}
@@ -56,25 +54,6 @@ export default function ExampleMenu() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index 7984c2a211a..14426f6aba1 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -17,10 +17,8 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
-            <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.Popup className="relative origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
+            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.CheckboxItem
               checked={showMinimap}
               onCheckedChange={setShowMinimap}
@@ -58,25 +56,6 @@ export default function ExampleMenu() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-white dark:fill-gray-950"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-950 dark:fill-white"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="fill-white dark:fill-gray-950"
-      />
-    </svg>
-  );
-}
-
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/css-modules/index.tsx
index 0158ce2c72c..8cd0f30b2ee 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/css-modules/index.tsx
@@ -87,9 +87,7 @@ export default function MenuDetachedTriggersControlledDemo() {
           <Menu.Portal>
             <Menu.Positioner className={styles.Positioner} sideOffset={8}>
               <Menu.Popup className={styles.Popup}>
-                <Menu.Arrow className={styles.Arrow}>
-                  <ArrowSvg />
-                </Menu.Arrow>
+                <Menu.Arrow className={styles.Arrow} />
 
                 {payload &&
                   itemGroups[payload].map((item, index) => (
@@ -105,22 +103,3 @@ export default function MenuDetachedTriggersControlledDemo() {
     </React.Fragment>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
index 227ab53689f..832c81586fe 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -7,7 +7,7 @@ const itemClass =
 const triggerClass =
   'flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-[popup-open]:bg-gray-800';
 const popupClass =
-  'origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]';
+  'relative origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]';
 
 interface MenuItemDefinition {
   label: string;
@@ -96,9 +96,7 @@ export default function MenuDetachedTriggersControlledDemo() {
           <Menu.Portal>
             <Menu.Positioner sideOffset={8} className="outline-hidden">
               <Menu.Popup className={popupClass}>
-                <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.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
 
                 {payload &&
                   MENUS[payload].map((item, index) => (
@@ -114,22 +112,3 @@ export default function MenuDetachedTriggersControlledDemo() {
     </React.Fragment>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-white dark:fill-gray-950"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-950 dark:fill-white"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="fill-white dark:fill-gray-950"
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/css-modules/index.tsx
index ce7d72628a7..1c992885f39 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/css-modules/index.tsx
@@ -58,9 +58,7 @@ export default function MenuDetachedTriggersFullDemo() {
               className={`${styles.Positioner} ${transitionStyles.Positioner}`}
             >
               <Menu.Popup className={`${styles.Popup} ${transitionStyles.Popup}`}>
-                <Menu.Arrow className={`${styles.Arrow} ${transitionStyles.Arrow}`}>
-                  <ArrowSvg />
-                </Menu.Arrow>
+                <Menu.Arrow className={`${styles.Arrow} ${transitionStyles.Arrow}`} />
 
                 <Menu.Viewport className={transitionStyles.Viewport}>
                   {payload &&
@@ -92,22 +90,3 @@ export default function MenuDetachedTriggersFullDemo() {
     </div>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
index 6bca7222692..795a88a4d20 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
@@ -98,17 +98,19 @@ export default function MenuDetachedTriggersFullDemo() {
               >
                 <Menu.Arrow
                   className={`
-                    flex
+                    relative block w-3 h-1.5 overflow-clip
                     transition-[left]
                     duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]
-                    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
+                    data-[side=bottom]:top-[-6px]
+                    data-[side=left]:right-[-9px] data-[side=left]:rotate-90
+                    data-[side=right]:left-[-9px] data-[side=right]:-rotate-90
+                    data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180
+                    before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border
+                    before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))]
+                    before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white
+                    before:[transform:translate(-50%,50%)_rotate(45deg)]
                   `}
-                >
-                  <ArrowSvg />
-                </Menu.Arrow>
+                />
 
                 <Menu.Viewport
                   className={`
@@ -163,22 +165,3 @@ export default function MenuDetachedTriggersFullDemo() {
     </div>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-white dark:fill-gray-950"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-950 dark:fill-white"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="fill-white dark:fill-gray-950"
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx
index 37988fe36eb..c9e17c76dfc 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx
@@ -16,9 +16,7 @@ export default function MenuDetachedTriggersSimpleDemo() {
         <Menu.Portal>
           <Menu.Positioner sideOffset={8} className={styles.Positioner}>
             <Menu.Popup className={styles.Popup}>
-              <Menu.Arrow className={styles.Arrow}>
-                <ArrowSvg />
-              </Menu.Arrow>
+              <Menu.Arrow className={styles.Arrow} />
 
               <Menu.Item className={styles.Item}>Rename</Menu.Item>
               <Menu.Item className={styles.Item}>Duplicate</Menu.Item>
@@ -34,25 +32,6 @@ export default function MenuDetachedTriggersSimpleDemo() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
 function DotsIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
index 9c2fbef7064..d178a11fd77 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Menu } from '@base-ui/react/menu';
 
 const demoMenu = Menu.createHandle();
 const popupClass =
-  'origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]';
+  'relative origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]';
 const itemClass =
   "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[disabled]:text-gray-500 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-gray-400";
 
@@ -23,9 +23,7 @@ export default function MenuDetachedTriggersSimpleDemo() {
         <Menu.Portal>
           <Menu.Positioner sideOffset={8} className="outline-hidden">
             <Menu.Popup className={popupClass}>
-              <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.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Menu.Item className={itemClass}>Rename</Menu.Item>
               <Menu.Item className={itemClass}>Duplicate</Menu.Item>
               <Menu.Item className={itemClass}>Move to folder</Menu.Item>
@@ -40,25 +38,6 @@ export default function MenuDetachedTriggersSimpleDemo() {
   );
 }
 
-export function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-white dark:fill-gray-950"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-950 dark:fill-white"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="fill-white dark:fill-gray-950"
-      />
-    </svg>
-  );
-}
-
 export function DotsIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
index cd863f3df0b..c4f1c17f6cb 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
@@ -48,6 +48,7 @@
 
 .Popup {
   box-sizing: border-box;
+  position: relative;
   outline: 0;
   padding-block: 0.25rem;
   border: 1px solid light-dark(var(--color-gray-950), white);
@@ -72,39 +73,45 @@
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
-
-.ArrowFill {
-  fill: light-dark(white, var(--color-gray-950));
-}
 
-.ArrowOuterStroke {
-  fill: light-dark(var(--color-gray-950), white);
-}
-
-.ArrowInnerStroke {
-  fill: light-dark(white, var(--color-gray-950));
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    background-color: light-dark(white, var(--color-gray-950));
+    border: 1px solid light-dark(var(--color-gray-950), white);
+    transform: translate(-50%, 50%) rotate(45deg);
+  }
 }
 
 .CheckboxItem,
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
index d96520554c4..6c02585d873 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
@@ -17,9 +17,7 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
           <Menu.Popup className={styles.Popup}>
-            <Menu.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </Menu.Arrow>
+            <Menu.Arrow className={styles.Arrow} />
 
             <Menu.Group>
               <Menu.GroupLabel className={styles.GroupLabel}>Sort</Menu.GroupLabel>
@@ -87,25 +85,6 @@ export default function ExampleMenu() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index 6a4addbec93..c04fd5f5a39 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -18,10 +18,8 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
-            <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.Popup className="relative origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
+            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
 
             <Menu.Group>
               <Menu.GroupLabel className="cursor-default py-2 pr-8 pl-7.5 text-xs font-bold tracking-wider text-gray-500 uppercase select-none dark:text-gray-400">
@@ -93,25 +91,6 @@ export default function ExampleMenu() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-white dark:fill-gray-950"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-950 dark:fill-white"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="fill-white dark:fill-gray-950"
-      />
-    </svg>
-  );
-}
-
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
index 2da7bb67e9d..2728fc9fb37 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
@@ -48,6 +48,7 @@
 
 .Popup {
   box-sizing: border-box;
+  position: relative;
   outline: 0;
   padding-block: 0.25rem;
   border: 1px solid light-dark(var(--color-gray-950), white);
@@ -72,39 +73,45 @@
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
 
-.ArrowFill {
-  fill: light-dark(white, var(--color-gray-950));
-}
-
-.ArrowOuterStroke {
-  fill: light-dark(var(--color-gray-950), white);
-}
-
-.ArrowInnerStroke {
-  fill: light-dark(white, var(--color-gray-950));
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    background-color: light-dark(white, var(--color-gray-950));
+    border: 1px solid light-dark(var(--color-gray-950), white);
+    transform: translate(-50%, 50%) rotate(45deg);
+  }
 }
 
 .Item {
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx
index 664b3bf89df..6739af6f921 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx
@@ -11,9 +11,7 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
           <Menu.Popup className={styles.Popup}>
-            <Menu.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </Menu.Arrow>
+            <Menu.Arrow className={styles.Arrow} />
             <Menu.Item className={styles.Item}>Add to Library</Menu.Item>
             <Menu.Item className={styles.Item}>Add to Playlist</Menu.Item>
             <Menu.Separator className={styles.Separator} />
@@ -29,25 +27,6 @@ export default function ExampleMenu() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
index ecc8b06ae46..ac8878f09a1 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
@@ -12,10 +12,8 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
-            <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.Popup className="relative origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
+            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.Item className={itemClass}>Add to Library</Menu.Item>
             <Menu.Item className={itemClass}>Add to Playlist</Menu.Item>
             <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
@@ -31,25 +29,6 @@ export default function ExampleMenu() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-white dark:fill-gray-950"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-950 dark:fill-white"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="fill-white dark:fill-gray-950"
-      />
-    </svg>
-  );
-}
-
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
index 2da7bb67e9d..2728fc9fb37 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
@@ -48,6 +48,7 @@
 
 .Popup {
   box-sizing: border-box;
+  position: relative;
   outline: 0;
   padding-block: 0.25rem;
   border: 1px solid light-dark(var(--color-gray-950), white);
@@ -72,39 +73,45 @@
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
 
-.ArrowFill {
-  fill: light-dark(white, var(--color-gray-950));
-}
-
-.ArrowOuterStroke {
-  fill: light-dark(var(--color-gray-950), white);
-}
-
-.ArrowInnerStroke {
-  fill: light-dark(white, var(--color-gray-950));
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    background-color: light-dark(white, var(--color-gray-950));
+    border: 1px solid light-dark(var(--color-gray-950), white);
+    transform: translate(-50%, 50%) rotate(45deg);
+  }
 }
 
 .Item {
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx
index c0f0de4e8ed..be2da65a396 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx
@@ -11,9 +11,7 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
           <Menu.Popup className={styles.Popup}>
-            <Menu.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </Menu.Arrow>
+            <Menu.Arrow className={styles.Arrow} />
             <Menu.Item className={styles.Item}>Get Up!</Menu.Item>
             <Menu.Item className={styles.Item}>Inside Out</Menu.Item>
             <Menu.Item className={styles.Item}>Night Beats</Menu.Item>
@@ -26,25 +24,6 @@ export default function ExampleMenu() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
index c7619bbff1b..d9ab5bd47c5 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
@@ -15,10 +15,8 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
-            <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.Popup className="relative origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
+            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.Item className={itemClass}>Get Up!</Menu.Item>
             <Menu.Item className={itemClass}>Inside Out</Menu.Item>
             <Menu.Item className={itemClass}>Night Beats</Menu.Item>
@@ -31,25 +29,6 @@ export default function ExampleMenu() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-white dark:fill-gray-950"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-950 dark:fill-white"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="fill-white dark:fill-gray-950"
-      />
-    </svg>
-  );
-}
-
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
index 96e9662a6ce..2f5427506e3 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
@@ -48,6 +48,7 @@
 
 .Popup {
   box-sizing: border-box;
+  position: relative;
   outline: 0;
   padding-block: 0.25rem;
   border: 1px solid light-dark(var(--color-gray-950), white);
@@ -72,39 +73,45 @@
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
-
-.ArrowFill {
-  fill: light-dark(white, var(--color-gray-950));
-}
 
-.ArrowOuterStroke {
-  fill: light-dark(var(--color-gray-950), white);
-}
-
-.ArrowInnerStroke {
-  fill: light-dark(white, var(--color-gray-950));
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    background-color: light-dark(white, var(--color-gray-950));
+    border: 1px solid light-dark(var(--color-gray-950), white);
+    transform: translate(-50%, 50%) rotate(45deg);
+  }
 }
 
 .RadioItem {
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
index e0290682b81..c2ad1f58fea 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
@@ -13,9 +13,7 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
           <Menu.Popup className={styles.Popup}>
-            <Menu.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </Menu.Arrow>
+            <Menu.Arrow className={styles.Arrow} />
             <Menu.RadioGroup value={value} onValueChange={setValue}>
               <Menu.RadioItem className={styles.RadioItem} value="date">
                 <Menu.RadioItemIndicator className={styles.RadioItemIndicator}>
@@ -43,25 +41,6 @@ export default function ExampleMenu() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index c5489741018..0274b7a119f 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -14,10 +14,8 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
-            <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.Popup className="relative origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
+            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.RadioGroup value={value} onValueChange={setValue}>
               <Menu.RadioItem value="date" className={radioItemClass}>
                 <Menu.RadioItemIndicator className="col-start-1">
@@ -45,25 +43,6 @@ export default function ExampleMenu() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-white dark:fill-gray-950"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-950 dark:fill-white"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="fill-white dark:fill-gray-950"
-      />
-    </svg>
-  );
-}
-
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
index 1be047ede0d..848818f8b0f 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
@@ -48,6 +48,7 @@
 
 .Popup {
   box-sizing: border-box;
+  position: relative;
   outline: 0;
   padding-block: 0.25rem;
   border: 1px solid light-dark(var(--color-gray-950), white);
@@ -72,39 +73,45 @@
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
 
-.ArrowFill {
-  fill: light-dark(white, var(--color-gray-950));
-}
-
-.ArrowOuterStroke {
-  fill: light-dark(var(--color-gray-950), white);
-}
-
-.ArrowInnerStroke {
-  fill: light-dark(white, var(--color-gray-950));
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    background-color: light-dark(white, var(--color-gray-950));
+    border: 1px solid light-dark(var(--color-gray-950), white);
+    transform: translate(-50%, 50%) rotate(45deg);
+  }
 }
 
 .Item,
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx
index 5dc4491e365..c91fb00ef1a 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx
@@ -12,9 +12,7 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
           <Menu.Popup className={styles.Popup}>
-            <Menu.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </Menu.Arrow>
+            <Menu.Arrow className={styles.Arrow} />
             <Menu.Item className={styles.Item}>Add to Library</Menu.Item>
 
             <Menu.SubmenuRoot>
@@ -56,25 +54,6 @@ function getOffset({ side }: { side: Menu.Positioner.Props['side'] }) {
   return side === 'top' || side === 'bottom' ? 4 : -4;
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
index 48d01845dc2..30386fc41aa 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const popupClass =
-  'origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]';
+  'relative origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]';
 const itemClass =
   "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 data-[disabled]:text-gray-500 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-gray-400";
 const submenuTriggerClass =
@@ -18,9 +18,7 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
           <Menu.Popup className={popupClass}>
-            <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.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.Item className={itemClass}>Add to Library</Menu.Item>
 
             <Menu.SubmenuRoot>
@@ -65,25 +63,6 @@ function getOffset({ side }: { side: Menu.Positioner.Props['side'] }) {
   return side === 'top' || side === 'bottom' ? 4 : -4;
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-white dark:fill-gray-950"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-950 dark:fill-white"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="fill-white dark:fill-gray-950"
-      />
-    </svg>
-  );
-}
-
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>

From 21e52bb8484d0bf35ecf30c877a61c7e95c94773 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 27 Apr 2026 15:58:22 +0200
Subject: [PATCH 071/257] OTPField brutalist

---
 .../alphanumeric/css-modules/index.module.css | 21 ++++++------
 .../demos/alphanumeric/tailwind/index.tsx     |  9 ++---
 .../css-modules/index.module.css              | 33 +++++++++----------
 .../css-modules/index.module.css              | 23 +++++++------
 .../focused-placeholder/tailwind/index.tsx    |  6 ++--
 .../grouped/css-modules/index.module.css      | 30 +++++++----------
 .../demos/grouped/css-modules/index.tsx       | 12 +------
 .../demos/grouped/tailwind/index.tsx          | 18 +++-------
 .../demos/hero/css-modules/index.module.css   | 21 ++++++------
 .../otp-field/demos/hero/tailwind/index.tsx   |  6 ++--
 .../password/css-modules/index.module.css     | 21 ++++++------
 .../demos/password/tailwind/index.tsx         |  8 ++---
 12 files changed, 89 insertions(+), 119 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
index 91f357e5ead..43b48f77943 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
@@ -11,7 +11,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Root {
@@ -23,21 +23,20 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
-  border: 1px solid var(--color-gray-300);
+  border: 1px solid light-dark(var(--color-gray-950), white);
   width: 2.5rem;
-  height: 2.75rem;
-  border-radius: 0.5rem;
+  height: 2.5rem;
+  border-radius: 0;
   font-family: inherit;
-  font-size: 1.125rem;
-  font-weight: 500;
+  font-size: 1rem;
+  font-weight: 400;
   text-align: center;
   background-color: transparent;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
 
   &:focus {
-    outline: none;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -45,7 +44,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-600);
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 }
 
 .Code {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
index 21c28ad69e0..bb245cdd5c1 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function OTPFieldAlphanumericDemo() {
 
   return (
     <div className="flex w-full max-w-80 flex-col items-start gap-1">
-      <label htmlFor={id} className="text-sm font-bold text-gray-900">
+      <label htmlFor={id} className="text-sm leading-5 font-bold text-gray-950 dark:text-white">
         Recovery code
       </label>
       <OTPField.Root
@@ -22,13 +22,14 @@ export default function OTPFieldAlphanumericDemo() {
         {Array.from({ length: CODE_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="box-border m-0 h-11 w-10 rounded-lg border border-gray-300 bg-transparent text-center font-inherit text-lg font-medium text-gray-900 outline-none focus:outline-solid focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+            className="box-border m-0 h-10 w-10 rounded-none border border-gray-950 bg-transparent text-center font-inherit text-base font-normal text-gray-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
             aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
           />
         ))}
       </OTPField.Root>
-      <p id={descriptionId} className="m-0 text-sm text-gray-600">
-        Accept letters and numbers for backup codes such as <code>A7C9XZ</code>.
+      <p id={descriptionId} className="m-0 text-sm leading-5 text-gray-600 dark:text-gray-400">
+        Accept letters and numbers for backup codes such as{' '}
+        <code className="font-mono">A7C9XZ</code>.
       </p>
     </div>
   );
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
index 7e95671a599..b40cb227f4b 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
@@ -11,7 +11,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Root {
@@ -23,45 +23,44 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
-  border: 1px solid var(--color-gray-300);
+  border: 1px solid light-dark(var(--color-gray-950), white);
   width: 2.5rem;
-  height: 2.75rem;
-  border-radius: 0.5rem;
+  height: 2.5rem;
+  border-radius: 0;
   font-family: inherit;
-  font-size: 1.125rem;
-  font-weight: 500;
+  font-size: 1rem;
+  font-weight: 400;
   text-align: center;
   background-color: transparent;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
 
   &:focus {
-    outline: none;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
 .InputInvalidA {
-  border-color: var(--color-red);
+  border-color: light-dark(var(--color-red-700), var(--color-red-400));
   outline: 2px solid light-dark(var(--color-red-700), var(--color-red-400));
-  outline-offset: -1px;
+  outline-offset: -2px;
   animation: otp-field-shake-a 180ms ease-in-out;
 
   &:focus {
     outline: 2px solid light-dark(var(--color-red-700), var(--color-red-400));
-    outline-offset: -1px;
+    outline-offset: -2px;
   }
 }
 
 .InputInvalidB {
-  border-color: var(--color-red);
+  border-color: light-dark(var(--color-red-700), var(--color-red-400));
   outline: 2px solid light-dark(var(--color-red-700), var(--color-red-400));
-  outline-offset: -1px;
+  outline-offset: -2px;
   animation: otp-field-shake-b 180ms ease-in-out;
 
   &:focus {
     outline: 2px solid light-dark(var(--color-red-700), var(--color-red-400));
-    outline-offset: -1px;
+    outline-offset: -2px;
   }
 }
 
@@ -69,7 +68,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-600);
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 }
 
 .Code {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
index e9d545b393e..4df7745ca43 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
@@ -11,7 +11,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Root {
@@ -23,25 +23,24 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
-  border: 1px solid var(--color-gray-300);
+  border: 1px solid light-dark(var(--color-gray-950), white);
   width: 2.5rem;
-  height: 2.75rem;
-  border-radius: 0.5rem;
+  height: 2.5rem;
+  border-radius: 0;
   font-family: inherit;
-  font-size: 1.125rem;
-  font-weight: 500;
+  font-size: 1rem;
+  font-weight: 400;
   text-align: center;
   background-color: transparent;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
 
   &::placeholder {
-    color: var(--color-gray-400);
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus {
-    outline: none;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 
   &:focus::placeholder {
@@ -53,5 +52,5 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-600);
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
index 53bff7cad06..b119178ab03 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function OTPFieldFocusedPlaceholderDemo() {
 
   return (
     <div className="flex w-full max-w-80 flex-col items-start gap-1">
-      <label htmlFor={id} className="text-sm font-bold text-gray-900">
+      <label htmlFor={id} className="text-sm leading-5 font-bold text-gray-950 dark:text-white">
         Verification code
       </label>
       <OTPField.Root
@@ -21,13 +21,13 @@ export default function OTPFieldFocusedPlaceholderDemo() {
         {Array.from({ length: CODE_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="box-border m-0 h-11 w-10 rounded-lg border border-gray-300 bg-transparent text-center font-inherit text-lg font-medium text-gray-900 outline-none placeholder:text-gray-400 focus:outline-solid focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 focus:placeholder:text-transparent"
+            className="box-border m-0 h-10 w-10 rounded-none border border-gray-950 bg-transparent text-center font-inherit text-base font-normal text-gray-950 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 focus:placeholder:text-transparent dark:border-white dark:text-white dark:placeholder:text-gray-400"
             placeholder="•"
             aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
           />
         ))}
       </OTPField.Root>
-      <p id={descriptionId} className="m-0 text-sm text-gray-600">
+      <p id={descriptionId} className="m-0 text-sm leading-5 text-gray-600 dark:text-gray-400">
         Placeholder hints can stay visible until the active slot is focused.
       </p>
     </div>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
index bde91d2170b..5d2a4f700f1 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
@@ -11,7 +11,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Root {
@@ -29,32 +29,26 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
-  border: 1px solid var(--color-gray-300);
+  border: 1px solid light-dark(var(--color-gray-950), white);
   width: 2.5rem;
-  height: 2.75rem;
-  border-radius: 0.5rem;
+  height: 2.5rem;
+  border-radius: 0;
   font-family: inherit;
-  font-size: 1.125rem;
-  font-weight: 500;
+  font-size: 1rem;
+  font-weight: 400;
   text-align: center;
   background-color: transparent;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
 
   &:focus {
-    outline: none;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
 .Separator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   width: 1rem;
-  color: var(--color-gray-500);
-}
-
-.SeparatorIcon {
-  display: block;
+  height: 1px;
+  background-color: currentColor;
+  color: light-dark(var(--color-gray-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.tsx
index d32d68ee3f3..afd68b83e2f 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.tsx
@@ -22,9 +22,7 @@ export default function OTPFieldGroupedDemo() {
             />
           ))}
         </div>
-        <OTPField.Separator className={styles.Separator}>
-          <SeparatorMark className={styles.SeparatorIcon} />
-        </OTPField.Separator>
+        <OTPField.Separator className={styles.Separator} />
         <div className={styles.Group}>
           {Array.from({ length: 3 }, (_, index) => (
             <OTPField.Input
@@ -38,11 +36,3 @@ export default function OTPFieldGroupedDemo() {
     </div>
   );
 }
-
-function SeparatorMark(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 20 4" width="20" height="4" fill="none" {...props}>
-      <path d="M2 2H18" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
index 0ab17e187b6..3f5b896894d 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function OTPFieldGroupedDemo() {
 
   return (
     <div className="flex w-full max-w-80 flex-col items-start gap-1">
-      <label htmlFor={id} className="text-sm font-bold text-gray-900">
+      <label htmlFor={id} className="text-sm leading-5 font-bold text-gray-950 dark:text-white">
         Verification code
       </label>
       <OTPField.Root id={id} length={OTP_LENGTH} className="flex w-full items-center gap-2">
@@ -16,19 +16,17 @@ export default function OTPFieldGroupedDemo() {
           {Array.from({ length: 3 }, (_, index) => (
             <OTPField.Input
               key={index}
-              className="box-border m-0 h-11 w-10 rounded-lg border border-gray-300 bg-transparent text-center font-inherit text-lg font-medium text-gray-900 outline-none focus:outline-solid focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+              className="box-border m-0 h-10 w-10 rounded-none border border-gray-950 bg-transparent text-center font-inherit text-base font-normal text-gray-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
               aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}
             />
           ))}
         </div>
-        <OTPField.Separator className="flex w-4 items-center justify-center text-gray-500">
-          <SeparatorMark />
-        </OTPField.Separator>
+        <OTPField.Separator className="h-px w-4 bg-current text-gray-950 dark:text-white" />
         <div className="flex gap-2">
           {Array.from({ length: 3 }, (_, index) => (
             <OTPField.Input
               key={index + 3}
-              className="box-border m-0 h-11 w-10 rounded-lg border border-gray-300 bg-transparent text-center font-inherit text-lg font-medium text-gray-900 outline-none focus:outline-solid focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+              className="box-border m-0 h-10 w-10 rounded-none border border-gray-950 bg-transparent text-center font-inherit text-base font-normal text-gray-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
               aria-label={`Character ${index + 4} of ${OTP_LENGTH}`}
             />
           ))}
@@ -37,11 +35,3 @@ export default function OTPFieldGroupedDemo() {
     </div>
   );
 }
-
-function SeparatorMark(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 20 4" width="20" height="4" fill="none" {...props}>
-      <path d="M2 2H18" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
index c44ea351997..741205b623b 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
@@ -11,7 +11,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Root {
@@ -23,21 +23,20 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
-  border: 1px solid var(--color-gray-300);
+  border: 1px solid light-dark(var(--color-gray-950), white);
   width: 2.5rem;
-  height: 2.75rem;
-  border-radius: 0.5rem;
+  height: 2.5rem;
+  border-radius: 0;
   font-family: inherit;
-  font-size: 1.125rem;
-  font-weight: 500;
+  font-size: 1rem;
+  font-weight: 400;
   text-align: center;
   background-color: transparent;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
 
   &:focus {
-    outline: none;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -45,5 +44,5 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-600);
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
index af6219bcdbe..0a52ef7716c 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleOTPField() {
 
   return (
     <div className="flex w-full max-w-80 flex-col items-start gap-1">
-      <label htmlFor={id} className="text-sm font-bold text-gray-900">
+      <label htmlFor={id} className="text-sm leading-5 font-bold text-gray-950 dark:text-white">
         Verification code
       </label>
       <OTPField.Root
@@ -21,12 +21,12 @@ export default function ExampleOTPField() {
         {Array.from({ length: OTP_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="box-border m-0 h-11 w-10 rounded-lg border border-gray-300 bg-transparent text-center font-inherit text-lg font-medium text-gray-900 outline-none focus:outline-solid focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+            className="box-border m-0 h-10 w-10 rounded-none border border-gray-950 bg-transparent text-center font-inherit text-base font-normal text-gray-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
             aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}
           />
         ))}
       </OTPField.Root>
-      <p id={descriptionId} className="m-0 text-sm text-gray-600">
+      <p id={descriptionId} className="m-0 text-sm leading-5 text-gray-600 dark:text-gray-400">
         Enter the 6-character code we sent to your device.
       </p>
     </div>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
index 91f357e5ead..43b48f77943 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
@@ -11,7 +11,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Root {
@@ -23,21 +23,20 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
-  border: 1px solid var(--color-gray-300);
+  border: 1px solid light-dark(var(--color-gray-950), white);
   width: 2.5rem;
-  height: 2.75rem;
-  border-radius: 0.5rem;
+  height: 2.5rem;
+  border-radius: 0;
   font-family: inherit;
-  font-size: 1.125rem;
-  font-weight: 500;
+  font-size: 1rem;
+  font-weight: 400;
   text-align: center;
   background-color: transparent;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
 
   &:focus {
-    outline: none;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -45,7 +44,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-600);
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 }
 
 .Code {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
index d1fc4790478..6e682c4fe2e 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function OTPFieldPasswordDemo() {
 
   return (
     <div className="flex w-full max-w-80 flex-col items-start gap-1">
-      <label htmlFor={id} className="text-sm font-bold text-gray-900">
+      <label htmlFor={id} className="text-sm leading-5 font-bold text-gray-950 dark:text-white">
         Access code
       </label>
       <OTPField.Root
@@ -22,13 +22,13 @@ export default function OTPFieldPasswordDemo() {
         {Array.from({ length: CODE_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="box-border m-0 h-11 w-10 rounded-lg border border-gray-300 bg-transparent text-center font-inherit text-lg font-medium text-gray-900 outline-none focus:outline-solid focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+            className="box-border m-0 h-10 w-10 rounded-none border border-gray-950 bg-transparent text-center font-inherit text-base font-normal text-gray-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
             aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
           />
         ))}
       </OTPField.Root>
-      <p id={descriptionId} className="m-0 text-sm text-gray-600">
-        Use <code>mask</code> to obscure the code on shared screens.
+      <p id={descriptionId} className="m-0 text-sm leading-5 text-gray-600 dark:text-gray-400">
+        Use <code className="font-mono">mask</code> to obscure the code on shared screens.
       </p>
     </div>
   );

From add3a573f6eb381ff365386f93bb26aaf043b061 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 27 Apr 2026 16:03:43 +0200
Subject: [PATCH 072/257] OTPField: tweak description color

---
 .../otp-field/demos/alphanumeric/css-modules/index.module.css   | 2 +-
 .../components/otp-field/demos/alphanumeric/tailwind/index.tsx  | 2 +-
 .../demos/custom-sanitize/css-modules/index.module.css          | 2 +-
 .../demos/focused-placeholder/css-modules/index.module.css      | 2 +-
 .../otp-field/demos/focused-placeholder/tailwind/index.tsx      | 2 +-
 .../otp-field/demos/hero/css-modules/index.module.css           | 2 +-
 .../react/components/otp-field/demos/hero/tailwind/index.tsx    | 2 +-
 .../otp-field/demos/password/css-modules/index.module.css       | 2 +-
 .../components/otp-field/demos/password/tailwind/index.tsx      | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
index 43b48f77943..b36a37ce99b 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
@@ -44,7 +44,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-gray-500), var(--color-gray-400));
 }
 
 .Code {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
index bb245cdd5c1..4b5e4d42b31 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
@@ -27,7 +27,7 @@ export default function OTPFieldAlphanumericDemo() {
           />
         ))}
       </OTPField.Root>
-      <p id={descriptionId} className="m-0 text-sm leading-5 text-gray-600 dark:text-gray-400">
+      <p id={descriptionId} className="m-0 text-sm leading-5 text-gray-500 dark:text-gray-400">
         Accept letters and numbers for backup codes such as{' '}
         <code className="font-mono">A7C9XZ</code>.
       </p>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
index b40cb227f4b..36d764aa591 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
@@ -68,7 +68,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-gray-500), var(--color-gray-400));
 }
 
 .Code {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
index 4df7745ca43..d5cadc18711 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
@@ -52,5 +52,5 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-gray-500), var(--color-gray-400));
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
index b119178ab03..62192b43ce4 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
@@ -27,7 +27,7 @@ export default function OTPFieldFocusedPlaceholderDemo() {
           />
         ))}
       </OTPField.Root>
-      <p id={descriptionId} className="m-0 text-sm leading-5 text-gray-600 dark:text-gray-400">
+      <p id={descriptionId} className="m-0 text-sm leading-5 text-gray-500 dark:text-gray-400">
         Placeholder hints can stay visible until the active slot is focused.
       </p>
     </div>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
index 741205b623b..040fb3dad1f 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
@@ -44,5 +44,5 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-gray-500), var(--color-gray-400));
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
index 0a52ef7716c..494f0c4acde 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
@@ -26,7 +26,7 @@ export default function ExampleOTPField() {
           />
         ))}
       </OTPField.Root>
-      <p id={descriptionId} className="m-0 text-sm leading-5 text-gray-600 dark:text-gray-400">
+      <p id={descriptionId} className="m-0 text-sm leading-5 text-gray-500 dark:text-gray-400">
         Enter the 6-character code we sent to your device.
       </p>
     </div>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
index 43b48f77943..b36a37ce99b 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
@@ -44,7 +44,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-gray-500), var(--color-gray-400));
 }
 
 .Code {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
index 6e682c4fe2e..e655e8e0e03 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
@@ -27,7 +27,7 @@ export default function OTPFieldPasswordDemo() {
           />
         ))}
       </OTPField.Root>
-      <p id={descriptionId} className="m-0 text-sm leading-5 text-gray-600 dark:text-gray-400">
+      <p id={descriptionId} className="m-0 text-sm leading-5 text-gray-500 dark:text-gray-400">
         Use <code className="font-mono">mask</code> to obscure the code on shared screens.
       </p>
     </div>

From ad2526cccb80f2427e288576370e6ec0ce0f326e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 27 Apr 2026 22:44:06 +0200
Subject: [PATCH 073/257] Form brutalist

---
 .../form-action/css-modules/index.module.css  | 51 ++++++++++---------
 .../form/demos/form-action/tailwind/index.tsx |  8 +--
 .../demos/hero/css-modules/index.module.css   | 49 +++++++++---------
 .../form/demos/hero/tailwind/index.tsx        |  8 +--
 .../demos/zod/css-modules/index.module.css    | 49 +++++++++---------
 .../form/demos/zod/tailwind/index.tsx         | 10 ++--
 6 files changed, 92 insertions(+), 83 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
index e4216489a40..8b27d56526c 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
@@ -17,26 +17,29 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid light-dark(var(--color-gray-950), white);
   width: 100%;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
   background-color: transparent;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
+
+  &::placeholder {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
 
   &:focus {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -51,36 +54,36 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
-  &:active {
-    background-color: var(--color-gray-100);
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 
   &[data-disabled] {
-    color: var(--color-gray-500);
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 }
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
index fcc9312f0d8..5b1eb908501 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
@@ -18,13 +18,15 @@ export default function ActionStateForm() {
       className="flex w-full max-w-64 flex-col gap-4"
     >
       <Field.Root name="username" className="flex flex-col items-start gap-1">
-        <Field.Label className="text-sm font-bold text-gray-900">Username</Field.Label>
+        <Field.Label className="text-sm font-bold text-gray-950 dark:text-white">
+          Username
+        </Field.Label>
         <Field.Control
           type="username"
           required
           defaultValue="admin"
           placeholder="e.g. alice132"
-          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 font-normal"
+          className="h-8 w-full border border-gray-950 bg-transparent px-2 text-sm font-normal text-gray-950 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-gray-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
@@ -32,7 +34,7 @@ export default function ActionStateForm() {
         type="submit"
         disabled={loading}
         focusableWhenDisabled
-        className="flex items-center justify-center h-10 px-3.5 m-0 outline-0 border border-gray-200 rounded-md bg-gray-50 font-inherit text-base font-normal leading-6 text-gray-900 select-none hover:data-[disabled]:bg-gray-50 hover:bg-gray-100 active:data-[disabled]:bg-gray-50 active:bg-gray-200 active:shadow-[inset_0_1px_3px_rgba(0,0,0,0.1)] active:border-t-gray-300 active:data-[disabled]:shadow-none active:data-[disabled]:border-t-gray-200 focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1 data-[disabled]:text-gray-500"
+        className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-50 active:not-data-disabled:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-900 dark:active:not-data-disabled:bg-gray-800 dark:data-disabled:text-gray-400"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
index 5c4b40c2871..8b27d56526c 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
@@ -17,26 +17,29 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid light-dark(var(--color-gray-950), white);
   width: 100%;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
   background-color: transparent;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
+
+  &::placeholder {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
 
   &:focus {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -51,38 +54,36 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-gray-200);
-    box-shadow: inset 0 1px 3px var(--color-gray-200);
-    border-top-color: var(--color-gray-300);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 
   &[data-disabled] {
-    color: var(--color-gray-500);
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 }
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
index 7b3291f77e3..16ff17db2c1 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
@@ -28,14 +28,16 @@ export default function ExampleForm() {
       }}
     >
       <Field.Root name="url" className="flex flex-col items-start gap-1">
-        <Field.Label className="text-sm font-bold text-gray-900">Homepage</Field.Label>
+        <Field.Label className="text-sm font-bold text-gray-950 dark:text-white">
+          Homepage
+        </Field.Label>
         <Field.Control
           type="url"
           required
           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 font-normal"
+          className="h-8 w-full border border-gray-950 bg-transparent px-2 text-sm font-normal text-gray-950 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-gray-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
@@ -43,7 +45,7 @@ export default function ExampleForm() {
         disabled={loading}
         focusableWhenDisabled
         type="submit"
-        className="flex items-center justify-center h-10 px-3.5 m-0 outline-0 border border-gray-200 rounded-md bg-gray-50 font-inherit text-base font-normal leading-6 text-gray-900 select-none hover:data-[disabled]:bg-gray-50 hover:bg-gray-100 active:data-[disabled]:bg-gray-50 active:bg-gray-200 active:shadow-[inset_0_1px_3px_rgba(0,0,0,0.1)] active:border-t-gray-300 active:data-[disabled]:shadow-none active:data-[disabled]:border-t-gray-200 focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1 data-[disabled]:text-gray-500"
+        className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-50 active:not-data-disabled:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-900 dark:active:not-data-disabled:bg-gray-800 dark:data-disabled:text-gray-400"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
index 5c4b40c2871..8b27d56526c 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
@@ -17,26 +17,29 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid light-dark(var(--color-gray-950), white);
   width: 100%;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
   background-color: transparent;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
+
+  &::placeholder {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
 
   &:focus {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -51,38 +54,36 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-gray-200);
-    box-shadow: inset 0 1px 3px var(--color-gray-200);
-    border-top-color: var(--color-gray-300);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 
   &[data-disabled] {
-    color: var(--color-gray-500);
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 }
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
index b9d702d800a..c34f7ddaf5b 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
@@ -37,24 +37,24 @@ export default function Page() {
       }}
     >
       <Field.Root name="name" className="flex flex-col items-start gap-1">
-        <Field.Label className="text-sm font-bold text-gray-900">Name</Field.Label>
+        <Field.Label className="text-sm font-bold text-gray-950 dark:text-white">Name</Field.Label>
         <Field.Control
           placeholder="Enter 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 font-normal"
+          className="h-8 w-full border border-gray-950 bg-transparent px-2 text-sm font-normal text-gray-950 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-gray-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
       <Field.Root name="age" className="flex flex-col items-start gap-1">
-        <Field.Label className="text-sm font-bold text-gray-900">Age</Field.Label>
+        <Field.Label className="text-sm font-bold text-gray-950 dark:text-white">Age</Field.Label>
         <Field.Control
           placeholder="Enter age"
-          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 font-normal"
+          className="h-8 w-full border border-gray-950 bg-transparent px-2 text-sm font-normal text-gray-950 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-gray-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
       <Button
         type="submit"
-        className="flex items-center justify-center h-10 px-3.5 m-0 outline-0 border border-gray-200 rounded-md bg-gray-50 font-inherit text-base font-normal leading-6 text-gray-900 select-none hover:data-[disabled]:bg-gray-50 hover:bg-gray-100 active:data-[disabled]:bg-gray-50 active:bg-gray-200 active:shadow-[inset_0_1px_3px_rgba(0,0,0,0.1)] active:border-t-gray-300 active:data-[disabled]:shadow-none active:data-[disabled]:border-t-gray-200 focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1 data-[disabled]:text-gray-500"
+        className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-50 active:not-data-disabled:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-900 dark:active:not-data-disabled:bg-gray-800 dark:data-disabled:text-gray-400"
       >
         Submit
       </Button>

From b624fea6f869fa8bb42dd91359d8baf765a2ccac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 27 Apr 2026 22:44:58 +0200
Subject: [PATCH 074/257] Tooltip brutalist

---
 .../css-modules/index.tsx                     |  25 +--
 .../tailwind/index.tsx                        |  96 +++--------
 .../css-modules/index.module.css              |  89 ++++------
 .../css-modules/index.tsx                     |  25 +--
 .../detached-triggers-full/tailwind/index.tsx |  87 +++-------
 .../css-modules/index.tsx                     |  25 +--
 .../tailwind/index.tsx                        |  53 ++----
 .../demos/hero/css-modules/index.module.css   |  83 ++++-----
 .../tooltip/demos/hero/css-modules/index.tsx  |  37 +---
 .../tooltip/demos/hero/tailwind/index.tsx     | 162 +++---------------
 .../components/tooltip/demos/icons-tw.tsx     |  19 --
 .../components/tooltip/demos/index.module.css | 120 ++++++-------
 12 files changed, 220 insertions(+), 601 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx
index 77b96c91803..fa8b7b2947c 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx
@@ -50,11 +50,9 @@ export default function TooltipDetachedTriggersControlledDemo() {
         triggerId={triggerId}
       >
         <Tooltip.Portal>
-          <Tooltip.Positioner sideOffset={10} className={styles.Positioner}>
+          <Tooltip.Positioner sideOffset={11} className={styles.Positioner}>
             <Tooltip.Popup className={styles.Popup}>
-              <Tooltip.Arrow className={styles.Arrow}>
-                <ArrowSvg />
-              </Tooltip.Arrow>
+              <Tooltip.Arrow className={styles.Arrow} />
               Controlled tooltip
             </Tooltip.Popup>
           </Tooltip.Positioner>
@@ -64,25 +62,6 @@ export default function TooltipDetachedTriggersControlledDemo() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
 function InfoIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
index 62ead081667..d2963585db5 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -1,10 +1,22 @@
 'use client';
 import * as React from 'react';
 import { Tooltip } from '@base-ui/react/tooltip';
-import { ArrowSvg, InfoIcon } from '../../icons-tw';
+import { InfoIcon } from '../../icons-tw';
 
 const demoTooltip = Tooltip.createHandle();
 
+const iconButtonClass =
+  'flex size-8 items-center justify-center border border-gray-950 bg-white text-gray-950 select-none data-popup-open:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-gray-50 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:data-popup-open:bg-gray-800 dark:hover:bg-gray-900 dark:active:bg-gray-800';
+
+const buttonClass =
+  'flex h-8 items-center justify-center border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-gray-50 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800';
+
+const popupClass =
+  'relative border border-gray-950 bg-white px-2 py-1 text-sm text-gray-950 origin-[var(--transform-origin)] [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]';
+
+const arrowClass =
+  "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
+
 export default function TooltipDetachedTriggersControlledDemo() {
   const [open, setOpen] = React.useState(false);
   const [triggerId, setTriggerId] = React.useState<string | null>(null);
@@ -18,34 +30,12 @@ export default function TooltipDetachedTriggersControlledDemo() {
     <Tooltip.Provider>
       <div className="flex gap-2 flex-wrap justify-center">
         <div className="flex">
-          <Tooltip.Trigger
-            className="
-              flex size-10 items-center justify-center
-              border border-gray-200 rounded-l-md
-              bg-gray-50
-              text-gray-900
-              select-none
-              data-popup-open:bg-gray-100
-              focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800
-              hover:bg-gray-100
-              active:bg-gray-100"
-            handle={demoTooltip}
-            id="trigger-1"
-          >
+          <Tooltip.Trigger className={iconButtonClass} handle={demoTooltip} id="trigger-1">
             <InfoIcon aria-label="Controlled tooltip" />
           </Tooltip.Trigger>
 
           <Tooltip.Trigger
-            className="
-              flex size-10 items-center justify-center
-              border-y border-r border-gray-200
-              bg-gray-50
-              text-gray-900
-              select-none
-              data-popup-open:bg-gray-100
-              focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800
-              hover:bg-gray-100
-              active:bg-gray-100"
+            className={`${iconButtonClass} border-l-0`}
             handle={demoTooltip}
             id="trigger-2"
           >
@@ -53,16 +43,7 @@ export default function TooltipDetachedTriggersControlledDemo() {
           </Tooltip.Trigger>
 
           <Tooltip.Trigger
-            className="
-              flex size-10 items-center justify-center
-              border-y border-r border-gray-200 rounded-r-md
-              bg-gray-50
-              text-gray-900
-              select-none
-              data-popup-open:bg-gray-100
-              focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800
-              hover:bg-gray-100
-              active:bg-gray-100"
+            className={`${iconButtonClass} border-l-0`}
             handle={demoTooltip}
             id="trigger-3"
           >
@@ -72,16 +53,7 @@ export default function TooltipDetachedTriggersControlledDemo() {
 
         <button
           type="button"
-          className="
-            flex h-10 items-center justify-center
-            border border-gray-200 rounded-md
-            bg-gray-50
-            px-3.5
-            text-base font-normal text-gray-900
-            select-none
-            focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800
-            hover:bg-gray-100
-            active:bg-gray-100"
+          className={buttonClass}
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
@@ -100,36 +72,14 @@ export default function TooltipDetachedTriggersControlledDemo() {
         <Tooltip.Portal>
           <Tooltip.Positioner
             className="
-              h-(--positioner-height)
-              w-(--positioner-width)
-              max-w-(--available-width)
+              h-[var(--positioner-height)]
+              w-[var(--positioner-width)]
+              max-w-[var(--available-width)]
             "
-            sideOffset={10}
+            sideOffset={11}
           >
-            <Tooltip.Popup
-              className="
-                px-2 py-1
-                rounded-md
-                bg-[canvas]
-                text-sm
-                origin-(--transform-origin)
-                shadow-lg shadow-gray-200 outline-1 outline-gray-200
-                transition-[transform,scale,opacity]
-                data-ending-style:opacity-0 data-ending-style:scale-90
-                data-instant:transition-none
-                data-starting-style:opacity-0 data-starting-style:scale-90
-                dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1"
-            >
-              <Tooltip.Arrow
-                className="
-                  flex
-                  data-[side=bottom]:-top-2 data-[side=bottom]:rotate-0
-                  data-[side=left]:right-[-13px] data-[side=left]:rotate-90
-                  data-[side=right]:left-[-13px] data-[side=right]:-rotate-90
-                  data-[side=top]:-bottom-2 data-[side=top]:rotate-180"
-              >
-                <ArrowSvg />
-              </Tooltip.Arrow>
+            <Tooltip.Popup className={popupClass}>
+              <Tooltip.Arrow className={arrowClass} />
               Controlled tooltip
             </Tooltip.Popup>
           </Tooltip.Positioner>
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
index 62da6598b13..8cbacc3b6ff 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
@@ -11,45 +11,32 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 2rem;
+  height: 2rem;
   padding: 0;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
-  }
-
-  &:only-child {
-    border-radius: 0.375rem;
-  }
-
-  &:first-child:not(:only-child) {
-    border-radius: 0.375rem 0 0 0.375rem;
-  }
-
-  &:last-child:not(:only-child) {
-    border-radius: 0 0.375rem 0.375rem 0;
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:not(:first-child) {
@@ -84,8 +71,10 @@
   width: var(--popup-width, auto);
   max-width: 500px;
   transform-origin: var(--transform-origin);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
 
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -105,21 +94,17 @@
     transition: none;
   }
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    filter: none;
   }
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
   transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
 
   &[data-instant] {
@@ -127,39 +112,37 @@
   }
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
 
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
-
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    background-color: light-dark(white, var(--color-gray-950));
+    border: 1px solid light-dark(var(--color-gray-950), white);
+    transform: translate(-50%, 50%) rotate(45deg);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx
index 356ccc14545..bac78dcd154 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx
@@ -25,11 +25,9 @@ export default function TooltipDetachedTriggersFullDemo() {
       <Tooltip.Root handle={demoTooltip}>
         {({ payload: Payload }) => (
           <Tooltip.Portal>
-            <Tooltip.Positioner sideOffset={10} className={styles.Positioner}>
+            <Tooltip.Positioner sideOffset={11} className={styles.Positioner}>
               <Tooltip.Popup className={styles.Popup}>
-                <Tooltip.Arrow className={styles.Arrow}>
-                  <ArrowSvg />
-                </Tooltip.Arrow>
+                <Tooltip.Arrow className={styles.Arrow} />
 
                 <Tooltip.Viewport className={styles.Viewport}>
                   {Payload !== undefined && <Payload />}
@@ -55,25 +53,6 @@ function AlertContent() {
   return <span>Warning: This action cannot be undone</span>;
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
 function InfoIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
index a9c4a6d1a66..16aefc4316a 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
@@ -1,42 +1,26 @@
 'use client';
 import * as React from 'react';
 import { Tooltip } from '@base-ui/react/tooltip';
-import { ArrowSvg, InfoIcon, HelpIcon, AlertIcon } from '../../icons-tw';
+import { InfoIcon, HelpIcon, AlertIcon } from '../../icons-tw';
 
 const demoTooltip = Tooltip.createHandle<React.ComponentType>();
 
+const triggerClass =
+  'box-border flex size-8 items-center justify-center border border-gray-950 bg-white text-sm font-normal text-gray-950 select-none data-popup-open:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-gray-50 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:data-popup-open:bg-gray-800 dark:hover:bg-gray-900 dark:active:bg-gray-800';
+
+const arrowClass =
+  "relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[instant]:transition-none data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
+
 export default function TooltipDetachedTriggersFullDemo() {
   return (
     <Tooltip.Provider>
       <div className="flex">
-        <Tooltip.Trigger
-          className="
-            box-border flex size-10 items-center justify-center
-            border border-gray-200 rounded-l-md
-            bg-gray-50
-            text-base text-gray-900
-            select-none
-            data-popup-open:bg-gray-100
-            focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-600
-            hover:bg-gray-100
-            active:bg-gray-100"
-          handle={demoTooltip}
-          payload={InfoContent}
-        >
+        <Tooltip.Trigger className={triggerClass} handle={demoTooltip} payload={InfoContent}>
           <InfoIcon aria-label="This is information about the feature" className="size-5" />
         </Tooltip.Trigger>
 
         <Tooltip.Trigger
-          className="
-            box-border flex size-10 items-center justify-center
-            border-y border-r border-gray-200
-            bg-gray-50
-            text-base text-gray-900
-            select-none
-            data-popup-open:bg-gray-100
-            focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-600
-            hover:bg-gray-100
-            active:bg-gray-100"
+          className={`${triggerClass} border-l-0`}
           handle={demoTooltip}
           payload={HelpContent}
         >
@@ -44,16 +28,7 @@ export default function TooltipDetachedTriggersFullDemo() {
         </Tooltip.Trigger>
 
         <Tooltip.Trigger
-          className="
-            box-border flex size-10 items-center justify-center
-            border-y border-r border-gray-200 rounded-r-md
-            bg-gray-50
-            text-base text-gray-900
-            select-none
-            data-popup-open:bg-gray-100
-            focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-600
-            hover:bg-gray-100
-            active:bg-gray-100"
+          className={`${triggerClass} border-l-0`}
           handle={demoTooltip}
           payload={AlertContent}
         >
@@ -65,47 +40,33 @@ export default function TooltipDetachedTriggersFullDemo() {
         {({ payload: Payload }) => (
           <Tooltip.Portal>
             <Tooltip.Positioner
-              sideOffset={10}
+              sideOffset={11}
               className="
-                h-(--positioner-height) w-(--positioner-width)
-                max-w-(--available-width)
+                h-[var(--positioner-height)] w-[var(--positioner-width)]
+                max-w-[var(--available-width)]
                 transition-[top,left,right,bottom,transform]
                 duration-[0.35s]
                 ease-[cubic-bezier(0.22,1,0.36,1)]
-                data-instant:transition-none"
+                data-[instant]:transition-none"
             >
               <Tooltip.Popup
                 className="
                   relative
-                  h-(--popup-height,auto) w-(--popup-width,auto)
+                  h-[var(--popup-height,auto)] w-[var(--popup-width,auto)]
                   max-w-[500px]
-                  rounded-md
-                  bg-[canvas]
-                  text-sm
-                  origin-(--transform-origin)
-                  shadow-lg shadow-gray-200 outline-1 outline-gray-200
+                  border border-gray-950 dark:border-white
+                  bg-white dark:bg-gray-950
+                  text-sm text-gray-950 dark:text-white
+                  origin-[var(--transform-origin)]
+                  [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none]
                   transition-[width,height,opacity,scale]
                   duration-[0.35s]
                   ease-[cubic-bezier(0.22,1,0.36,1)]
-                  data-ending-style:opacity-0 data-ending-style:scale-90
-                  data-instant:transition-none
-                  data-starting-style:opacity-0 data-starting-style:scale-90
-                  dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1"
+                  data-[ending-style]:opacity-0 data-[ending-style]:scale-90
+                  data-[instant]:transition-none
+                  data-[starting-style]:opacity-0 data-[starting-style]:scale-90"
               >
-                <Tooltip.Arrow
-                  className="
-                    flex
-                    transition-[left]
-                    duration-[0.35s]
-                    ease-[cubic-bezier(0.22,1,0.36,1)]
-                    data-instant:transition-none
-                    data-[side=bottom]:-top-2 data-[side=bottom]:rotate-0
-                    data-[side=left]:right-[-13px] data-[side=left]:rotate-90
-                    data-[side=right]:left-[-13px] data-[side=right]:-rotate-90
-                    data-[side=top]:-bottom-2 data-[side=top]:rotate-180"
-                >
-                  <ArrowSvg />
-                </Tooltip.Arrow>
+                <Tooltip.Arrow className={arrowClass} />
 
                 <Tooltip.Viewport
                   className="
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx
index 3f77f3f5a52..bb614d97a46 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx
@@ -14,11 +14,9 @@ export default function TooltipDetachedTriggersSimpleDemo() {
 
       <Tooltip.Root handle={demoTooltip}>
         <Tooltip.Portal>
-          <Tooltip.Positioner sideOffset={10}>
+          <Tooltip.Positioner sideOffset={11}>
             <Tooltip.Popup className={styles.Popup}>
-              <Tooltip.Arrow className={styles.Arrow}>
-                <ArrowSvg />
-              </Tooltip.Arrow>
+              <Tooltip.Arrow className={styles.Arrow} />
               This is a detached tooltip
             </Tooltip.Popup>
           </Tooltip.Positioner>
@@ -28,25 +26,6 @@ export default function TooltipDetachedTriggersSimpleDemo() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
 function InfoIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
index 7a6267c52e2..88d722903af 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
@@ -1,56 +1,31 @@
 'use client';
 import * as React from 'react';
 import { Tooltip } from '@base-ui/react/tooltip';
-import { ArrowSvg, InfoIcon } from '../../icons-tw';
+import { InfoIcon } from '../../icons-tw';
 
 const demoTooltip = Tooltip.createHandle();
 
+const triggerClass =
+  'flex size-8 items-center justify-center border border-gray-950 bg-white text-gray-950 select-none data-popup-open:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-gray-50 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:data-popup-open:bg-gray-800 dark:hover:bg-gray-900 dark:active:bg-gray-800';
+
+const popupClass =
+  'relative border border-gray-950 bg-white px-2 py-1 text-sm text-gray-950 origin-[var(--transform-origin)] [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]';
+
+const arrowClass =
+  "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
+
 export default function TooltipDetachedTriggersSimpleDemo() {
   return (
     <Tooltip.Provider>
-      <Tooltip.Trigger
-        className="
-          flex size-10 items-center justify-center
-          border border-gray-200 rounded-md
-          bg-gray-50
-          text-gray-900
-          select-none
-          data-popup-open:bg-gray-100
-          focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800
-          hover:bg-gray-100
-          active:bg-gray-100"
-        handle={demoTooltip}
-      >
+      <Tooltip.Trigger className={triggerClass} handle={demoTooltip}>
         <InfoIcon aria-label="This is a detached tooltip" />
       </Tooltip.Trigger>
 
       <Tooltip.Root handle={demoTooltip}>
         <Tooltip.Portal>
-          <Tooltip.Positioner sideOffset={10}>
-            <Tooltip.Popup
-              className="
-                px-2 py-1
-                rounded-md
-                bg-[canvas]
-                text-sm
-                origin-(--transform-origin)
-                shadow-lg shadow-gray-200 outline-1 outline-gray-200
-                transition-[transform,scale,opacity]
-                data-ending-style:opacity-0 data-ending-style:scale-90
-                data-instant:transition-none
-                data-starting-style:opacity-0 data-starting-style:scale-90
-                dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1"
-            >
-              <Tooltip.Arrow
-                className="
-                  flex
-                  data-[side=bottom]:-top-2 data-[side=bottom]:rotate-0
-                  data-[side=left]:right-[-13px] data-[side=left]:rotate-90
-                  data-[side=right]:left-[-13px] data-[side=right]:-rotate-90
-                  data-[side=top]:-bottom-2 data-[side=top]:rotate-180"
-              >
-                <ArrowSvg />
-              </Tooltip.Arrow>
+          <Tooltip.Positioner sideOffset={11}>
+            <Tooltip.Popup className={popupClass}>
+              <Tooltip.Arrow className={arrowClass} />
               This is a detached tooltip
             </Tooltip.Popup>
           </Tooltip.Positioner>
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
index c90a60c8aa2..40823e4c724 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
@@ -1,9 +1,7 @@
 .Panel {
   display: flex;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  border-radius: 0.375rem;
-  padding: 0.125rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
 }
 
 .Button {
@@ -15,31 +13,29 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  outline: 0;
   border: 0;
-  border-radius: 0.25rem;
   background-color: transparent;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
     background-color: transparent;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
   &:active {
-    background-color: var(--color-gray-200);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 }
 
@@ -55,72 +51,69 @@
   display: flex;
   flex-direction: column;
   padding: 0.25rem 0.5rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
+  position: relative;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.98);
   }
 
   &[data-instant] {
     transition: none;
   }
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    filter: none;
   }
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
 
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    background-color: light-dark(white, var(--color-gray-950));
+    border: 1px solid light-dark(var(--color-gray-950), white);
+    transform: translate(-50%, 50%) rotate(45deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.tsx
index f2cbf0ae828..202bc976069 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.tsx
@@ -11,11 +11,9 @@ export default function ExampleTooltip() {
             <BoldIcon className={styles.Icon} aria-label="Bold" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Positioner sideOffset={10}>
+            <Tooltip.Positioner sideOffset={11}>
               <Tooltip.Popup className={styles.Popup}>
-                <Tooltip.Arrow className={styles.Arrow}>
-                  <ArrowSvg />
-                </Tooltip.Arrow>
+                <Tooltip.Arrow className={styles.Arrow} />
                 Bold
               </Tooltip.Popup>
             </Tooltip.Positioner>
@@ -27,11 +25,9 @@ export default function ExampleTooltip() {
             <ItalicIcon className={styles.Icon} aria-label="Italic" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Positioner sideOffset={10}>
+            <Tooltip.Positioner sideOffset={11}>
               <Tooltip.Popup className={styles.Popup}>
-                <Tooltip.Arrow className={styles.Arrow}>
-                  <ArrowSvg />
-                </Tooltip.Arrow>
+                <Tooltip.Arrow className={styles.Arrow} />
                 Italic
               </Tooltip.Popup>
             </Tooltip.Positioner>
@@ -43,11 +39,9 @@ export default function ExampleTooltip() {
             <UnderlineIcon className={styles.Icon} aria-label="Underline" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Positioner sideOffset={10}>
+            <Tooltip.Positioner sideOffset={11}>
               <Tooltip.Popup className={styles.Popup}>
-                <Tooltip.Arrow className={styles.Arrow}>
-                  <ArrowSvg />
-                </Tooltip.Arrow>
+                <Tooltip.Arrow className={styles.Arrow} />
                 Underline
               </Tooltip.Popup>
             </Tooltip.Positioner>
@@ -58,25 +52,6 @@ export default function ExampleTooltip() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
 function BoldIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
index 960f89f3082..3eb9a38e950 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
@@ -1,54 +1,27 @@
 import * as React from 'react';
 import { Tooltip } from '@base-ui/react/tooltip';
 
+const triggerClass =
+  'flex size-8 items-center justify-center border-0 bg-transparent text-gray-950 select-none data-popup-open:bg-gray-100 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-gray-50 active:bg-gray-100 dark:text-white dark:data-popup-open:bg-gray-800 dark:hover:bg-gray-900 dark:active:bg-gray-800';
+
+const popupClass =
+  'relative flex flex-col border border-gray-950 bg-white px-2 py-1 text-sm text-gray-950 origin-[var(--transform-origin)] [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]';
+
+const arrowClass =
+  "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
+
 export default function ExampleTooltip() {
   return (
     <Tooltip.Provider>
-      <div className="flex border border-gray-200 rounded-md bg-gray-50 p-0.5">
+      <div className="flex border border-gray-950 bg-white dark:border-white dark:bg-gray-950">
         <Tooltip.Root>
-          <Tooltip.Trigger
-            className="
-              flex size-8 items-center justify-center
-              border-0 rounded-sm
-              bg-transparent
-              text-gray-900
-              select-none
-              data-popup-open:bg-gray-100
-              focus-visible:bg-none
-              focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800
-              hover:bg-gray-100
-              active:bg-gray-200
-              focus-visible:not-[&:hover]:bg-transparent"
-          >
+          <Tooltip.Trigger className={triggerClass}>
             <BoldIcon aria-label="Bold" className="size-4" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Positioner sideOffset={10}>
-              <Tooltip.Popup
-                className="
-                  flex flex-col
-                  px-2 py-1
-                  rounded-md
-                  bg-[canvas]
-                  text-sm
-                  origin-(--transform-origin)
-                  shadow-lg shadow-gray-200 outline-1 outline-gray-200
-                  transition-[transform,scale,opacity]
-                  data-ending-style:opacity-0 data-ending-style:scale-90
-                  data-instant:transition-none
-                  data-starting-style:opacity-0 data-starting-style:scale-90
-                  dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1"
-              >
-                <Tooltip.Arrow
-                  className="
-                    flex
-                    data-[side=bottom]:-top-2 data-[side=bottom]:rotate-0
-                    data-[side=left]:right-[-13px] data-[side=left]:rotate-90
-                    data-[side=right]:left-[-13px] data-[side=right]:-rotate-90
-                    data-[side=top]:-bottom-2 data-[side=top]:rotate-180"
-                >
-                  <ArrowSvg />
-                </Tooltip.Arrow>
+            <Tooltip.Positioner sideOffset={11}>
+              <Tooltip.Popup className={popupClass}>
+                <Tooltip.Arrow className={arrowClass} />
                 Bold
               </Tooltip.Popup>
             </Tooltip.Positioner>
@@ -56,49 +29,13 @@ export default function ExampleTooltip() {
         </Tooltip.Root>
 
         <Tooltip.Root>
-          <Tooltip.Trigger
-            className="
-              flex size-8 items-center justify-center
-              border-0 rounded-sm
-              bg-transparent
-              text-gray-900
-              select-none
-              data-popup-open:bg-gray-100
-              focus-visible:bg-none
-              focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800
-              hover:bg-gray-100
-              active:bg-gray-200
-              focus-visible:not-[&:hover]:bg-transparent"
-          >
+          <Tooltip.Trigger className={triggerClass}>
             <ItalicIcon aria-label="Italic" className="size-4" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Positioner sideOffset={10}>
-              <Tooltip.Popup
-                className="
-                  flex flex-col
-                  px-2 py-1
-                  rounded-md
-                  bg-[canvas]
-                  text-sm
-                  origin-(--transform-origin)
-                  shadow-lg shadow-gray-200 outline-1 outline-gray-200
-                  transition-[transform,scale,opacity]
-                  data-ending-style:opacity-0 data-ending-style:scale-90
-                  data-instant:transition-none
-                  data-starting-style:opacity-0 data-starting-style:scale-90
-                  dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1"
-              >
-                <Tooltip.Arrow
-                  className="
-                    flex
-                    data-[side=bottom]:-top-2 data-[side=bottom]:rotate-0
-                    data-[side=left]:right-[-13px] data-[side=left]:rotate-90
-                    data-[side=right]:left-[-13px] data-[side=right]:-rotate-90
-                    data-[side=top]:-bottom-2 data-[side=top]:rotate-180"
-                >
-                  <ArrowSvg />
-                </Tooltip.Arrow>
+            <Tooltip.Positioner sideOffset={11}>
+              <Tooltip.Popup className={popupClass}>
+                <Tooltip.Arrow className={arrowClass} />
                 Italic
               </Tooltip.Popup>
             </Tooltip.Positioner>
@@ -106,49 +43,13 @@ export default function ExampleTooltip() {
         </Tooltip.Root>
 
         <Tooltip.Root>
-          <Tooltip.Trigger
-            className="
-              flex size-8 items-center justify-center
-              border-0 rounded-sm
-              bg-transparent
-              text-gray-900
-              select-none
-              data-popup-open:bg-gray-100
-              focus-visible:bg-none
-              focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800
-              hover:bg-gray-100
-              active:bg-gray-200
-              focus-visible:not-[&:hover]:bg-transparent"
-          >
+          <Tooltip.Trigger className={triggerClass}>
             <UnderlineIcon aria-label="Underline" className="size-4" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Positioner sideOffset={10}>
-              <Tooltip.Popup
-                className="
-                  flex flex-col
-                  px-2 py-1
-                  rounded-md
-                  bg-[canvas]
-                  text-sm
-                  origin-(--transform-origin)
-                  shadow-lg shadow-gray-200 outline-1 outline-gray-200
-                  transition-[transform,scale,opacity]
-                  data-ending-style:opacity-0 data-ending-style:scale-90
-                  data-instant:transition-none
-                  data-starting-style:opacity-0 data-starting-style:scale-90
-                  dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1"
-              >
-                <Tooltip.Arrow
-                  className="
-                    flex
-                    data-[side=bottom]:-top-2 data-[side=bottom]:rotate-0
-                    data-[side=left]:right-[-13px] data-[side=left]:rotate-90
-                    data-[side=right]:left-[-13px] data-[side=right]:-rotate-90
-                    data-[side=top]:-bottom-2 data-[side=top]:rotate-180"
-                >
-                  <ArrowSvg />
-                </Tooltip.Arrow>
+            <Tooltip.Positioner sideOffset={11}>
+              <Tooltip.Popup className={popupClass}>
+                <Tooltip.Arrow className={arrowClass} />
                 Underline
               </Tooltip.Popup>
             </Tooltip.Positioner>
@@ -159,25 +60,6 @@ export default function ExampleTooltip() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
-
 function BoldIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx
index b8d7f05385a..c45e50a4749 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx
@@ -1,24 +1,5 @@
 import * as React from 'react';
 
-export function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
-
 export function InfoIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
index 0f097e57579..325ddd7ecee 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
@@ -14,45 +14,32 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 2rem;
+  height: 2rem;
   padding: 0;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
-  }
-
-  &:only-child {
-    border-radius: 0.375rem;
-  }
-
-  &:first-child:not(:only-child) {
-    border-radius: 0.375rem 0 0 0.375rem;
-  }
-
-  &:last-child:not(:only-child) {
-    border-radius: 0 0.375rem 0.375rem 0;
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:not(:first-child) {
@@ -73,76 +60,73 @@
 
 .Popup {
   box-sizing: border-box;
+  position: relative;
   font-size: 0.875rem;
   line-height: 1.25rem;
   padding: 0.25rem 0.5rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.98);
   }
 
   &[data-instant] {
     transition: none;
   }
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    filter: none;
   }
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
 
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
-
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    background-color: light-dark(white, var(--color-gray-950));
+    border: 1px solid light-dark(var(--color-gray-950), white);
+    transform: translate(-50%, 50%) rotate(45deg);
   }
 }
 
@@ -151,32 +135,30 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }

From a85aec267ba482f504df07adf9ffe5ba06e16b62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 27 Apr 2026 22:57:24 +0200
Subject: [PATCH 075/257] Field brutalist

---
 .../demos/hero/css-modules/index.module.css   | 23 +++++++++++--------
 .../field/demos/hero/tailwind/index.tsx       |  6 ++---
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
index 9b6810e935d..f0c28acc0db 100644
--- a/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
@@ -11,26 +11,29 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid light-dark(var(--color-gray-950), white);
   width: 100%;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
   background-color: transparent;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
+
+  &::placeholder {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
 
   &:focus {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -44,5 +47,5 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-600);
+  color: light-dark(var(--color-gray-500), var(--color-gray-400));
 }
diff --git a/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
index e6c2326dc5e..e805441b698 100644
--- a/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
@@ -3,17 +3,17 @@ import { Field } from '@base-ui/react/field';
 export default function ExampleField() {
   return (
     <Field.Root className="flex w-full max-w-64 flex-col items-start gap-1">
-      <Field.Label className="text-sm font-bold text-gray-900">Name</Field.Label>
+      <Field.Label className="text-sm font-bold text-gray-950 dark:text-white">Name</Field.Label>
       <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 font-normal"
+        className="h-8 self-stretch border border-gray-950 bg-transparent px-2 text-sm font-normal text-gray-950 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-gray-400"
       />
       <Field.Error className="text-sm text-red-700 dark:text-red-400" match="valueMissing">
         Please enter your name
       </Field.Error>
 
-      <Field.Description className="text-sm text-gray-600">
+      <Field.Description className="text-sm text-gray-500 dark:text-gray-400">
         Visible on your profile
       </Field.Description>
     </Field.Root>

From ab5fe3c2138645f47f444cf783bcc5ba82eb5ddf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 27 Apr 2026 23:07:49 +0200
Subject: [PATCH 076/257] Fieldset brutalist

---
 .../demos/hero/css-modules/index.module.css   | 32 ++++++++++---------
 .../fieldset/demos/hero/tailwind/index.tsx    | 14 +++++---
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
index afe2542108d..e36b1074481 100644
--- a/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
@@ -10,12 +10,11 @@
 }
 
 .Legend {
-  border-bottom: 1px solid var(--color-gray-200);
-  padding-bottom: 0.75rem;
+  border-bottom: 1px solid light-dark(var(--color-gray-950), var(--color-white));
   font-weight: 700;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  color: var(--color-gray-900);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Field {
@@ -29,26 +28,29 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid light-dark(var(--color-gray-950), white);
   width: 100%;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
   background-color: transparent;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
+
+  &::placeholder {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
 
   &:focus {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -62,5 +64,5 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-600);
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
 }
diff --git a/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx
index 6e9e3a490d3..1880ffc2c3d 100644
--- a/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx
@@ -4,23 +4,27 @@ import { Fieldset } from '@base-ui/react/fieldset';
 export default function ExampleField() {
   return (
     <Fieldset.Root className="flex w-full max-w-64 flex-col gap-4">
-      <Fieldset.Legend className="border-b border-gray-200 pb-3 text-lg font-bold text-gray-900">
+      <Fieldset.Legend className="border-b border-gray-950 text-base font-bold text-gray-950 dark:border-white dark:text-white">
         Billing details
       </Fieldset.Legend>
 
       <Field.Root className="flex flex-col items-start gap-1">
-        <Field.Label className="text-sm font-bold text-gray-900">Company</Field.Label>
+        <Field.Label className="text-sm font-bold text-gray-950 dark:text-white">
+          Company
+        </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 font-normal"
+          className="h-8 w-full border border-gray-950 bg-transparent px-2 text-sm font-normal text-gray-950 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-gray-400"
         />
       </Field.Root>
 
       <Field.Root className="flex flex-col items-start gap-1">
-        <Field.Label className="text-sm font-bold text-gray-900">Tax ID</Field.Label>
+        <Field.Label className="text-sm font-bold text-gray-950 dark:text-white">
+          Tax ID
+        </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 font-normal"
+          className="h-8 w-full border border-gray-950 bg-transparent px-2 text-sm font-normal text-gray-950 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-gray-400"
         />
       </Field.Root>
     </Fieldset.Root>

From 8e5768827066a0978619fcb549c51aa666d66c2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 27 Apr 2026 23:45:40 +0200
Subject: [PATCH 077/257] Toolbar brutalist

---
 .../demos/hero/css-modules/index.module.css   | 177 ++++--------------
 .../toolbar/demos/hero/css-modules/index.tsx  |  26 ++-
 .../toolbar/demos/hero/tailwind/index.tsx     |  66 ++++---
 docs/src/css/index.css                        |   3 +
 4 files changed, 101 insertions(+), 171 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
index 6782281de44..cdcc752ea6c 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
@@ -3,16 +3,14 @@
   display: flex;
   align-items: center;
   gap: 1px;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  border-radius: 0.375rem;
-  padding: 0.125rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  padding: 1px;
   width: 37.5rem;
 }
 
 .Group {
   display: flex;
-  gap: 0.25rem;
 }
 
 .Button {
@@ -24,35 +22,38 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  outline: 0;
   border: 0;
-  border-radius: 0.25rem;
   background-color: transparent;
-  color: var(--color-gray-600);
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
+  line-height: 1.25rem;
 
   &:focus-visible {
     background-color: transparent;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
   &:active {
-    background-color: var(--color-gray-200);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &[data-pressed] {
-    background-color: var(--color-gray-100);
-    color: var(--color-gray-900);
+    background-color: light-dark(var(--color-gray-950), white);
+    color: light-dark(white, var(--color-gray-950));
+  }
+
+  &[data-popup-open] {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &[aria-pressed] {
@@ -70,175 +71,89 @@
   width: 1px;
   height: 16px;
   margin: 0.25rem;
-  background-color: var(--color-gray-300);
+  background-color: light-dark(var(--color-gray-950), white);
 }
 
 .Link {
-  color: var(--color-gray-500);
+  color: light-dark(var(--color-gray-500), var(--color-gray-400));
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   text-decoration: none;
   align-self: center;
   flex: 0 0 auto;
   margin-inline: auto 0.875rem;
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
-    border-radius: 0.25rem;
   }
 
   @media (hover: hover) {
     &:hover {
-      color: var(--color-blue);
+      color: light-dark(var(--color-blue-700), var(--color-blue-500));
     }
   }
 }
 
-.Select {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  height: 2.5rem;
-  padding-left: 0.875rem;
-  padding-right: 0.75rem;
-  margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  font-family: inherit;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
-  cursor: default;
-  -webkit-user-select: none;
-  user-select: none;
-  min-width: 9rem;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
-
-  &[data-popup-open] {
-    background-color: var(--color-gray-100);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-}
-
 .SelectIcon {
   display: flex;
 }
 
 .Positioner {
-  outline: 0;
-  -webkit-user-select: none;
+  outline: none;
   user-select: none;
-  z-index: 1;
+  z-index: 10;
 }
 
 .Popup {
   box-sizing: border-box;
-  padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  outline: 0;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  background-clip: padding-box;
+  color: light-dark(var(--color-gray-950), white);
+  min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
   overflow-y: auto;
   max-height: var(--available-height);
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.98);
   }
 
   &[data-side='none'] {
     transition: none;
-    transform: none;
+    transform: translateY(1px);
     opacity: 1;
+    min-width: calc(var(--anchor-width) + 1rem);
   }
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
-  }
-}
-
-.Arrow {
-  display: flex;
-
-  &[data-side='top'] {
-    bottom: -8px;
-    rotate: 180deg;
-  }
-
-  &[data-side='bottom'] {
-    top: -8px;
-    rotate: 0deg;
-  }
-
-  &[data-side='left'] {
-    right: -13px;
-    rotate: 90deg;
-  }
-
-  &[data-side='right'] {
-    left: -13px;
-    rotate: -90deg;
-  }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
-
-.ArrowInnerStroke {
   @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+    box-shadow: none;
   }
 }
 
 .Item {
   box-sizing: border-box;
   outline: 0;
-  line-height: 1rem;
-  padding-block: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding-block: 0.375rem;
   padding-left: 0.625rem;
   padding-right: 1rem;
-  min-width: var(--anchor-width);
   display: grid;
   gap: 0.5rem;
   align-items: center;
   grid-template-columns: 0.75rem 1fr;
   cursor: default;
-  -webkit-user-select: none;
   user-select: none;
-  scroll-margin-block: 1rem;
-  font-size: 0.875rem;
 
   @media (pointer: coarse) {
     padding-block: 0.625rem;
@@ -246,23 +161,11 @@
 
   [data-side='none'] & {
     padding-right: 3rem;
-    min-width: calc(var(--anchor-width) + 1rem);
   }
 
   &[data-highlighted] {
-    z-index: 0;
-    position: relative;
-    color: var(--color-gray-50);
-  }
-
-  &[data-highlighted]::before {
-    content: '';
-    z-index: -1;
-    position: absolute;
-    inset-block: 0;
-    inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    background-color: light-dark(var(--color-gray-950), white);
+    color: light-dark(white, var(--color-gray-950));
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
index c85cb89ed7f..7013b07deda 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
@@ -73,24 +73,36 @@ export default function ExampleToolbar() {
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
+      width="12"
       height="12"
-      viewBox="0 0 8 12"
+      viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.5"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       {...props}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="m7 15 5 5 5-5" />
+      <path d="m7 9 5-5 5 5" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
index 588c6957673..5307668f844 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
@@ -6,13 +6,13 @@ import { Select } from '@base-ui/react/select';
 
 export default function ExampleToolbar() {
   return (
-    <Toolbar.Root className="flex w-150 items-center gap-px rounded-md border border-gray-200 bg-gray-50 p-0.5">
-      <ToggleGroup className="flex gap-1" aria-label="Alignment">
+    <Toolbar.Root className="flex w-150 items-center gap-px border border-gray-950 bg-white p-px dark:border-white dark:bg-gray-950">
+      <ToggleGroup className="flex" aria-label="Alignment">
         <Toolbar.Button
           render={<Toggle />}
           aria-label="Align left"
           value="align-left"
-          className="flex h-8 items-center justify-center rounded-xs px-[0.75rem] font-[inherit] text-sm font-normal 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 h-8 min-w-8 items-center justify-center border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-pressed:bg-gray-950 data-pressed:text-white data-[popup-open]:bg-gray-100 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-pressed:bg-white dark:data-pressed:text-gray-950 dark:data-[popup-open]:bg-gray-800"
         >
           Align Left
         </Toolbar.Button>
@@ -20,31 +20,31 @@ export default function ExampleToolbar() {
           render={<Toggle />}
           aria-label="Align right"
           value="align-right"
-          className="flex h-8 items-center justify-center rounded-xs px-[0.75rem] font-[inherit] text-sm font-normal 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 h-8 min-w-8 items-center justify-center border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-pressed:bg-gray-950 data-pressed:text-white data-[popup-open]:bg-gray-100 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-pressed:bg-white dark:data-pressed:text-gray-950 dark:data-[popup-open]:bg-gray-800"
         >
           Align Right
         </Toolbar.Button>
       </ToggleGroup>
-      <Toolbar.Separator className="m-1 h-4 w-px bg-gray-300" />
-      <Toolbar.Group className="flex gap-1" aria-label="Numerical format">
+      <Toolbar.Separator className="m-1 h-4 w-px bg-gray-950 dark:bg-white" />
+      <Toolbar.Group className="flex" aria-label="Numerical format">
         <Toolbar.Button
-          className="flex size-8 items-center justify-center rounded-xs px-[0.75rem] font-[inherit] text-sm font-normal 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 h-8 min-w-8 items-center justify-center border-0 bg-transparent font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-pressed:bg-gray-950 data-pressed:text-white data-[popup-open]:bg-gray-100 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-pressed:bg-white dark:data-pressed:text-gray-950 dark:data-[popup-open]:bg-gray-800"
           aria-label="Format as currency"
         >
           $
         </Toolbar.Button>
         <Toolbar.Button
-          className="flex size-8 items-center justify-center rounded-xs px-[0.75rem] font-[inherit] text-sm font-normal 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 h-8 min-w-8 items-center justify-center border-0 bg-transparent font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-pressed:bg-gray-950 data-pressed:text-white data-[popup-open]:bg-gray-100 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-pressed:bg-white dark:data-pressed:text-gray-950 dark:data-[popup-open]:bg-gray-800"
           aria-label="Format as percent"
         >
           %
         </Toolbar.Button>
       </Toolbar.Group>
-      <Toolbar.Separator className="m-1 h-4 w-px bg-gray-300" />
+      <Toolbar.Separator className="m-1 h-4 w-px bg-gray-950 dark:bg-white" />
       <Select.Root defaultValue="Helvetica">
         <Toolbar.Button
           render={<Select.Trigger />}
-          className="flex min-w-[8rem] h-8 text-sm font-normal items-center justify-between gap-3 rounded-md pr-3 pl-3 text-gray-600 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100 cursor-default"
+          className="flex h-8 min-w-32 cursor-default items-center justify-between border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-pressed:bg-gray-950 data-pressed:text-white data-[popup-open]:bg-gray-100 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-pressed:bg-white dark:data-pressed:text-gray-950 dark:data-[popup-open]:bg-gray-800"
         >
           <Select.Value />
           <Select.Icon className="flex">
@@ -52,33 +52,33 @@ export default function ExampleToolbar() {
           </Select.Icon>
         </Toolbar.Button>
         <Select.Portal>
-          <Select.Positioner className="outline-hidden select-none" sideOffset={8}>
-            <Select.Popup className="group max-h-[var(--available-height)] origin-[var(--transform-origin)] overflow-y-auto rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]: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.Positioner className="z-10 outline-none select-none" sideOffset={8}>
+            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto border border-gray-950 bg-white bg-clip-padding text-gray-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:translate-y-px data-[side=none]:scale-100 data-[side=none]:opacity-100 data-[side=none]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[side=none]:data-[starting-style]:scale-100 data-[side=none]:data-[starting-style]:opacity-100 dark:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
               <Select.Item
                 value="Helvetica"
-                className="grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 leading-4 outline-hidden select-none group-data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] group-data-[side=none]:pr-12 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 pointer-coarse:py-2.5"
+                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-none select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-gray-950 data-[highlighted]:text-white pointer-coarse:py-2.5 dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-gray-950"
               >
                 <Select.ItemIndicator className="col-start-1">
-                  <CheckIcon className="size-3" />
+                  <CheckIcon className="block size-3" />
                 </Select.ItemIndicator>
-                <Select.ItemText className="col-start-2 text-sm">Helvetica</Select.ItemText>
+                <Select.ItemText className="col-start-2">Helvetica</Select.ItemText>
               </Select.Item>
               <Select.Item
                 value="Arial"
-                className="grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 leading-4 outline-hidden select-none group-data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] group-data-[side=none]:pr-12 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 pointer-coarse:py-2.5"
+                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-none select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-gray-950 data-[highlighted]:text-white pointer-coarse:py-2.5 dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-gray-950"
               >
                 <Select.ItemIndicator className="col-start-1">
-                  <CheckIcon className="size-3" />
+                  <CheckIcon className="block size-3" />
                 </Select.ItemIndicator>
-                <Select.ItemText className="col-start-2 text-sm">Arial</Select.ItemText>
+                <Select.ItemText className="col-start-2">Arial</Select.ItemText>
               </Select.Item>
             </Select.Popup>
           </Select.Positioner>
         </Select.Portal>
       </Select.Root>
-      <Toolbar.Separator className="m-1 h-4 w-px bg-gray-300" />
+      <Toolbar.Separator className="m-1 h-4 w-px bg-gray-950 dark:bg-white" />
       <Toolbar.Link
-        className="mr-[0.875rem] ml-auto flex-none self-center text-sm text-gray-500 no-underline hover:text-blue-800 focus-visible:rounded-xs focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="mr-[0.875rem] ml-auto flex-none self-center font-[inherit] text-sm leading-5 text-gray-500 no-underline hover:text-blue-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-gray-400 dark:hover:text-blue-500"
         href="#"
       >
         Edited 51m ago
@@ -90,24 +90,36 @@ export default function ExampleToolbar() {
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
+      width="12"
       height="12"
-      viewBox="0 0 8 12"
+      viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.5"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       {...props}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="m7 15 5 5 5-5" />
+      <path d="m7 9 5-5 5 5" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
     </svg>
   );
 }
diff --git a/docs/src/css/index.css b/docs/src/css/index.css
index acffea13e1c..fe4ac1ab884 100644
--- a/docs/src/css/index.css
+++ b/docs/src/css/index.css
@@ -74,6 +74,9 @@
   --color-gray-900: oklch(21% 0.034 264.665deg);
   --color-gray-950: oklch(13% 0.028 261.692deg);
 
+  --color-blue-400: oklch(70.7% 0.165 254.624deg);
+  --color-blue-500: oklch(62.3% 0.214 259.815deg);
+  --color-blue-700: oklch(48.8% 0.243 264.376deg);
   --color-blue-800: oklch(42.4% 0.199 265.638deg);
 
   --color-red-400: oklch(70.4% 0.191 22.216deg);

From 82797f674db42ea409c3c73f0de0881e11572fdb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 28 Apr 2026 00:04:11 +0200
Subject: [PATCH 078/257] PreviewCard brutalist

---
 .../css-modules/index.tsx                     | 23 +----
 .../tailwind/index.tsx                        | 55 ++++-------
 .../css-modules/index.module.css              | 79 +++++++--------
 .../css-modules/index.tsx                     | 23 +----
 .../detached-triggers-full/tailwind/index.tsx | 51 +++-------
 .../css-modules/index.tsx                     | 24 +----
 .../tailwind/index.tsx                        | 36 ++-----
 .../demos/hero/css-modules/index.tsx          | 24 +----
 .../demos/hero/tailwind/index.tsx             | 36 ++-----
 .../preview-card/demos/index.module.css       | 99 +++++++++----------
 10 files changed, 136 insertions(+), 314 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/css-modules/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/css-modules/index.tsx
index 4813e335a17..28bc6186e03 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/css-modules/index.tsx
@@ -120,9 +120,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
           <PreviewCard.Portal>
             <PreviewCard.Positioner sideOffset={8} className={styles.Positioner}>
               <PreviewCard.Popup className={styles.Popup}>
-                <PreviewCard.Arrow className={styles.Arrow}>
-                  <ArrowSvg />
-                </PreviewCard.Arrow>
+                <PreviewCard.Arrow className={styles.Arrow} />
                 {payload}
               </PreviewCard.Popup>
             </PreviewCard.Positioner>
@@ -132,22 +130,3 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
     </div>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
index cda72c8da4d..d6cc5887b8b 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -6,43 +6,43 @@ const demoPreviewCard = PreviewCard.createHandle<React.ReactElement>();
 
 const cardContents = {
   typography: (
-    <div className="w-min flex flex-col gap-2 p-2 box-border">
+    <div className="box-border flex w-min flex-col gap-2 p-2">
       <img
         width="224"
         height="150"
-        className="block rounded-xs max-w-none"
+        className="block max-w-none"
         src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
         alt="Station Hofplein signage in Rotterdam, Netherlands"
       />
-      <p className="m-0 text-sm leading-5 text-gray-900 text-pretty">
+      <p className="m-0 text-sm leading-5 text-gray-600 text-pretty dark:text-gray-400">
         <strong>Typography</strong> is the art and science of arranging type.
       </p>
     </div>
   ),
   design: (
-    <div className="w-min flex flex-col gap-2 p-2 box-border">
+    <div className="box-border flex w-min flex-col gap-2 p-2">
       <img
         width="241"
         height="240"
-        className="block rounded-xs max-w-none"
+        className="block max-w-none"
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Braun_ABW30_%28schwarz%29.jpg/250px-Braun_ABW30_%28schwarz%29.jpg"
         alt="Braun ABW30"
       />
-      <p className="m-0 text-sm leading-5 text-gray-900 text-pretty">
+      <p className="m-0 text-sm leading-5 text-gray-600 text-pretty dark:text-gray-400">
         A <strong>design</strong> is the concept or proposal for an object, process, or system.
       </p>
     </div>
   ),
   art: (
-    <div className="w-min flex flex-col gap-2 p-2 box-border">
+    <div className="box-border flex w-min flex-col gap-2 p-2">
       <img
         width="206"
         height="240"
-        className="block rounded-xs max-w-none"
+        className="block max-w-none"
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/MonaLisa_sfumato.jpeg/250px-MonaLisa_sfumato.jpeg"
         alt="Mona Lisa"
       />
-      <p className="m-0 text-sm leading-5 text-gray-900 text-pretty">
+      <p className="m-0 text-sm leading-5 text-gray-600 text-pretty dark:text-gray-400">
         <strong>Art</strong> is a diverse range of cultural activity centered around works utilizing
         creative or imaginative talents, which are expected to evoke a worthwhile experience,
         generally through an expression of emotional power, conceptual ideas, technical proficiency,
@@ -63,11 +63,11 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
 
   return (
     <div>
-      <div className="flex gap-2 flex-wrap justify-center items-baseline">
-        <p className="m-0 text-base leading-6 text-gray-900 text-balance">
+      <div className="flex flex-wrap items-baseline justify-center gap-2">
+        <p className="m-0 text-base leading-6 text-gray-950 text-balance dark:text-white">
           Discover{' '}
           <PreviewCard.Trigger
-            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:rounded-[2px] focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500"
             handle={demoPreviewCard}
             href="https://en.wikipedia.org/wiki/Typography"
             id="trigger-1"
@@ -77,7 +77,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
           </PreviewCard.Trigger>
           ,{' '}
           <PreviewCard.Trigger
-            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:rounded-[2px] focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500"
             handle={demoPreviewCard}
             href="https://en.wikipedia.org/wiki/Industrial_design"
             id="trigger-2"
@@ -87,7 +87,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
           </PreviewCard.Trigger>
           , or{' '}
           <PreviewCard.Trigger
-            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:rounded-[2px] focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500"
             handle={demoPreviewCard}
             href="https://en.wikipedia.org/wiki/Art"
             id="trigger-3"
@@ -99,7 +99,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
         </p>
         <button
           type="button"
-          className="box-border flex items-center justify-center h-10 px-3.5 m-0 outline-0 border border-gray-200 rounded-md bg-gray-50 font-inherit text-base font-normal leading-6 text-gray-900 select-none hover:bg-gray-100 active:bg-gray-100 focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1"
+          className="box-border flex h-10 items-center justify-center border border-gray-950 bg-white px-3.5 font-[inherit] text-base leading-6 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
@@ -121,10 +121,8 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)]"
             >
-              <PreviewCard.Popup className="box-border w-[var(--popup-width,auto)] h-[var(--popup-height,auto)] rounded-lg bg-[canvas] origin-[var(--transform-origin)] transition-[scale,opacity] duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1">
-                <PreviewCard.Arrow className="flex 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>
+              <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-gray-950 bg-white text-gray-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
+                <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-gray-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-gray-950" />
                 {payload}
               </PreviewCard.Popup>
             </PreviewCard.Positioner>
@@ -134,22 +132,3 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
     </div>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
index 980a9b22900..3e0256de8a1 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
@@ -13,9 +13,10 @@
 
 .Popup {
   position: relative;
-  background-color: canvas;
-  color: var(--color-gray-900);
-  border-radius: 0.5rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
 
   /* These are required to make the size animations work */
@@ -30,59 +31,52 @@
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+    transform: scale(0.98);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    filter: none;
   }
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
 
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
-
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    border: 1px solid light-dark(var(--color-gray-950), white);
+    background-color: light-dark(white, var(--color-gray-950));
+    transform: translate(-50%, 50%) rotate(45deg);
   }
 }
 
@@ -139,7 +133,6 @@
 
 .Image {
   display: block;
-  border-radius: 0.25rem;
   max-width: none;
 }
 
@@ -147,7 +140,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
   text-wrap: pretty;
 }
 
@@ -155,31 +148,35 @@
   margin: 0;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
   text-wrap: balance;
 }
 
 .Link {
   outline: 0;
-  color: var(--color-blue);
+  color: light-dark(var(--color-blue-800), var(--color-blue-500));
   text-decoration-line: underline;
   text-decoration-thickness: 1px;
-  text-decoration-color: color-mix(in oklab, var(--color-blue), transparent 40%);
+  text-decoration-color: color-mix(
+    in oklab,
+    light-dark(var(--color-blue-800), var(--color-blue-500)),
+    transparent 40%
+  );
   text-underline-offset: 2px;
 
   @media (hover: hover) {
     &:hover {
-      text-decoration-color: var(--color-blue);
+      text-decoration-color: light-dark(var(--color-blue-800), var(--color-blue-500));
     }
   }
 
   &[data-popup-open] {
-    text-decoration-color: var(--color-blue);
+    text-decoration-color: light-dark(var(--color-blue-800), var(--color-blue-500));
   }
 
   &:focus-visible {
-    border-radius: 0.125rem;
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
     text-decoration-line: none;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.tsx
index e162be303cc..c5a05910a09 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.tsx
@@ -92,9 +92,7 @@ export default function PreviewCardDetachedTriggersFullDemo() {
           <PreviewCard.Portal>
             <PreviewCard.Positioner sideOffset={8} className={styles.Positioner}>
               <PreviewCard.Popup className={styles.Popup}>
-                <PreviewCard.Arrow className={styles.Arrow}>
-                  <ArrowSvg />
-                </PreviewCard.Arrow>
+                <PreviewCard.Arrow className={styles.Arrow} />
                 <PreviewCard.Viewport className={styles.Viewport}>{payload}</PreviewCard.Viewport>
               </PreviewCard.Popup>
             </PreviewCard.Positioner>
@@ -104,22 +102,3 @@ export default function PreviewCardDetachedTriggersFullDemo() {
     </div>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
index 95fca7e3fa0..3f72bb82256 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
@@ -6,43 +6,43 @@ const demoPreviewCard = PreviewCard.createHandle<React.ReactElement>();
 
 const cardContents = {
   typography: (
-    <div className="w-min box-border flex flex-col gap-2 p-2">
+    <div className="box-border flex w-min flex-col gap-2 p-2">
       <img
         width="224"
         height="150"
-        className="block rounded-xs max-w-none"
+        className="block max-w-none"
         src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
         alt="Station Hofplein signage in Rotterdam, Netherlands"
       />
-      <p className="m-0 text-sm leading-5 text-gray-900 text-pretty">
+      <p className="m-0 text-sm leading-5 text-gray-600 text-pretty dark:text-gray-400">
         <strong>Typography</strong> is the art and science of arranging type.
       </p>
     </div>
   ),
   design: (
-    <div className="w-min box-border flex flex-col gap-2 p-2">
+    <div className="box-border flex w-min flex-col gap-2 p-2">
       <img
         width="250"
         height="249"
-        className="block rounded-xs max-w-none"
+        className="block max-w-none"
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Braun_ABW30_%28schwarz%29.jpg/250px-Braun_ABW30_%28schwarz%29.jpg"
         alt="Braun ABW30"
       />
-      <p className="m-0 text-sm leading-5 text-gray-900 text-pretty">
+      <p className="m-0 text-sm leading-5 text-gray-600 text-pretty dark:text-gray-400">
         A <strong>design</strong> is the concept or proposal for an object, process, or system.
       </p>
     </div>
   ),
   art: (
-    <div className="w-min box-border flex flex-col gap-2 p-2">
+    <div className="box-border flex w-min flex-col gap-2 p-2">
       <img
         width="250"
         height="290"
-        className="block rounded-xs max-w-none"
+        className="block max-w-none"
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/MonaLisa_sfumato.jpeg/250px-MonaLisa_sfumato.jpeg"
         alt="Mona Lisa"
       />
-      <p className="m-0 text-sm leading-5 text-gray-900 text-pretty">
+      <p className="m-0 text-sm leading-5 text-gray-600 text-pretty dark:text-gray-400">
         <strong>Art</strong> is a diverse range of cultural activity centered around works utilizing
         creative or imaginative talents, which are expected to evoke a worthwhile experience,
         generally through an expression of emotional power, conceptual ideas, technical proficiency,
@@ -55,10 +55,10 @@ const cardContents = {
 export default function PreviewCardDetachedTriggersFullDemo() {
   return (
     <div>
-      <p className="m-0 text-base leading-6 text-gray-900 text-balance">
+      <p className="m-0 text-base leading-6 text-gray-950 text-balance dark:text-white">
         Discover{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:rounded-[2px] focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500"
           handle={demoPreviewCard}
           href="https://en.wikipedia.org/wiki/Typography"
           payload={cardContents.typography}
@@ -67,7 +67,7 @@ export default function PreviewCardDetachedTriggersFullDemo() {
         </PreviewCard.Trigger>
         ,{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:rounded-[2px] focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500"
           handle={demoPreviewCard}
           href="https://en.wikipedia.org/wiki/Design"
           payload={cardContents.design}
@@ -76,7 +76,7 @@ export default function PreviewCardDetachedTriggersFullDemo() {
         </PreviewCard.Trigger>
         , or{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:rounded-[2px] focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500"
           handle={demoPreviewCard}
           href="https://en.wikipedia.org/wiki/Art"
           payload={cardContents.art}
@@ -93,10 +93,8 @@ export default function PreviewCardDetachedTriggersFullDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]"
             >
-              <PreviewCard.Popup className="box-border relative w-[var(--popup-width,auto)] h-[var(--popup-height,auto)] rounded-lg bg-[canvas] origin-[var(--transform-origin)] transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[starting-style]:scale-90 data-[starting-style]:opacity-0 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1">
-                <PreviewCard.Arrow className="flex 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>
+              <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-gray-950 bg-white text-gray-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[width,height,opacity,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
+                <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-gray-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-gray-950" />
 
                 <PreviewCard.Viewport className="relative overflow-clip w-full h-full [&_[data-previous]]:w-[var(--popup-width)] [&_[data-previous]]:translate-x-0 [&_[data-previous]]:opacity-100 [&_[data-previous]]:transition-[translate,opacity] [&_[data-previous]]:duration-[350ms,175ms] [&_[data-previous]]:ease-[cubic-bezier(0.22,1,0.36,1)] [&_[data-current]]:w-[var(--popup-width)] [&_[data-current]]:translate-x-0 [&_[data-current]]:opacity-100 [&_[data-current]]:transition-[translate,opacity] [&_[data-current]]:duration-[350ms,175ms] [&_[data-current]]:ease-[cubic-bezier(0.22,1,0.36,1)] data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:-translate-x-[30%] data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:opacity-0 data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:translate-x-[30%] data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:opacity-0 data-[activation-direction~='left']:[&_[data-previous][data-ending-style]]:translate-x-[30%] data-[activation-direction~='left']:[&_[data-previous][data-ending-style]]:opacity-0 data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:-translate-x-[30%] data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:opacity-0">
                   {payload}
@@ -109,22 +107,3 @@ export default function PreviewCardDetachedTriggersFullDemo() {
     </div>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/css-modules/index.tsx
index 987374aedb6..24264c02db8 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/css-modules/index.tsx
@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { PreviewCard } from '@base-ui/react/preview-card';
 import styles from '../../index.module.css';
 
@@ -24,9 +23,7 @@ export default function PreviewCardDetachedTriggersSimpleDemo() {
         <PreviewCard.Portal>
           <PreviewCard.Positioner sideOffset={8}>
             <PreviewCard.Popup className={styles.Popup}>
-              <PreviewCard.Arrow className={styles.Arrow}>
-                <ArrowSvg />
-              </PreviewCard.Arrow>
+              <PreviewCard.Arrow className={styles.Arrow} />
               <div className={styles.PopupContent}>
                 <img
                   width="224"
@@ -47,22 +44,3 @@ export default function PreviewCardDetachedTriggersSimpleDemo() {
     </div>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
index 4f4ec6387db..90fd8c24a7b 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { PreviewCard } from '@base-ui/react/preview-card';
 
 const demoPreviewCard = PreviewCard.createHandle();
@@ -7,10 +6,10 @@ const demoPreviewCard = PreviewCard.createHandle();
 export default function PreviewCardDetachedTriggersSimpleDemo() {
   return (
     <div>
-      <p className="m-0 text-base leading-6 text-gray-900 text-balance">
+      <p className="m-0 text-base leading-6 text-gray-950 text-balance dark:text-white">
         The principles of good{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:rounded-[2px] focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500"
           handle={demoPreviewCard}
           href="https://en.wikipedia.org/wiki/Typography"
         >
@@ -22,19 +21,17 @@ export default function PreviewCardDetachedTriggersSimpleDemo() {
       <PreviewCard.Root handle={demoPreviewCard}>
         <PreviewCard.Portal>
           <PreviewCard.Positioner sideOffset={8}>
-            <PreviewCard.Popup className="box-border w-[var(--popup-width,auto)] h-[var(--popup-height,auto)] rounded-lg bg-[canvas] origin-[var(--transform-origin)] transition-[scale,opacity] duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1">
-              <PreviewCard.Arrow className="flex 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>
-              <div className="w-min flex flex-col gap-2 p-2 box-border">
+            <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-gray-950 bg-white text-gray-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
+              <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-gray-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-gray-950" />
+              <div className="box-border flex w-min flex-col gap-2 p-2">
                 <img
                   width="224"
                   height="150"
-                  className="block rounded-xs max-w-none"
+                  className="block max-w-none"
                   src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
                   alt="Station Hofplein signage in Rotterdam, Netherlands"
                 />
-                <p className="m-0 text-sm leading-5 text-gray-900 text-pretty">
+                <p className="m-0 text-sm leading-5 text-gray-600 text-pretty dark:text-gray-400">
                   <strong>Typography</strong> is the art and science of arranging type to make
                   written language clear, visually appealing, and effective in communication.
                 </p>
@@ -46,22 +43,3 @@ export default function PreviewCardDetachedTriggersSimpleDemo() {
     </div>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/hero/css-modules/index.tsx
index cf6103b420a..b54f08fe1e2 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/hero/css-modules/index.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { PreviewCard } from '@base-ui/react/preview-card';
 import styles from '../../index.module.css';
 
@@ -19,9 +18,7 @@ export default function ExamplePreviewCard() {
       <PreviewCard.Portal>
         <PreviewCard.Positioner sideOffset={8}>
           <PreviewCard.Popup className={styles.Popup}>
-            <PreviewCard.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </PreviewCard.Arrow>
+            <PreviewCard.Arrow className={styles.Arrow} />
             <div className={styles.PopupContent}>
               <img
                 width="224"
@@ -41,22 +38,3 @@ export default function ExamplePreviewCard() {
     </PreviewCard.Root>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
index a105ac4c3f1..b2e9db55c08 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
@@ -1,13 +1,12 @@
-import * as React from 'react';
 import { PreviewCard } from '@base-ui/react/preview-card';
 
 export default function ExamplePreviewCard() {
   return (
     <PreviewCard.Root>
-      <p className="m-0 text-base leading-6 text-gray-900 text-balance">
+      <p className="m-0 text-base leading-6 text-gray-950 text-balance dark:text-white">
         The principles of good{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:rounded-[2px] focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-blue-800"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500"
           href="https://en.wikipedia.org/wiki/Typography"
         >
           typography
@@ -17,19 +16,17 @@ export default function ExamplePreviewCard() {
 
       <PreviewCard.Portal>
         <PreviewCard.Positioner sideOffset={8}>
-          <PreviewCard.Popup className="box-border w-[var(--popup-width,auto)] h-[var(--popup-height,auto)] rounded-lg bg-[canvas] origin-[var(--transform-origin)] transition-[scale,opacity] duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1">
-            <PreviewCard.Arrow className="flex 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>
-            <div className="w-min flex flex-col gap-2 p-2 box-border">
+          <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-gray-950 bg-white text-gray-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
+            <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-gray-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-gray-950" />
+            <div className="box-border flex w-min flex-col gap-2 p-2">
               <img
                 width="224"
                 height="150"
-                className="block rounded-xs max-w-none"
+                className="block max-w-none"
                 src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
                 alt="Station Hofplein signage in Rotterdam, Netherlands"
               />
-              <p className="m-0 text-sm leading-5 text-gray-900 text-pretty">
+              <p className="m-0 text-sm leading-5 text-gray-600 text-pretty dark:text-gray-400">
                 <strong>Typography</strong> is the art and science of arranging type to make written
                 language clear, visually appealing, and effective in communication.
               </p>
@@ -40,22 +37,3 @@ export default function ExamplePreviewCard() {
     </PreviewCard.Root>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
index fbf76830234..1026c5236aa 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
@@ -6,71 +6,67 @@
 
 .Popup {
   box-sizing: border-box;
+  position: relative;
   width: var(--popup-width, auto);
   height: var(--popup-height, auto);
-  border-radius: 0.5rem;
-  background-color: canvas;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+    transform: scale(0.98);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    filter: none;
   }
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
 
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    border: 1px solid light-dark(var(--color-gray-950), white);
+    background-color: light-dark(white, var(--color-gray-950));
+    transform: translate(-50%, 50%) rotate(45deg);
   }
 }
 
@@ -85,7 +81,6 @@
 
 .Image {
   display: block;
-  border-radius: 0.25rem;
   max-width: none;
 }
 
@@ -93,7 +88,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-600), var(--color-gray-400));
   text-wrap: pretty;
 }
 
@@ -109,31 +104,35 @@
   margin: 0;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
   text-wrap: balance;
 }
 
 .Link {
   outline: 0;
-  color: var(--color-blue);
+  color: light-dark(var(--color-blue-800), var(--color-blue-500));
   text-decoration-line: underline;
   text-decoration-thickness: 1px;
-  text-decoration-color: color-mix(in oklab, var(--color-blue), transparent 40%);
+  text-decoration-color: color-mix(
+    in oklab,
+    light-dark(var(--color-blue-800), var(--color-blue-500)),
+    transparent 40%
+  );
   text-underline-offset: 2px;
 
   @media (hover: hover) {
     &:hover {
-      text-decoration-color: var(--color-blue);
+      text-decoration-color: light-dark(var(--color-blue-800), var(--color-blue-500));
     }
   }
 
   &[data-popup-open] {
-    text-decoration-color: var(--color-blue);
+    text-decoration-color: light-dark(var(--color-blue-800), var(--color-blue-500));
   }
 
   &:focus-visible {
-    border-radius: 0.125rem;
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
     text-decoration-line: none;
   }
 }
@@ -153,29 +152,27 @@
   height: 2.5rem;
   padding: 0 0.875rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
   font-family: inherit;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }

From 2523e17ab19dc697fa426ba65767fd9bac58a303 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 28 Apr 2026 07:53:58 +0200
Subject: [PATCH 079/257] Dialog: remove remaining blur instances

---
 .../dialog/demos/outside-scroll/css-modules/index.module.css | 4 +---
 .../dialog/demos/outside-scroll/tailwind/index.tsx           | 2 +-
 .../dialog/demos/uncontained/css-modules/index.module.css    | 5 +----
 .../components/dialog/demos/uncontained/tailwind/index.tsx   | 2 +-
 4 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
index dcb62768355..70f9c92ccea 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
@@ -36,9 +36,8 @@
   inset: 0;
   background-color: light-dark(rgb(0 0 0 / 20%), rgb(0 0 0 / 50%));
   transition-duration: 350ms;
-  transition-property: -webkit-backdrop-filter, backdrop-filter, opacity;
+  transition-property: opacity;
   transition-timing-function: var(--ease-out-fast);
-  backdrop-filter: blur(1.5px);
 
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
@@ -47,7 +46,6 @@
 
   &[data-starting-style],
   &[data-ending-style] {
-    backdrop-filter: blur(0);
     opacity: 0;
   }
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index 20d8e5ffadb..9850307e9d7 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -11,7 +11,7 @@ export default function OutsideScrollDialog() {
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 bg-black/20 dark:bg-black/50 transition-[backdrop-filter,opacity] duration-[350ms] ease-[var(--ease-out-fast)] backdrop-blur-[1.5px] data-[starting-style]:backdrop-blur-0 data-[starting-style]:opacity-0 data-[ending-style]:backdrop-blur-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-[220ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Backdrop className="fixed inset-0 bg-black/20 dark:bg-black/50 transition-opacity duration-[350ms] ease-[var(--ease-out-fast)] data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-[220ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="group/dialog fixed inset-0">
           <ScrollArea.Root
             style={{ position: undefined }}
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
index 1d52e57d492..2fb5d9ec613 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
@@ -36,10 +36,7 @@
   min-height: 100dvh;
   inset: 0;
   background-color: light-dark(rgb(0 0 0 / 20%), rgb(0 0 0 / 50%));
-  backdrop-filter: blur(1px);
-  transition:
-    opacity 150ms,
-    backdrop-filter 150ms;
+  transition: opacity 150ms;
 
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
   @supports (-webkit-touch-callout: none) {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
index 40152f24fc5..61b45ff29c1 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleUncontainedDialog() {
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black/20 dark:bg-black/50 backdrop-blur-[1px] transition-[opacity,backdrop-filter] duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black/20 dark:bg-black/50 transition-opacity duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="fixed inset-0 grid place-items-center px-4 py-12 xl:py-6">
           <Dialog.Popup className="group/popup relative flex h-full w-full max-w-[70rem] xl:max-w-none justify-center pointer-events-none transition-opacity duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0">
             <Dialog.Close

From 72a6175681a39a727d86715c167c48cf03dcfe84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 28 Apr 2026 08:06:20 +0200
Subject: [PATCH 080/257] Dialog: improve inside scroll example

---
 .../css-modules/index.module.css              | 19 +++++++---------
 .../demos/inside-scroll/css-modules/index.tsx |  8 +++----
 .../demos/inside-scroll/tailwind/index.tsx    | 22 ++++++++++---------
 3 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
index ff9b2df9041..8a7809147b7 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
@@ -119,7 +119,6 @@
   width: min(40rem, calc(100vw - 2rem));
   max-height: 100%;
   max-width: 100%;
-  padding: 1rem;
   border: 1px solid light-dark(var(--color-gray-950), white);
   background-color: light-dark(white, var(--color-gray-950));
   color: light-dark(var(--color-gray-950), white);
@@ -142,22 +141,18 @@
 }
 
 .PopupHeader {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 0.75rem;
-  margin-bottom: 0.25rem;
+  padding: 1rem 1rem 0.75rem;
 }
 
 .Title {
-  margin: 0;
+  margin: 0 0 0.25rem;
   font-size: 1rem;
   line-height: 1.5rem;
   font-weight: 700;
 }
 
 .Description {
-  margin: 0 0 0.75rem;
+  margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: light-dark(var(--color-gray-600), var(--color-gray-400));
@@ -177,7 +172,6 @@
   flex: 1 1 auto;
   min-height: 0;
   overscroll-behavior: contain;
-  padding: 1rem 1rem 1rem 0;
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
@@ -188,7 +182,10 @@
 .BodyContent {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+}
+
+.Section {
+  padding: 1rem;
 }
 
 .SectionTitle {
@@ -209,5 +206,5 @@
   display: flex;
   justify-content: flex-end;
   gap: 0.75rem;
-  margin-top: 1rem;
+  padding: 1rem;
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.tsx
index bdd8f04db93..66153f79db5 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.tsx
@@ -13,15 +13,15 @@ export default function InsideScrollDialog() {
           <Dialog.Popup className={styles.Popup}>
             <div className={styles.PopupHeader}>
               <Dialog.Title className={styles.Title}>Dialog</Dialog.Title>
+              <Dialog.Description className={styles.Description}>
+                This layout keeps the popup fully on screen while allowing its content to scroll.
+              </Dialog.Description>
             </div>
-            <Dialog.Description className={styles.Description}>
-              This layout keeps the popup fully on screen while allowing its content to scroll.
-            </Dialog.Description>
             <ScrollArea.Root className={styles.Body}>
               <ScrollArea.Viewport className={styles.BodyViewport}>
                 <ScrollArea.Content className={styles.BodyContent}>
                   {CONTENT_SECTIONS.map((item) => (
-                    <section key={item.title}>
+                    <section className={styles.Section} key={item.title}>
                       <h3 className={styles.SectionTitle}>{item.title}</h3>
                       <p className={styles.SectionBody}>{item.body}</p>
                     </section>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
index 1c90cc34890..ac23614b76c 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
@@ -11,18 +11,20 @@ export default function InsideScrollDialog() {
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="fixed inset-0 flex items-center justify-center overflow-hidden py-6 [@media(min-height:600px)]:pb-12 [@media(min-height:600px)]:pt-8">
-          <Dialog.Popup className="relative flex w-[min(40rem,calc(100vw-2rem))] max-h-full max-w-full min-h-0 flex-col overflow-hidden bg-white dark:bg-gray-950 p-4 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0">
-            <div className="mb-1 flex items-start justify-between gap-3">
-              <Dialog.Title className="m-0 text-base font-bold leading-6">Dialog</Dialog.Title>
+          <Dialog.Popup className="relative flex w-[min(40rem,calc(100vw-2rem))] max-h-full max-w-full min-h-0 flex-col overflow-hidden bg-white dark:bg-gray-950 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0">
+            <div className="px-4 pt-4 pb-3">
+              <Dialog.Title className="m-0 mb-1 text-base font-bold leading-6">
+                Dialog
+              </Dialog.Title>
+              <Dialog.Description className="m-0 text-sm leading-5 text-gray-600 dark:text-gray-400">
+                This layout keeps the popup fully on screen while allowing its content to scroll.
+              </Dialog.Description>
             </div>
-            <Dialog.Description className="m-0 mb-3 text-sm leading-5 text-gray-600 dark:text-gray-400">
-              This layout keeps the popup fully on screen while allowing its content to scroll.
-            </Dialog.Description>
             <ScrollArea.Root className="relative flex min-h-0 flex-auto overflow-hidden border-y border-gray-950 dark:border-white">
-              <ScrollArea.Viewport className="flex-auto min-h-0 overflow-y-auto overscroll-contain py-4 pr-4 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
-                <ScrollArea.Content className="flex flex-col gap-4">
+              <ScrollArea.Viewport className="flex-auto min-h-0 overflow-y-auto overscroll-contain focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                <ScrollArea.Content className="flex flex-col">
                   {CONTENT_SECTIONS.map((item) => (
-                    <section key={item.title}>
+                    <section className="p-4" key={item.title}>
                       <h3 className="mb-1 text-sm font-bold leading-5">{item.title}</h3>
                       <p className="m-0 text-sm leading-5 text-gray-700 dark:text-gray-300">
                         {item.body}
@@ -35,7 +37,7 @@ export default function InsideScrollDialog() {
                 <ScrollArea.Thumb className="w-full bg-gray-950 dark:bg-white" />
               </ScrollArea.Scrollbar>
             </ScrollArea.Root>
-            <div className="mt-4 flex justify-end gap-3">
+            <div className="flex justify-end gap-3 p-4">
               <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Close
               </Dialog.Close>

From 7dbb3047cbb054dbfe78dd4a7c6e611fbcb9fcaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 28 Apr 2026 12:54:43 +0200
Subject: [PATCH 081/257] ContextMenu: remove unnecessary CSS

---
 .../context-menu/demos/hero/css-modules/index.module.css         | 1 -
 .../context-menu/demos/submenu/css-modules/index.module.css      | 1 -
 2 files changed, 2 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
index 637d0d66c7c..663747ee9d6 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
@@ -11,7 +11,6 @@
   background-color: light-dark(white, var(--color-gray-950));
   font-weight: 400;
   color: light-dark(var(--color-gray-950), white);
-  -webkit-user-select: none;
   user-select: none;
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
index 31fe9cbcbd6..419863ce95c 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
@@ -11,7 +11,6 @@
   background-color: light-dark(white, var(--color-gray-950));
   font-weight: 400;
   color: light-dark(var(--color-gray-950), white);
-  -webkit-user-select: none;
   user-select: none;
 
   &:focus-visible {

From e54f39dd6b2cf704966a0b9273e0a64b76378e93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 28 Apr 2026 12:56:21 +0200
Subject: [PATCH 082/257] Prettier

---
 .../components/dialog/demos/inside-scroll/tailwind/index.tsx  | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
index ac23614b76c..22034932ead 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
@@ -13,9 +13,7 @@ export default function InsideScrollDialog() {
         <Dialog.Viewport className="fixed inset-0 flex items-center justify-center overflow-hidden py-6 [@media(min-height:600px)]:pb-12 [@media(min-height:600px)]:pt-8">
           <Dialog.Popup className="relative flex w-[min(40rem,calc(100vw-2rem))] max-h-full max-w-full min-h-0 flex-col overflow-hidden bg-white dark:bg-gray-950 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0">
             <div className="px-4 pt-4 pb-3">
-              <Dialog.Title className="m-0 mb-1 text-base font-bold leading-6">
-                Dialog
-              </Dialog.Title>
+              <Dialog.Title className="m-0 mb-1 text-base font-bold leading-6">Dialog</Dialog.Title>
               <Dialog.Description className="m-0 text-sm leading-5 text-gray-600 dark:text-gray-400">
                 This layout keeps the popup fully on screen while allowing its content to scroll.
               </Dialog.Description>

From 57c0c0f7cb9465a1e6237cddb097ca3547fdd1d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 28 Apr 2026 12:56:31 +0200
Subject: [PATCH 083/257] Remove unnecessary CSS

---
 .../autocomplete/demos/grid/css-modules/index.module.css         | 1 -
 .../demos/input-inside-popup/css-modules/index.module.css        | 1 -
 2 files changed, 2 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
index 0e9f7d56841..108d8eb5c83 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
@@ -77,7 +77,6 @@
   line-height: 1.5rem;
   color: var(--color-gray-900);
   cursor: default;
-  -webkit-user-select: none;
   user-select: none;
   min-width: 9rem;
   background-color: canvas;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
index a4d710d7f2b..353d8f11520 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
@@ -25,7 +25,6 @@
   color: var(--color-gray-900);
   cursor: default;
   background-color: canvas;
-  -webkit-user-select: none;
   user-select: none;
   min-width: 12rem;
 

From 5b70d9c4ed7dc0e875e88c229df32f1343d6d062 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 28 Apr 2026 13:16:25 +0200
Subject: [PATCH 084/257] Dialog: use regular button instead of ghost

---
 .../demos/nested/css-modules/index.module.css |  4 --
 .../dialog/demos/nested/css-modules/index.tsx | 32 ++++++--------
 .../dialog/demos/nested/tailwind/index.tsx    | 44 ++++++++-----------
 3 files changed, 32 insertions(+), 48 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
index 6b0b403e993..3fcca0e913b 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
@@ -144,7 +144,3 @@
   gap: 0.75rem;
   margin-top: 1rem;
 }
-
-.ActionsLeft {
-  margin-right: auto;
-}
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.tsx
index f93ee01deff..98ff904c066 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.tsx
@@ -13,24 +13,20 @@ export default function ExampleDialog() {
             You are all caught up. Good job!
           </Dialog.Description>
           <div className={styles.Actions}>
-            <div className={styles.ActionsLeft}>
-              <Dialog.Root>
-                <Dialog.Trigger className={styles.GhostButton}>Customize</Dialog.Trigger>
-                <Dialog.Portal>
-                  <Dialog.Popup className={styles.Popup}>
-                    <Dialog.Title className={styles.Title}>Customize notifications</Dialog.Title>
-                    <Dialog.Description className={styles.Description}>
-                      Review your settings here.
-                    </Dialog.Description>
-                    <div className={styles.Actions}>
-                      <Dialog.Close className={styles.Button}>Close</Dialog.Close>
-                    </div>
-                  </Dialog.Popup>
-                </Dialog.Portal>
-              </Dialog.Root>
-            </div>
-
-            <Dialog.Close className={styles.Button}>Close</Dialog.Close>
+            <Dialog.Root>
+              <Dialog.Trigger className={styles.Button}>Customize</Dialog.Trigger>
+              <Dialog.Portal>
+                <Dialog.Popup className={styles.Popup}>
+                  <Dialog.Title className={styles.Title}>Customize notifications</Dialog.Title>
+                  <Dialog.Description className={styles.Description}>
+                    Review your settings here.
+                  </Dialog.Description>
+                  <div className={styles.Actions}>
+                    <Dialog.Close className={styles.Button}>Close</Dialog.Close>
+                  </div>
+                </Dialog.Popup>
+              </Dialog.Portal>
+            </Dialog.Root>
           </div>
         </Dialog.Popup>
       </Dialog.Portal>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
index cdf7b48dffd..17d021a48d8 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
@@ -14,32 +14,24 @@ export default function ExampleDialog() {
             You are all caught up. Good job!
           </Dialog.Description>
           <div className="flex items-center justify-end gap-3 mt-4">
-            <div className="mr-auto flex">
-              <Dialog.Root>
-                <Dialog.Trigger className="flex h-8 items-center justify-center bg-transparent px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-200 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
-                  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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
-                    <Dialog.Title className="text-sm font-bold">
-                      Customize notifications
-                    </Dialog.Title>
-                    <Dialog.Description className="text-sm text-gray-600 dark:text-gray-400">
-                      Review your settings here.
-                    </Dialog.Description>
-                    <div className="flex items-center justify-end gap-3 mt-4">
-                      <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
-                        Close
-                      </Dialog.Close>
-                    </div>
-                  </Dialog.Popup>
-                </Dialog.Portal>
-              </Dialog.Root>
-            </div>
-
-            <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
-              Close
-            </Dialog.Close>
+            <Dialog.Root>
+              <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+                  <Dialog.Title className="text-sm font-bold">Customize notifications</Dialog.Title>
+                  <Dialog.Description className="text-sm text-gray-600 dark:text-gray-400">
+                    Review your settings here.
+                  </Dialog.Description>
+                  <div className="flex items-center justify-end gap-3 mt-4">
+                    <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                      Close
+                    </Dialog.Close>
+                  </div>
+                </Dialog.Popup>
+              </Dialog.Portal>
+            </Dialog.Root>
           </div>
         </Dialog.Popup>
       </Dialog.Portal>

From 5d7f1faf1915fdd9b4c0591af9706c4f52c0f649 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 28 Apr 2026 15:34:34 +0200
Subject: [PATCH 085/257] Dialog: tweak nested transition

---
 .../demos/nested/css-modules/index.module.css | 39 ++++++++++++-------
 .../dialog/demos/nested/css-modules/index.tsx |  2 +-
 .../dialog/demos/nested/tailwind/index.tsx    |  6 +--
 3 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
index 3fcca0e913b..cd7e33a7263 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
@@ -96,30 +96,36 @@
   background-color: light-dark(white, var(--color-gray-950));
   color: light-dark(var(--color-gray-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+  translate: -50% calc(-50% + 1.25rem * var(--nested-dialogs));
+  scale: calc(1 - 0.1 * var(--nested-dialogs));
   transition:
-    transform 100ms ease-out,
-    opacity 100ms ease-out;
-
-  transform: translate(-50%, -50%) scale(calc(1 - 0.1 * var(--nested-dialogs)));
-  translate: 0 calc(0px + 1.25rem * var(--nested-dialogs));
+    translate 150ms ease-out,
+    scale 150ms ease-out,
+    opacity 150ms ease-out;
 
   @media (prefers-color-scheme: dark) {
     box-shadow: none;
   }
 
-  &[data-nested-dialog-open] {
-    &::after {
-      content: '';
-      inset: 0;
-      position: absolute;
-      background-color: rgb(0 0 0 / 0.05);
-    }
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: rgb(0 0 0 / 0.05);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 150ms ease-out;
+  }
+
+  &[data-nested-dialog-open]::after {
+    opacity: 1;
   }
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: translate(-50%, -50%) scale(0.98);
+    translate: -50% calc(-50% + 0.25rem + 1.25rem * var(--nested-dialogs));
+    scale: 0.96;
   }
 }
 
@@ -138,6 +144,13 @@
 }
 
 .Actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-top: 1rem;
+}
+
+.EndActions {
   display: flex;
   align-items: center;
   justify-content: end;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.tsx
index 98ff904c066..f8324c785e2 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.tsx
@@ -21,7 +21,7 @@ export default function ExampleDialog() {
                   <Dialog.Description className={styles.Description}>
                     Review your settings here.
                   </Dialog.Description>
-                  <div className={styles.Actions}>
+                  <div className={styles.EndActions}>
                     <Dialog.Close className={styles.Button}>Close</Dialog.Close>
                   </div>
                 </Dialog.Popup>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
index 17d021a48d8..4b367ccf517 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
@@ -8,18 +8,18 @@ export default function ExampleDialog() {
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-[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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-[ending-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:opacity-100 data-[starting-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0">
           <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
           <Dialog.Description className="text-sm text-gray-600 dark:text-gray-400">
             You are all caught up. Good job!
           </Dialog.Description>
-          <div className="flex items-center justify-end gap-3 mt-4">
+          <div className="flex items-center gap-3 mt-4">
             <Dialog.Root>
               <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+                <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-[ending-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:opacity-100 data-[starting-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0">
                   <Dialog.Title className="text-sm font-bold">Customize notifications</Dialog.Title>
                   <Dialog.Description className="text-sm text-gray-600 dark:text-gray-400">
                     Review your settings here.

From 291260ae72b487e674782af399d448cbf47b9407 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 28 Apr 2026 16:40:49 +0200
Subject: [PATCH 086/257] Toast brutalist

---
 .../anchored/css-modules/index.module.css     | 310 +++++++++---------
 .../demos/anchored/css-modules/index.tsx      |  60 +---
 .../toast/demos/anchored/tailwind/index.tsx   |  79 +----
 .../demos/custom/css-modules/index.module.css | 138 ++++----
 .../toast/demos/custom/css-modules/index.tsx  |  41 +--
 .../deduplicate/css-modules/index.module.css  | 158 +++++----
 .../demos/deduplicate/css-modules/index.tsx   |  29 +-
 .../demos/hero/css-modules/index.module.css   | 140 ++++----
 .../toast/demos/hero/css-modules/index.tsx    |  29 +-
 .../toast/demos/hero/tailwind/index.tsx       |  40 +--
 .../position/css-modules/index.module.css     | 140 ++++----
 .../demos/position/css-modules/index.tsx      |  29 +-
 .../toast/demos/position/tailwind/index.tsx   |  40 +--
 .../promise/css-modules/index.module.css      | 150 +++++----
 .../toast/demos/promise/css-modules/index.tsx |  29 +-
 .../demos/undo/css-modules/index.module.css   | 140 ++++----
 .../toast/demos/undo/css-modules/index.tsx    |  32 +-
 .../css-modules/index.module.css              | 142 ++++----
 .../varying-heights/css-modules/index.tsx     |  29 +-
 docs/src/css/index.css                        |   3 +
 20 files changed, 798 insertions(+), 960 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
index 7d98e06ad3c..6f0667dce52 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
@@ -1,77 +1,3 @@
-.ButtonGroup {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-}
-
-.Button {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
-  margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  font-family: inherit;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
-  user-select: none;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
-
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-}
-
-.CopyButton {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
-  padding: 0;
-  margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  font-family: inherit;
-  color: var(--color-gray-900);
-  user-select: none;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
-
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-}
-
 .AnchoredViewport {
   outline: 0;
 }
@@ -88,46 +14,35 @@
   flex-direction: column;
   width: max-content;
   padding: 0.25rem 0.5rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-
-    &:focus-visible {
-      outline: 1px solid var(--color-blue-800);
-      outline-offset: -1px;
-    }
+    transform: scale(0.98);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    filter: none;
+  }
 
-    &:focus-visible {
-      outline: 1px solid var(--color-blue-400);
-      outline-offset: -1px;
-    }
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
 .StackedViewport {
   position: fixed;
   z-index: 1;
-  width: 250px;
+  width: calc(100vw - 2rem);
   margin: 0 auto;
   bottom: 1rem;
   right: 1rem;
@@ -137,7 +52,7 @@
   @media (min-width: 500px) {
     bottom: 2rem;
     right: 2rem;
-    width: 300px;
+    width: 22.5rem;
   }
 }
 
@@ -155,19 +70,16 @@
   right: 0;
   margin: 0 auto;
   box-sizing: border-box;
-  background: var(--color-gray-50);
-  color: var(--color-gray-900);
-  border: 1px solid var(--color-gray-200);
-  padding: 1rem;
   width: 100%;
-  box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
-  background-clip: padding-box;
-  border-radius: 0.5rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  padding: 0.75rem;
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: bottom center;
   bottom: 0;
   left: auto;
   margin-right: 0;
-  -webkit-user-select: none;
   user-select: none;
   transition:
     transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
@@ -185,6 +97,10 @@
     )
     scale(var(--scale));
 
+  @media (prefers-color-scheme: dark) {
+    filter: none;
+  }
+
   &[data-expanded] {
     transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
     height: var(--toast-height);
@@ -227,8 +143,11 @@
 }
 
 .Content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
   overflow: hidden;
-  transition: opacity 0.25s;
+  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
   &[data-behind] {
     opacity: 0;
@@ -239,41 +158,54 @@
   }
 }
 
+.Text {
+  min-width: 0;
+  flex: 1;
+}
+
 .Title {
   font-weight: 700;
-  font-size: 0.975rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Description {
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  padding: 0;
-  border: none;
-  background: transparent;
-  width: 1.25rem;
-  height: 1.25rem;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
 
-  &:hover {
-    background-color: var(--color-gray-100);
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    }
   }
-}
 
-.Icon {
-  width: 1rem;
-  height: 1rem;
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
+  }
 }
 
 .Tooltip {
@@ -283,76 +215,144 @@
   display: flex;
   flex-direction: column;
   padding: 0.25rem 0.5rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
-    transform 150ms,
-    opacity 150ms;
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.98);
   }
 
   &[data-instant] {
     transition-duration: 0ms;
   }
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    filter: none;
   }
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
+
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    border: 1px solid light-dark(var(--color-gray-950), white);
+    background-color: light-dark(white, var(--color-gray-950));
+    transform: translate(-50%, 50%) rotate(45deg);
+  }
 }
 
-.ArrowFill {
-  fill: canvas;
+.ButtonGroup {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
 }
 
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  padding: 0 0.75rem;
+  margin: 0;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
+  user-select: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    }
   }
-}
 
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
-.Viewport {
-  outline: 0;
+.Icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.CopyButton {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  margin: 0;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  font-family: inherit;
+  color: light-dark(var(--color-gray-950), white);
+  user-select: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    }
+  }
+
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
index 0951c02ec3c..4fdf1202644 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
@@ -51,7 +51,7 @@ function CopyButton() {
       description: 'Copied',
       positionerProps: {
         anchor: buttonRef.current,
-        sideOffset: 8,
+        sideOffset: 10,
       },
       timeout: 1500,
       onClose() {
@@ -75,9 +75,7 @@ function CopyButton() {
       <Tooltip.Portal>
         <Tooltip.Positioner sideOffset={8}>
           <Tooltip.Popup className={styles.Tooltip}>
-            <Tooltip.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </Tooltip.Arrow>
+            <Tooltip.Arrow className={styles.Arrow} />
             Copy
           </Tooltip.Popup>
         </Tooltip.Positioner>
@@ -94,9 +92,7 @@ function AnchoredToasts() {
         {toasts.map((toast) => (
           <Toast.Positioner key={toast.id} toast={toast} className={styles.AnchoredPositioner}>
             <Toast.Root toast={toast} className={styles.AnchoredToast}>
-              <Toast.Arrow className={styles.Arrow}>
-                <ArrowSvg />
-              </Toast.Arrow>
+              <Toast.Arrow className={styles.Arrow} />
               <Toast.Content>
                 <Toast.Description />
               </Toast.Content>
@@ -116,11 +112,11 @@ function StackedToasts() {
         {toasts.map((toast) => (
           <Toast.Root key={toast.id} toast={toast} className={styles.StackedToast}>
             <Toast.Content className={styles.Content}>
-              <Toast.Title className={styles.Title} />
-              <Toast.Description className={styles.Description} />
-              <Toast.Close className={styles.Close} aria-label="Close">
-                <XIcon className={styles.Icon} />
-              </Toast.Close>
+              <div className={styles.Text}>
+                <Toast.Title className={styles.Title} />
+                <Toast.Description className={styles.Description} />
+              </div>
+              <Toast.Close className={styles.Close}>Dismiss</Toast.Close>
             </Toast.Content>
           </Toast.Root>
         ))}
@@ -129,25 +125,6 @@ function StackedToasts() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
 function ClipboardIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
@@ -156,7 +133,7 @@ function ClipboardIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
+      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
       {...props}
@@ -184,22 +161,3 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
     </svg>
   );
 }
-
-function XIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index 55c78381601..bcdce512c75 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -35,7 +35,7 @@ function StackedToastButton() {
   return (
     <button
       type="button"
-      className="box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 py-0 font-normal text-gray-900 outline-0 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-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800"
       onClick={createToast}
     >
       Stacked toast
@@ -54,7 +54,7 @@ function CopyButton() {
       description: 'Copied',
       positionerProps: {
         anchor: buttonRef.current,
-        sideOffset: 8,
+        sideOffset: 10,
       },
       timeout: 1500,
       onClose() {
@@ -68,19 +68,17 @@ function CopyButton() {
       <Tooltip.Trigger
         ref={buttonRef}
         closeOnClick={false}
-        className="box-border flex h-10 w-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 text-gray-900 outline-0 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-8 w-8 items-center justify-center rounded-none border border-gray-950 bg-white text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800"
         onClick={handleCopy}
         aria-label="Copy to clipboard"
         render={<Button disabled={copied} focusableWhenDisabled />}
       >
-        {copied ? <CheckIcon className="h-5 w-5" /> : <ClipboardIcon className="h-5 w-5" />}
+        {copied ? <CheckIcon className="h-4 w-4" /> : <ClipboardIcon className="h-4 w-4" />}
       </Tooltip.Trigger>
       <Tooltip.Portal>
         <Tooltip.Positioner sideOffset={8}>
-          <Tooltip.Popup className="flex origin-(--transform-origin) flex-col rounded-md bg-[canvas] px-2 py-1 text-sm shadow-lg shadow-gray-200 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-2 data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:-bottom-2 data-[side=top]:rotate-180">
-              <ArrowSvg />
-            </Tooltip.Arrow>
+          <Tooltip.Popup className="flex origin-[var(--transform-origin)] flex-col border border-gray-950 bg-white px-2 py-1 text-sm text-gray-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-instant:duration-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
+            <Tooltip.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-gray-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-gray-950" />
             Copy
           </Tooltip.Popup>
         </Tooltip.Positioner>
@@ -102,11 +100,9 @@ function AnchoredToasts() {
           >
             <Toast.Root
               toast={toast}
-              className="group flex w-max origin-(--transform-origin) flex-col rounded-md bg-[canvas] px-2 py-1 text-sm shadow-lg shadow-gray-200 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 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300 dark:focus-visible:outline-blue-400"
+              className="flex w-max origin-[var(--transform-origin)] flex-col border border-gray-950 bg-white px-2 py-1 text-sm text-gray-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]"
             >
-              <Toast.Arrow className="data-[side=bottom]:-top-2 data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:-bottom-2 data-[side=top]:rotate-180">
-                <ArrowSvg />
-              </Toast.Arrow>
+              <Toast.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-gray-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-gray-950" />
               <Toast.Content>
                 <Toast.Description />
               </Toast.Content>
@@ -122,21 +118,20 @@ function StackedToasts() {
   const { toasts } = Toast.useToastManager();
   return (
     <Toast.Portal>
-      <Toast.Viewport className="fixed z-10 top-auto right-[1rem] bottom-[1rem] mx-auto flex w-[250px] sm:right-[2rem] sm:bottom-[2rem] sm:w-[300px]">
+      <Toast.Viewport className="fixed top-auto right-[1rem] bottom-[1rem] z-1 mx-auto w-[calc(100vw-2rem)] sm:right-[2rem] sm:bottom-[2rem] sm:w-[22.5rem]">
         {toasts.map((toast) => (
           <Toast.Root
             key={toast.id}
             toast={toast}
-            className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] rounded-lg border border-gray-200 bg-gray-50 bg-clip-padding p-4 shadow-lg select-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+            className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-gray-950 bg-white p-3 text-gray-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] select-none dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none] after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
           >
-            <Toast.Content className="overflow-hidden transition-opacity [transition-duration:250ms] data-[behind]:pointer-events-none data-[behind]:opacity-0 data-[expanded]:pointer-events-auto data-[expanded]:opacity-100">
-              <Toast.Title className="text-[0.975rem] leading-5 font-bold" />
-              <Toast.Description className="text-[0.925rem] leading-5 text-gray-700" />
-              <Toast.Close
-                className="absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded-sm border-none bg-transparent text-gray-500 hover:bg-gray-100 hover:text-gray-700"
-                aria-label="Close"
-              >
-                <XIcon className="h-4 w-4" />
+            <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-[behind]:opacity-0 data-[expanded]:opacity-100">
+              <div className="min-w-0 flex-1">
+                <Toast.Title className="text-sm font-bold" />
+                <Toast.Description className="text-sm" />
+              </div>
+              <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800">
+                Dismiss
               </Toast.Close>
             </Toast.Content>
           </Toast.Root>
@@ -146,25 +141,6 @@ function StackedToasts() {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
-
 function ClipboardIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
@@ -173,7 +149,7 @@ function ClipboardIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
+      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
       {...props}
@@ -201,22 +177,3 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
     </svg>
   );
 }
-
-function XIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
index 40093ee45e0..d682f573c42 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
@@ -1,42 +1,7 @@
-.Button {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
-  margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  font-family: inherit;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
-  user-select: none;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
-
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-}
-
 .Viewport {
   position: fixed;
   z-index: 1;
-  width: 250px;
+  width: calc(100vw - 2rem);
   margin: 0 auto;
   bottom: 1rem;
   right: 1rem;
@@ -46,7 +11,7 @@
   @media (min-width: 500px) {
     bottom: 2rem;
     right: 2rem;
-    width: 300px;
+    width: 22.5rem;
   }
 }
 
@@ -64,19 +29,16 @@
   right: 0;
   margin: 0 auto;
   box-sizing: border-box;
-  background: var(--color-gray-50);
-  color: var(--color-gray-900);
-  border: 1px solid var(--color-gray-200);
-  padding: 1rem;
   width: 100%;
-  box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
-  background-clip: padding-box;
-  border-radius: 0.5rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  padding: 0.75rem;
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: bottom center;
   bottom: 0;
   left: auto;
   margin-right: 0;
-  -webkit-user-select: none;
   user-select: none;
   transition:
     transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
@@ -94,6 +56,10 @@
     )
     scale(var(--scale));
 
+  @media (prefers-color-scheme: dark) {
+    filter: none;
+  }
+
   &[data-expanded] {
     transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
     height: var(--toast-height);
@@ -136,6 +102,9 @@
 }
 
 .Content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
   overflow: hidden;
   transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
@@ -148,39 +117,86 @@
   }
 }
 
+.Text {
+  min-width: 0;
+  flex: 1;
+}
+
 .Title {
   font-weight: 700;
-  font-size: 0.975rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Description {
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  padding: 0;
-  border: none;
-  background: transparent;
-  width: 1.25rem;
-  height: 1.25rem;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    }
+  }
+
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
 
-  &:hover {
-    background-color: var(--color-gray-100);
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
-.Icon {
-  width: 1rem;
-  height: 1rem;
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  padding: 0 0.75rem;
+  margin: 0;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
+  user-select: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    }
+  }
+
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.tsx
index d21535028ba..9408cc9f98c 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.tsx
@@ -52,37 +52,18 @@ function ToastList() {
   return toasts.map((toast) => (
     <Toast.Root key={toast.id} toast={toast} className={styles.Toast}>
       <Toast.Content className={styles.Content}>
-        <Toast.Title className={styles.Title}>{toast.title}</Toast.Title>
-        {isCustomToast(toast) && toast.data ? (
-          <Toast.Description className={styles.Description}>
-            `data.userId` is {toast.data.userId}
-          </Toast.Description>
-        ) : (
-          <Toast.Description className={styles.Description} />
-        )}
-        <Toast.Close className={styles.Close} aria-label="Close">
-          <XIcon className={styles.Icon} />
-        </Toast.Close>
+        <div className={styles.Text}>
+          <Toast.Title className={styles.Title}>{toast.title}</Toast.Title>
+          {isCustomToast(toast) && toast.data ? (
+            <Toast.Description className={styles.Description}>
+              data.userId is {toast.data.userId}
+            </Toast.Description>
+          ) : (
+            <Toast.Description className={styles.Description} />
+          )}
+        </div>
+        <Toast.Close className={styles.Close}>Dismiss</Toast.Close>
       </Toast.Content>
     </Toast.Root>
   ));
 }
-
-function XIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
index 33e580321c3..210f5fd2a4e 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
@@ -1,42 +1,7 @@
-.Button {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
-  margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  font-family: inherit;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
-  user-select: none;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
-
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-}
-
 .Viewport {
   position: fixed;
   z-index: 1;
-  width: 250px;
+  width: calc(100vw - 2rem);
   margin: 0 auto;
   right: 1rem;
   bottom: 1rem;
@@ -46,7 +11,7 @@
   @media (min-width: 500px) {
     right: 2rem;
     bottom: 2rem;
-    width: 300px;
+    width: 22.5rem;
   }
 }
 
@@ -62,29 +27,26 @@
   );
   position: absolute;
   right: 0;
-  bottom: 0;
-  left: auto;
-  width: 100%;
   margin: 0 auto;
-  margin-right: 0;
   box-sizing: border-box;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.5rem;
-  background: var(--color-gray-50);
-  background-clip: padding-box;
-  color: var(--color-gray-900);
-  box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
-  padding: 1rem;
-  cursor: default;
+  width: 100%;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  padding: 0.75rem;
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: bottom center;
-  z-index: calc(1000 - var(--toast-index));
-  height: var(--height);
+  bottom: 0;
+  left: auto;
+  margin-right: 0;
   user-select: none;
-  -webkit-user-select: none;
   transition:
     transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
     opacity 0.5s,
     height 0.15s;
+  cursor: default;
+  z-index: calc(1000 - var(--toast-index));
+  height: var(--height);
   transform: translateX(var(--toast-swipe-movement-x))
     translateY(
       calc(
@@ -94,6 +56,10 @@
     )
     scale(var(--scale));
 
+  @media (prefers-color-scheme: dark) {
+    filter: none;
+  }
+
   &[data-expanded] {
     transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
     height: var(--toast-height);
@@ -148,6 +114,9 @@
 }
 
 .Content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
   overflow: hidden;
   transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
@@ -160,41 +129,88 @@
   }
 }
 
+.Text {
+  min-width: 0;
+  flex: 1;
+}
+
 .Title {
-  margin: 0;
-  font-size: 0.975rem;
-  line-height: 1.25rem;
   font-weight: 700;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  margin: 0;
 }
 
 .Description {
-  margin: 0;
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
+  margin: 0;
 }
 
 .Close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
-  padding: 0;
-  border: none;
-  border-radius: 0.25rem;
-  background: transparent;
+  height: 2rem;
+  padding: 0 0.75rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
 
-  &:hover {
-    background-color: var(--color-gray-100);
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    }
+  }
+
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
-.Icon {
-  width: 1rem;
-  height: 1rem;
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  padding: 0 0.75rem;
+  margin: 0;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
+  user-select: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    }
+  }
+
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
+  }
 }
 
 @keyframes pulse-even {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.tsx
index 2189e95ff12..477de9685b5 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.tsx
@@ -51,31 +51,12 @@ function PulseToastItem({ toast }: { toast: Toast.Root.ToastObject }) {
   return (
     <Toast.Root toast={toast} className={className}>
       <Toast.Content className={styles.Content}>
-        <Toast.Title className={styles.Title} />
-        <Toast.Description className={styles.Description} />
-        <Toast.Close className={styles.Close} aria-label="Close">
-          <XIcon className={styles.Icon} />
-        </Toast.Close>
+        <div className={styles.Text}>
+          <Toast.Title className={styles.Title} />
+          <Toast.Description className={styles.Description} />
+        </div>
+        <Toast.Close className={styles.Close}>Dismiss</Toast.Close>
       </Toast.Content>
     </Toast.Root>
   );
 }
-
-function XIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
index fb2fee07307..d682f573c42 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
@@ -1,42 +1,7 @@
-.Button {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
-  margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  font-family: inherit;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
-  user-select: none;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
-
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-}
-
 .Viewport {
   position: fixed;
   z-index: 1;
-  width: 250px;
+  width: calc(100vw - 2rem);
   margin: 0 auto;
   bottom: 1rem;
   right: 1rem;
@@ -46,7 +11,7 @@
   @media (min-width: 500px) {
     bottom: 2rem;
     right: 2rem;
-    width: 300px;
+    width: 22.5rem;
   }
 }
 
@@ -64,19 +29,16 @@
   right: 0;
   margin: 0 auto;
   box-sizing: border-box;
-  background: var(--color-gray-50);
-  color: var(--color-gray-900);
-  border: 1px solid var(--color-gray-200);
-  padding: 1rem;
   width: 100%;
-  box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
-  background-clip: padding-box;
-  border-radius: 0.5rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  padding: 0.75rem;
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: bottom center;
   bottom: 0;
   left: auto;
   margin-right: 0;
-  -webkit-user-select: none;
   user-select: none;
   transition:
     transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
@@ -94,6 +56,10 @@
     )
     scale(var(--scale));
 
+  @media (prefers-color-scheme: dark) {
+    filter: none;
+  }
+
   &[data-expanded] {
     transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
     height: var(--toast-height);
@@ -136,8 +102,11 @@
 }
 
 .Content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
   overflow: hidden;
-  transition: opacity 0.25s;
+  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
   &[data-behind] {
     opacity: 0;
@@ -148,39 +117,86 @@
   }
 }
 
+.Text {
+  min-width: 0;
+  flex: 1;
+}
+
 .Title {
   font-weight: 700;
-  font-size: 0.975rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Description {
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  padding: 0;
-  border: none;
-  background: transparent;
-  width: 1.25rem;
-  height: 1.25rem;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    }
+  }
+
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
 
-  &:hover {
-    background-color: var(--color-gray-100);
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
-.Icon {
-  width: 1rem;
-  height: 1rem;
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  padding: 0 0.75rem;
+  margin: 0;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
+  user-select: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    }
+  }
+
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.tsx
index 6f1718294a1..1b75203b9a1 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.tsx
@@ -40,31 +40,12 @@ function ToastList() {
   return toasts.map((toast) => (
     <Toast.Root key={toast.id} toast={toast} className={styles.Toast}>
       <Toast.Content className={styles.Content}>
-        <Toast.Title className={styles.Title} />
-        <Toast.Description className={styles.Description} />
-        <Toast.Close className={styles.Close} aria-label="Close">
-          <XIcon className={styles.Icon} />
-        </Toast.Close>
+        <div className={styles.Text}>
+          <Toast.Title className={styles.Title} />
+          <Toast.Description className={styles.Description} />
+        </div>
+        <Toast.Close className={styles.Close}>Dismiss</Toast.Close>
       </Toast.Content>
     </Toast.Root>
   ));
 }
-
-function XIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
index a3fc4128812..68e72470a45 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleToast() {
     <Toast.Provider>
       <ToastButton />
       <Toast.Portal>
-        <Toast.Viewport className="fixed z-10 top-auto right-[1rem] bottom-[1rem] mx-auto flex w-[250px] sm:right-[2rem] sm:bottom-[2rem] sm:w-[300px]">
+        <Toast.Viewport className="fixed top-auto right-[1rem] bottom-[1rem] z-1 mx-auto w-[calc(100vw-2rem)] sm:right-[2rem] sm:bottom-[2rem] sm:w-[22.5rem]">
           <ToastList />
         </Toast.Viewport>
       </Toast.Portal>
@@ -30,7 +30,7 @@ function ToastButton() {
   return (
     <button
       type="button"
-      className="box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 py-0 font-normal text-gray-900 outline-0 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-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800"
       onClick={createToast}
     >
       Create toast
@@ -44,37 +44,17 @@ function ToastList() {
     <Toast.Root
       key={toast.id}
       toast={toast}
-      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] rounded-lg border border-gray-200 bg-gray-50 bg-clip-padding p-4 shadow-lg select-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-gray-950 bg-white p-3 text-gray-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] select-none dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none] after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
     >
-      <Toast.Content className="overflow-hidden transition-opacity [transition-duration:250ms] data-[behind]:pointer-events-none data-[behind]:opacity-0 data-[expanded]:pointer-events-auto data-[expanded]:opacity-100">
-        <Toast.Title className="text-[0.975rem] leading-5 font-bold" />
-        <Toast.Description className="text-[0.925rem] leading-5 text-gray-700" />
-        <Toast.Close
-          className="absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded-sm border-none bg-transparent text-gray-500 hover:bg-gray-100 hover:text-gray-700"
-          aria-label="Close"
-        >
-          <XIcon className="h-4 w-4" />
+      <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-[behind]:opacity-0 data-[expanded]:opacity-100">
+        <div className="min-w-0 flex-1">
+          <Toast.Title className="text-sm font-bold" />
+          <Toast.Description className="text-sm" />
+        </div>
+        <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800">
+          Dismiss
         </Toast.Close>
       </Toast.Content>
     </Toast.Root>
   ));
 }
-
-function XIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
index 90c2afda43a..1c925722880 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
@@ -1,43 +1,8 @@
-.Button {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
-  margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  font-family: inherit;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
-  user-select: none;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
-
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-}
-
 .Viewport {
   position: fixed;
   z-index: 1;
-  width: 100%;
-  max-width: 300px;
+  width: calc(100vw - 2rem);
+  max-width: 22.5rem;
   margin: 0 auto;
   top: 1rem;
   right: 0;
@@ -57,21 +22,18 @@
   position: absolute;
   margin: 0 auto;
   box-sizing: border-box;
-  background: var(--color-gray-50);
-  color: var(--color-gray-900);
-  border: 1px solid var(--color-gray-200);
-  padding: 1rem;
   width: 100%;
-  box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
-  background-clip: padding-box;
-  border-radius: 0.5rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  padding: 0.75rem;
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: top center;
   top: 0;
   left: 0;
   right: 0;
   margin-right: auto;
   margin-left: auto;
-  -webkit-user-select: none;
   user-select: none;
   transition:
     transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
@@ -89,6 +51,10 @@
     )
     scale(var(--scale));
 
+  @media (prefers-color-scheme: dark) {
+    filter: none;
+  }
+
   &[data-expanded] {
     transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
     height: var(--toast-height);
@@ -131,8 +97,11 @@
 }
 
 .Content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
   overflow: hidden;
-  transition: opacity 0.25s;
+  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
   &[data-behind] {
     opacity: 0;
@@ -143,39 +112,86 @@
   }
 }
 
+.Text {
+  min-width: 0;
+  flex: 1;
+}
+
 .Title {
   font-weight: 700;
-  font-size: 0.975rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Description {
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  padding: 0;
-  border: none;
-  background: transparent;
-  width: 1.25rem;
-  height: 1.25rem;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    }
+  }
+
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
 
-  &:hover {
-    background-color: var(--color-gray-100);
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
-.Icon {
-  width: 1rem;
-  height: 1rem;
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  padding: 0 0.75rem;
+  margin: 0;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
+  user-select: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    }
+  }
+
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.tsx
index 24191bb98eb..3c57425820a 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.tsx
@@ -40,31 +40,12 @@ function ToastList() {
   return toasts.map((toast) => (
     <Toast.Root key={toast.id} toast={toast} swipeDirection="up" className={styles.Toast}>
       <Toast.Content className={styles.Content}>
-        <Toast.Title className={styles.Title} />
-        <Toast.Description className={styles.Description} />
-        <Toast.Close className={styles.Close} aria-label="Close">
-          <XIcon className={styles.Icon} />
-        </Toast.Close>
+        <div className={styles.Text}>
+          <Toast.Title className={styles.Title} />
+          <Toast.Description className={styles.Description} />
+        </div>
+        <Toast.Close className={styles.Close}>Dismiss</Toast.Close>
       </Toast.Content>
     </Toast.Root>
   ));
 }
-
-function XIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
index fb3fb1c2d07..36d2d5fa319 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleToast() {
     <Toast.Provider>
       <ToastButton />
       <Toast.Portal>
-        <Toast.Viewport className="fixed z-10 top-[1rem] right-0 bottom-auto left-0 mx-auto flex w-full max-w-[300px]">
+        <Toast.Viewport className="fixed top-[1rem] right-0 bottom-auto left-0 z-1 mx-auto w-[calc(100vw-2rem)] max-w-[22.5rem]">
           <ToastList />
         </Toast.Viewport>
       </Toast.Portal>
@@ -30,7 +30,7 @@ function ToastButton() {
   return (
     <button
       type="button"
-      className="box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 py-0 font-normal text-gray-900 outline-0 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-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800"
       onClick={createToast}
     >
       Create toast
@@ -45,37 +45,17 @@ function ToastList() {
       key={toast.id}
       toast={toast}
       swipeDirection="up"
-      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)+(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))] absolute right-0 top-0 left-0 z-[calc(1000-var(--toast-index))] mx-auto w-[300px] origin-top [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))_scale(var(--scale))] rounded-lg border border-gray-200 bg-gray-50 bg-clip-padding p-4 shadow-lg select-none after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(-150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)+(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))] absolute top-0 right-0 left-0 z-[calc(1000-var(--toast-index))] mx-auto w-full origin-top [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))_scale(var(--scale))] border border-gray-950 bg-white p-3 text-gray-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] select-none dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none] after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(-150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
     >
-      <Toast.Content className="overflow-hidden transition-opacity [transition-duration:250ms] data-[behind]:pointer-events-none data-[behind]:opacity-0 data-[expanded]:pointer-events-auto data-[expanded]:opacity-100">
-        <Toast.Title className="text-[0.975rem] leading-5 font-bold" />
-        <Toast.Description className="text-[0.925rem] leading-5 text-gray-700" />
-        <Toast.Close
-          className="absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded-sm border-none bg-transparent text-gray-500 hover:bg-gray-100 hover:text-gray-700"
-          aria-label="Close"
-        >
-          <XIcon className="h-4 w-4" />
+      <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-[behind]:opacity-0 data-[expanded]:opacity-100">
+        <div className="min-w-0 flex-1">
+          <Toast.Title className="text-sm font-bold" />
+          <Toast.Description className="text-sm" />
+        </div>
+        <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800">
+          Dismiss
         </Toast.Close>
       </Toast.Content>
     </Toast.Root>
   ));
 }
-
-function XIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
index c9414471752..55e0890a460 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
@@ -1,42 +1,7 @@
-.Button {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
-  margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  font-family: inherit;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
-  user-select: none;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
-
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-}
-
 .Viewport {
   position: fixed;
   z-index: 1;
-  width: 250px;
+  width: calc(100vw - 2rem);
   margin: 0 auto;
   bottom: 1rem;
   right: 1rem;
@@ -46,7 +11,7 @@
   @media (min-width: 500px) {
     bottom: 2rem;
     right: 2rem;
-    width: 300px;
+    width: 22.5rem;
   }
 }
 
@@ -64,19 +29,16 @@
   right: 0;
   margin: 0 auto;
   box-sizing: border-box;
-  background: var(--color-gray-50);
-  color: var(--color-gray-900);
-  border: 1px solid var(--color-gray-200);
-  padding: 1rem;
   width: 100%;
-  box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
-  background-clip: padding-box;
-  border-radius: 0.5rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  padding: 0.75rem;
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: bottom center;
   bottom: 0;
   left: auto;
   margin-right: 0;
-  -webkit-user-select: none;
   user-select: none;
   transition:
     transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
@@ -94,6 +56,10 @@
     )
     scale(var(--scale));
 
+  @media (prefers-color-scheme: dark) {
+    filter: none;
+  }
+
   &[data-expanded] {
     transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
     height: var(--toast-height);
@@ -134,20 +100,21 @@
     height: calc(var(--gap) + 1px);
   }
 
-  &[data-type='success'] {
-    background-color: lightgreen;
-    color: black;
+  &[data-type='success'] .Text {
+    color: light-dark(var(--color-green-700), var(--color-green-400));
   }
 
-  &[data-type='error'] {
-    background-color: lightpink;
-    color: black;
+  &[data-type='error'] .Text {
+    color: light-dark(var(--color-red-700), var(--color-red-400));
   }
 }
 
 .Content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
   overflow: hidden;
-  transition: opacity 0.25s;
+  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
   &[data-behind] {
     opacity: 0;
@@ -158,39 +125,86 @@
   }
 }
 
+.Text {
+  min-width: 0;
+  flex: 1;
+}
+
 .Title {
   font-weight: 700;
-  font-size: 0.975rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Description {
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  padding: 0;
-  border: none;
-  background: transparent;
-  width: 1.25rem;
-  height: 1.25rem;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    }
+  }
+
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
 
-  &:hover {
-    background-color: var(--color-gray-100);
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
-.Icon {
-  width: 1rem;
-  height: 1rem;
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  padding: 0 0.75rem;
+  margin: 0;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
+  user-select: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    }
+  }
+
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.tsx
index d37793b65f3..1473485f336 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.tsx
@@ -52,31 +52,12 @@ function ToastList() {
   return toasts.map((toast) => (
     <Toast.Root key={toast.id} toast={toast} className={styles.Toast}>
       <Toast.Content className={styles.Content}>
-        <Toast.Title className={styles.Title} />
-        <Toast.Description className={styles.Description} />
-        <Toast.Close className={styles.Close} aria-label="Close">
-          <XIcon className={styles.Icon} />
-        </Toast.Close>
+        <div className={styles.Text}>
+          <Toast.Title className={styles.Title} />
+          <Toast.Description className={styles.Description} />
+        </div>
+        <Toast.Close className={styles.Close}>Dismiss</Toast.Close>
       </Toast.Content>
     </Toast.Root>
   ));
 }
-
-function XIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
index 05fbb3a421b..1934a990f76 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
@@ -1,42 +1,7 @@
-.Button {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
-  margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  font-family: inherit;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
-  user-select: none;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
-
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-}
-
 .Viewport {
   position: fixed;
   z-index: 1;
-  width: 275px;
+  width: calc(100vw - 2rem);
   margin: 0 auto;
   bottom: 1rem;
   right: 1rem;
@@ -46,7 +11,7 @@
   @media (min-width: 500px) {
     bottom: 2rem;
     right: 2rem;
-    width: 300px;
+    width: 22.5rem;
   }
 }
 
@@ -64,19 +29,16 @@
   right: 0;
   margin: 0 auto;
   box-sizing: border-box;
-  background: var(--color-gray-50);
-  color: var(--color-gray-900);
-  border: 1px solid var(--color-gray-200);
-  padding: 1rem;
   width: 100%;
-  box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
-  background-clip: padding-box;
-  border-radius: 0.5rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  padding: 0.75rem;
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: bottom center;
   bottom: 0;
   left: auto;
   margin-right: 0;
-  -webkit-user-select: none;
   user-select: none;
   transition:
     transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
@@ -94,6 +56,10 @@
     )
     scale(var(--scale));
 
+  @media (prefers-color-scheme: dark) {
+    filter: none;
+  }
+
   &[data-expanded] {
     transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
     height: var(--toast-height);
@@ -136,8 +102,11 @@
 }
 
 .Content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
   overflow: hidden;
-  transition: opacity 0.25s;
+  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
   &[data-behind] {
     opacity: 0;
@@ -148,15 +117,24 @@
   }
 }
 
+.Text {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  align-items: start;
+  gap: 0.5rem;
+}
+
 .Title {
   font-weight: 700;
-  font-size: 0.975rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Description {
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
@@ -167,41 +145,61 @@
   justify-content: center;
   height: 2rem;
   padding: 0 0.75rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  border-radius: 0.25rem;
-  margin-top: 0.5rem;
-  background-color: var(--color-gray-900);
-  color: var(--color-gray-50);
-  border: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    }
+  }
+
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
-.Close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  padding: 0;
-  border: none;
-  background: transparent;
-  width: 1.25rem;
-  height: 1.25rem;
+.Button {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  margin: 0;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
+  user-select: none;
 
-  &:hover {
-    background-color: var(--color-gray-100);
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    }
   }
-}
 
-.Icon {
-  width: 1rem;
-  height: 1rem;
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.tsx
index 4559f8c578b..6821a80559d 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.tsx
@@ -48,32 +48,14 @@ function ToastList() {
   return toasts.map((toast) => (
     <Toast.Root key={toast.id} toast={toast} className={styles.Toast}>
       <Toast.Content className={styles.Content}>
-        <Toast.Title className={styles.Title} />
-        <Toast.Description className={styles.Description} />
-        <Toast.Action className={styles.UndoButton} />
-        <Toast.Close className={styles.Close} aria-label="Close">
-          <XIcon className={styles.Icon} />
-        </Toast.Close>
+        <div className={styles.Text}>
+          <div>
+            <Toast.Title className={styles.Title} />
+            <Toast.Description className={styles.Description} />
+          </div>
+          <Toast.Action className={styles.UndoButton} />
+        </div>
       </Toast.Content>
     </Toast.Root>
   ));
 }
-
-function XIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
index 81f39a5c7be..435079f9689 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
@@ -1,42 +1,7 @@
-.Button {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
-  margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
-  font-family: inherit;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
-  user-select: none;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
-
-  &:active {
-    background-color: var(--color-gray-100);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-}
-
 .Viewport {
   position: fixed;
   z-index: 1;
-  width: 250px;
+  width: calc(100vw - 2rem);
   margin: 0 auto;
   bottom: 1rem;
   right: 1rem;
@@ -46,7 +11,7 @@
   @media (min-width: 500px) {
     bottom: 2rem;
     right: 2rem;
-    width: 300px;
+    width: 22.5rem;
   }
 }
 
@@ -64,18 +29,16 @@
   right: 0;
   margin: 0 auto;
   box-sizing: border-box;
-  background: var(--color-gray-50);
-  color: var(--color-gray-900);
-  border: 1px solid var(--color-gray-200);
-  padding: 1rem;
   width: 100%;
-  box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
-  background-clip: padding-box;
-  border-radius: 0.5rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  padding: 0.75rem;
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  transform-origin: bottom center;
   bottom: 0;
   left: auto;
   margin-right: 0;
-  -webkit-user-select: none;
   user-select: none;
   transition:
     transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
@@ -84,7 +47,6 @@
   cursor: default;
   z-index: calc(1000 - var(--toast-index));
   height: var(--height);
-  transform-origin: bottom center;
   transform: translateX(var(--toast-swipe-movement-x))
     translateY(
       calc(
@@ -94,6 +56,10 @@
     )
     scale(var(--scale));
 
+  @media (prefers-color-scheme: dark) {
+    filter: none;
+  }
+
   &[data-expanded] {
     transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
     height: var(--toast-height);
@@ -136,8 +102,11 @@
 }
 
 .Content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
   overflow: hidden;
-  transition: opacity 0.25s;
+  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
   &[data-behind] {
     opacity: 0;
@@ -148,39 +117,86 @@
   }
 }
 
+.Text {
+  min-width: 0;
+  flex: 1;
+}
+
 .Title {
   font-weight: 700;
-  font-size: 0.975rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Description {
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1.25rem;
   margin: 0;
 }
 
 .Close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  padding: 0;
-  border: none;
-  background: transparent;
-  width: 1.25rem;
-  height: 1.25rem;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    }
+  }
+
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
 
-  &:hover {
-    background-color: var(--color-gray-100);
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
-.Icon {
-  width: 1rem;
-  height: 1rem;
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  padding: 0 0.75rem;
+  margin: 0;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-gray-950));
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
+  user-select: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    }
+  }
+
+  &:active {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.tsx
index a01ba8d17e8..c584a09fa90 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.tsx
@@ -41,35 +41,16 @@ function ToastList() {
   return toasts.map((toast) => (
     <Toast.Root key={toast.id} toast={toast} className={styles.Toast}>
       <Toast.Content className={styles.Content}>
-        <Toast.Title className={styles.Title} />
-        <Toast.Description className={styles.Description} />
-        <Toast.Close className={styles.Close} aria-label="Close">
-          <XIcon className={styles.Icon} />
-        </Toast.Close>
+        <div className={styles.Text}>
+          <Toast.Title className={styles.Title} />
+          <Toast.Description className={styles.Description} />
+        </div>
+        <Toast.Close className={styles.Close}>Dismiss</Toast.Close>
       </Toast.Content>
     </Toast.Root>
   ));
 }
 
-function XIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  );
-}
-
 const TEXTS = [
   'Short message.',
   'A bit longer message that spans two lines.',
diff --git a/docs/src/css/index.css b/docs/src/css/index.css
index fe4ac1ab884..fbb59d3fb08 100644
--- a/docs/src/css/index.css
+++ b/docs/src/css/index.css
@@ -82,6 +82,9 @@
   --color-red-400: oklch(70.4% 0.191 22.216deg);
   --color-red-700: oklch(50.5% 0.213 27.518deg);
 
+  --color-green-400: oklch(79.2% 0.209 151.711deg);
+  --color-green-700: oklch(52.7% 0.154 150.069deg);
+
   /* Typography */
   --font-mono: 'Paper Mono', monospace;
   --font-sans: 'die grotesk a', system-ui, sans-serif;

From ae7800be761e05e372e588f1e4b0cc4d014e9eb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 28 Apr 2026 17:15:55 +0200
Subject: [PATCH 087/257] Menubar brutalist

---
 .../demos/hero/css-modules/index.module.css   | 92 ++++++++++---------
 .../menubar/demos/hero/css-modules/index.tsx  | 12 ++-
 .../menubar/demos/hero/tailwind/index.tsx     | 70 +++++++-------
 3 files changed, 94 insertions(+), 80 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
index e570013c1fd..a62ba2fd3cc 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
@@ -1,34 +1,39 @@
 .Menubar {
+  box-sizing: border-box;
   display: flex;
-  background-color: var(--color-gray-50);
-  border: 1px solid var(--color-gray-200);
-  border-radius: 0.375rem;
-  padding: 0.125rem;
+  align-items: center;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  padding: 1px;
 }
 
 .MenuTrigger {
   box-sizing: border-box;
-  background: none;
+  height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
   border: 0;
-  color: var(--color-gray-600);
-  border-radius: 0.25rem;
-  user-select: none;
-  height: 2rem;
+  background-color: transparent;
+  color: light-dark(var(--color-gray-950), white);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
+  line-height: 1.25rem;
+  user-select: none;
 
   &[data-pressed],
-  &:focus-visible {
-    background-color: var(--color-gray-100);
-    outline: none;
+  &[data-popup-open] {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &[data-disabled] {
-    opacity: 0.5;
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
+
+  &:focus-visible {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -38,31 +43,29 @@
 
 .MenuPopup {
   box-sizing: border-box;
+  outline: 0;
   padding-block: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
+  transition:
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
 
+  &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transition: opacity 150ms;
+    transform: scale(0.98);
   }
 
   &[data-instant] {
     transition: none;
   }
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+    filter: none;
   }
 }
 
@@ -70,7 +73,9 @@
   outline: 0;
   cursor: default;
   user-select: none;
-  padding: 0.5rem 1rem;
+  padding-block: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
   display: flex;
   font-size: 0.875rem;
   line-height: 1rem;
@@ -84,35 +89,36 @@
     position: relative;
   }
 
-  &[data-popup-open]::before {
-    content: '';
-    z-index: -1;
-    position: absolute;
-    inset-block: 0;
-    inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-100);
-  }
-
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: light-dark(white, var(--color-gray-950));
   }
 
+  &[data-popup-open]::before,
   &[data-highlighted]::before {
     content: '';
     z-index: -1;
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+  }
+
+  &[data-popup-open]::before {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
+  &[data-highlighted]::before {
+    background-color: light-dark(var(--color-gray-950), white);
+  }
+
+  &[data-highlighted][data-popup-open]::before {
+    background-color: light-dark(var(--color-gray-950), white);
   }
 }
 
 .MenuSeparator {
-  margin: 0.375rem 1rem;
+  margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: light-dark(var(--color-gray-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
index b23b086832f..d90f69f4de1 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
@@ -28,7 +28,11 @@ export default function ExampleMenubar() {
                   <ChevronRightIcon />
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
-                  <Menu.Positioner alignOffset={-4}>
+                  <Menu.Positioner
+                    className={styles.MenuPositioner}
+                    sideOffset={-4}
+                    alignOffset={-4}
+                  >
                     <Menu.Popup className={styles.MenuPopup}>
                       <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                         PDF
@@ -90,7 +94,11 @@ export default function ExampleMenubar() {
                   <ChevronRightIcon />
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
-                  <Menu.Positioner alignOffset={-4}>
+                  <Menu.Positioner
+                    className={styles.MenuPositioner}
+                    sideOffset={-4}
+                    alignOffset={-4}
+                  >
                     <Menu.Popup className={styles.MenuPopup}>
                       <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                         Single Page
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
index f8f460d015e..b0e30384688 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
@@ -5,56 +5,56 @@ import { Menu } from '@base-ui/react/menu';
 
 export default function ExampleMenubar() {
   return (
-    <Menubar className="flex rounded-md border border-gray-200 bg-gray-50 p-0.5">
+    <Menubar className="flex items-center border border-gray-950 bg-white p-px dark:border-white dark:bg-gray-950">
       <Menu.Root>
-        <Menu.Trigger className="h-8 rounded-sm px-3 text-sm font-normal text-gray-600 outline-hidden select-none focus-visible:bg-gray-100 data-[disabled]:opacity-50 data-[popup-open]:bg-gray-100">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none focus-visible:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-popup-open:bg-gray-100 data-pressed:bg-gray-100 data-disabled:text-gray-500 dark:text-white dark:focus-visible:bg-gray-800 dark:data-popup-open:bg-gray-800 dark:data-pressed:bg-gray-800 dark:data-disabled:text-gray-400">
           File
         </Menu.Trigger>
         <Menu.Portal>
-          <Menu.Positioner className="outline-hidden" sideOffset={6}>
-            <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 data-[ending-style]:opacity-0 data-[ending-style]:transition-opacity data-[instant]:transition-none dark:shadow-none dark:outline-1 dark:-outline-offset-1 dark:outline-gray-300">
+          <Menu.Positioner className="outline-none" sideOffset={6} alignOffset={-2}>
+            <Menu.Popup className="origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden 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="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
               >
                 New
               </Menu.Item>
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden 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="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
               >
                 Open
               </Menu.Item>
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden 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="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
               >
                 Save
               </Menu.Item>
 
               <Menu.SubmenuRoot>
-                <Menu.SubmenuTrigger className="flex w-full cursor-default items-center justify-between gap-4 px-4 py-2 text-sm leading-4 outline-hidden 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-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
+                <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white">
                   Export
                   <ChevronRightIcon />
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
-                  <Menu.Positioner>
-                    <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 data-[ending-style]:opacity-0 data-[ending-style]:transition-opacity data-[instant]:transition-none dark:shadow-none dark:outline-1 dark:-outline-offset-1 dark:outline-gray-300">
+                  <Menu.Positioner className="outline-none" sideOffset={-4} alignOffset={-4}>
+                    <Menu.Popup className="origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden 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="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
                       >
                         PDF
                       </Menu.Item>
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden 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="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
                       >
                         PNG
                       </Menu.Item>
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden 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="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
                       >
                         SVG
                       </Menu.Item>
@@ -63,10 +63,10 @@ export default function ExampleMenubar() {
                 </Menu.Portal>
               </Menu.SubmenuRoot>
 
-              <Menu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
+              <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden 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="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
               >
                 Print
               </Menu.Item>
@@ -76,27 +76,27 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root>
-        <Menu.Trigger className="h-8 rounded-sm px-3 text-sm font-normal text-gray-600 outline-hidden select-none focus-visible:bg-gray-100 data-[disabled]:opacity-50 data-[popup-open]:bg-gray-100">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none focus-visible:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-popup-open:bg-gray-100 data-pressed:bg-gray-100 data-disabled:text-gray-500 dark:text-white dark:focus-visible:bg-gray-800 dark:data-popup-open:bg-gray-800 dark:data-pressed:bg-gray-800 dark:data-disabled:text-gray-400">
           Edit
         </Menu.Trigger>
         <Menu.Portal>
-          <Menu.Positioner className="outline-hidden" sideOffset={6}>
-            <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 data-[ending-style]:opacity-0 data-[ending-style]:transition-opacity data-[instant]:transition-none dark:shadow-none dark:outline-1 dark:-outline-offset-1 dark:outline-gray-300">
+          <Menu.Positioner className="outline-none" sideOffset={6}>
+            <Menu.Popup className="origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden 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="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
               >
                 Cut
               </Menu.Item>
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden 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="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
               >
                 Copy
               </Menu.Item>
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden 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="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
               >
                 Paste
               </Menu.Item>
@@ -106,48 +106,48 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root>
-        <Menu.Trigger className="h-8 rounded-sm px-3 text-sm font-normal text-gray-600 outline-hidden select-none focus-visible:bg-gray-100 data-[disabled]:opacity-50 data-[popup-open]:bg-gray-100">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none focus-visible:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-popup-open:bg-gray-100 data-pressed:bg-gray-100 data-disabled:text-gray-500 dark:text-white dark:focus-visible:bg-gray-800 dark:data-popup-open:bg-gray-800 dark:data-pressed:bg-gray-800 dark:data-disabled:text-gray-400">
           View
         </Menu.Trigger>
         <Menu.Portal>
-          <Menu.Positioner className="outline-hidden" sideOffset={6}>
-            <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 data-[ending-style]:opacity-0 data-[ending-style]:transition-opacity data-[instant]:transition-none dark:shadow-none dark:outline-1 dark:-outline-offset-1 dark:outline-gray-300">
+          <Menu.Positioner className="outline-none" sideOffset={6}>
+            <Menu.Popup className="origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden 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="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
               >
                 Zoom In
               </Menu.Item>
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden 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="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
               >
                 Zoom Out
               </Menu.Item>
 
               <Menu.SubmenuRoot>
-                <Menu.SubmenuTrigger className="flex w-full cursor-default items-center justify-between gap-4 px-4 py-2 text-sm leading-4 outline-hidden 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-xs data-[popup-open]:before:bg-gray-100 data-[highlighted]:data-[popup-open]:before:bg-gray-900">
+                <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white">
                   Layout
                   <ChevronRightIcon />
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
-                  <Menu.Positioner>
-                    <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 data-[ending-style]:opacity-0 data-[ending-style]:transition-opacity data-[instant]:transition-none dark:shadow-none dark:outline-1 dark:-outline-offset-1 dark:outline-gray-300">
+                  <Menu.Positioner className="outline-none" sideOffset={-4} alignOffset={-4}>
+                    <Menu.Popup className="origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden 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="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
                       >
                         Single Page
                       </Menu.Item>
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden 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="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
                       >
                         Two Pages
                       </Menu.Item>
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden 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="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
                       >
                         Continuous
                       </Menu.Item>
@@ -156,10 +156,10 @@ export default function ExampleMenubar() {
                 </Menu.Portal>
               </Menu.SubmenuRoot>
 
-              <Menu.Separator className="mx-4 my-1.5 h-px bg-gray-200" />
+              <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 px-4 py-2 text-sm font-normal leading-4 outline-hidden 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="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
               >
                 Full Screen
               </Menu.Item>
@@ -169,7 +169,7 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root disabled>
-        <Menu.Trigger className="h-8 rounded-sm px-3 text-sm font-normal text-gray-600 outline-hidden select-none focus-visible:bg-gray-100 data-[disabled]:opacity-50 data-[popup-open]:bg-gray-100">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none focus-visible:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-popup-open:bg-gray-100 data-pressed:bg-gray-100 data-disabled:text-gray-500 dark:text-white dark:focus-visible:bg-gray-800 dark:data-popup-open:bg-gray-800 dark:data-pressed:bg-gray-800 dark:data-disabled:text-gray-400">
           Help
         </Menu.Trigger>
       </Menu.Root>

From e12ae4e9459f370f06f9c5fc4afa2d48aad5aae8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 29 Apr 2026 12:35:12 +0200
Subject: [PATCH 088/257] NavigationMenu brutalist

---
 .../demos/hero/css-modules/index.module.css   | 150 +++++------
 .../demos/hero/css-modules/index.tsx          |  25 +-
 .../demos/hero/tailwind/index.tsx             |  67 ++---
 .../css-modules/index.module.css              | 249 ++++++++----------
 .../demos/nested-inline/css-modules/index.tsx |  35 +--
 .../demos/nested-inline/tailwind/index.tsx    | 116 ++++----
 .../demos/nested/css-modules/index.module.css | 141 +++++-----
 .../demos/nested/css-modules/index.tsx        |  27 +-
 .../demos/nested/tailwind/index.tsx           |  83 ++----
 .../demos/hero/css-modules/index.tsx          |   2 +-
 10 files changed, 355 insertions(+), 540 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
index 600f884edae..ecd1a5f9b20 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
@@ -1,14 +1,16 @@
 .Root {
-  background-color: var(--color-gray-50);
-  border-radius: 0.5rem;
-  padding: 0.25rem;
-  color: var(--color-gray-900);
+  box-sizing: border-box;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  padding: 1px;
+  color: light-dark(var(--color-gray-950), white);
   min-width: max-content;
 }
 
 .List {
   display: flex;
   position: relative;
+  gap: 1px;
   list-style: none;
   padding: 0;
   margin: 0;
@@ -20,45 +22,42 @@
   align-items: center;
   justify-content: center;
   gap: 0.375rem;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: none;
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 0;
+  background-color: transparent;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
   text-decoration: none;
 
   @media (max-width: 500px) {
-    font-size: 0.925rem;
     padding: 0 0.5rem;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
-    position: relative;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
 .Icon {
-  transition: transform 0.2s ease;
+  transition: transform 150ms ease;
 
   &[data-popup-open] {
     transform: rotate(180deg);
@@ -66,8 +65,8 @@
 }
 
 .Positioner {
-  --easing: cubic-bezier(0.22, 1, 0.36, 1);
-  --duration: 0.35s;
+  --easing: ease-out;
+  --duration: 160ms;
   box-sizing: border-box;
   transition-property: top, left, right, bottom;
   transition-duration: var(--duration);
@@ -116,10 +115,13 @@
 
 .Popup {
   position: relative;
+  overflow: visible;
   box-sizing: border-box;
-  border-radius: 0.5rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  outline: 0;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition-property: opacity, transform, width, height;
   transition-duration: var(--duration);
@@ -130,28 +132,15 @@
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.98);
   }
 
   &[data-ending-style] {
     transition-timing-function: ease;
     transition-duration: 0.15s;
   }
-}
-
-@media (prefers-color-scheme: light) {
-  .Popup {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .Popup {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+  @media (prefers-color-scheme: dark) {
+    filter: none;
   }
 }
 
@@ -160,13 +149,12 @@
   transition:
     opacity calc(var(--duration) * 0.5) ease,
     transform var(--duration) var(--easing);
-  padding: 1.5rem;
-  width: calc(100vw - 40px);
+  padding: 0.5rem;
   height: 100%;
 
   @media (min-width: 500px) {
     width: max-content;
-    min-width: 400px;
+    max-width: 400px;
   }
 
   &[data-starting-style],
@@ -201,8 +189,9 @@
 }
 
 .GridLinkList {
+  box-sizing: border-box;
   display: grid;
-  grid-template-columns: 12rem 12rem;
+  grid-template-columns: 1fr 1fr;
   list-style: none;
   padding: 0;
   margin: 0;
@@ -213,6 +202,7 @@
 }
 
 .FlexLinkList {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -224,82 +214,88 @@
 
 .LinkCard {
   box-sizing: border-box;
+  position: relative;
   display: block;
+  width: 100%;
+  height: 100%;
   padding: 0.5rem;
-  border-radius: 0.375rem;
   text-decoration: none;
   color: inherit;
-  border: none;
+  text-align: left;
+  border: 0;
   background-color: transparent;
 
+  &[data-popup-open] {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
   &:focus-visible {
-    position: relative;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-
-  @media (min-width: 425px) {
-    padding: 0.75rem;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
 .LinkTitle {
   margin: 0 0 4px;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1rem;
 }
 
 .LinkDescription {
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-500);
+  color: light-dark(var(--color-gray-500), var(--color-gray-400));
 }
 
 .Arrow {
-  display: flex;
-  transition: left calc(var(--duration)) var(--easing);
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
+  transition:
+    left var(--duration) var(--easing),
+    right var(--duration) var(--easing);
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
 
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
-
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    border: 1px solid light-dark(var(--color-gray-950), white);
+    background-color: light-dark(white, var(--color-gray-950));
+    transform: translate(-50%, 50%) rotate(45deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx
index 2079df2aba3..ef208dd2cc4 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx
@@ -27,7 +27,7 @@ export default function ExampleNavigationMenu() {
           </NavigationMenu.Content>
         </NavigationMenu.Item>
 
-        <NavigationMenu.Item>
+        <NavigationMenu.Item value="b">
           <NavigationMenu.Trigger className={styles.Trigger}>
             Handbook
             <NavigationMenu.Icon className={styles.Icon}>
@@ -63,9 +63,7 @@ export default function ExampleNavigationMenu() {
           collisionAvoidance={{ side: 'none' }}
         >
           <NavigationMenu.Popup className={styles.Popup}>
-            <NavigationMenu.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </NavigationMenu.Arrow>
+            <NavigationMenu.Arrow className={styles.Arrow} />
             <NavigationMenu.Viewport className={styles.Viewport} />
           </NavigationMenu.Popup>
         </NavigationMenu.Positioner>
@@ -96,25 +94,6 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
 const overviewLinks = [
   {
     href: '/react/overview/quick-start',
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
index 7cebd81b050..20d6fb7165e 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
@@ -3,23 +3,25 @@ import { NavigationMenu } from '@base-ui/react/navigation-menu';
 
 export default function ExampleNavigationMenu() {
   return (
-    <NavigationMenu.Root className="min-w-max rounded-lg bg-gray-50 p-1 text-gray-900">
-      <NavigationMenu.List className="relative flex">
+    <NavigationMenu.Root className="min-w-max border border-gray-950 bg-white p-px text-gray-950 dark:border-white dark:bg-gray-950 dark:text-white">
+      <NavigationMenu.List className="relative flex gap-px">
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
             Overview
-            <NavigationMenu.Icon className="transition-transform duration-200 ease-in-out data-[popup-open]:rotate-180">
+            <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-[popup-open]:rotate-180">
               <ChevronDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
           <NavigationMenu.Content className={contentClassName}>
-            <ul className="grid list-none grid-cols-1 gap-0 [@media(min-width:32rem)]:grid-cols-[12rem_12rem]">
+            <ul className="box-border m-0 grid list-none grid-cols-2 p-0 max-[500px]:grid-cols-1">
               {overviewLinks.map((item) => (
                 <li key={item.href}>
                   <Link href={item.href} className={linkCardClassName}>
-                    <h3 className="m-0 mb-1 text-base leading-5 font-normal">{item.title}</h3>
-                    <p className="m-0 text-sm leading-5 text-gray-500">{item.description}</p>
+                    <h3 className="m-0 mb-1 text-sm leading-4 font-normal">{item.title}</h3>
+                    <p className="m-0 text-sm leading-5 text-gray-500 dark:text-gray-400">
+                      {item.description}
+                    </p>
                   </Link>
                 </li>
               ))}
@@ -30,18 +32,20 @@ export default function ExampleNavigationMenu() {
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
             Handbook
-            <NavigationMenu.Icon className="transition-transform duration-200 ease-in-out data-[popup-open]:rotate-180">
+            <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-[popup-open]:rotate-180">
               <ChevronDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
           <NavigationMenu.Content className={contentClassName}>
-            <ul className="flex max-w-[400px] flex-col justify-center">
+            <ul className="m-0 box-border flex max-w-[400px] list-none flex-col justify-center p-0">
               {handbookLinks.map((item) => (
                 <li key={item.href}>
                   <Link href={item.href} className={linkCardClassName}>
-                    <h3 className="m-0 mb-1 text-base leading-5 font-normal">{item.title}</h3>
-                    <p className="m-0 text-sm leading-5 text-gray-500">{item.description}</p>
+                    <h3 className="m-0 mb-1 text-sm leading-4 font-normal">{item.title}</h3>
+                    <p className="m-0 text-sm leading-5 text-gray-500 dark:text-gray-400">
+                      {item.description}
+                    </p>
                   </Link>
                 </li>
               ))}
@@ -61,16 +65,14 @@ export default function ExampleNavigationMenu() {
           sideOffset={10}
           collisionPadding={{ top: 5, bottom: 5, left: 20, right: 20 }}
           collisionAvoidance={{ side: 'none' }}
-          className="box-border h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-[instant]:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
+          className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-[instant]:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
           style={{
-            ['--duration' as string]: '0.35s',
-            ['--easing' as string]: 'cubic-bezier(0.22, 1, 0.36, 1)',
+            ['--duration' as string]: '160ms',
+            ['--easing' as string]: 'ease-out',
           }}
         >
-          <NavigationMenu.Popup className="data-[ending-style]:easing-[ease] relative h-[var(--popup-height)] origin-[var(--transform-origin)] rounded-lg bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[opacity,transform,width,height,scale,translate] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 w-[var(--popup-width)] dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-            <NavigationMenu.Arrow className="flex transition-[left] duration-[var(--duration)] ease-[var(--easing)] 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 />
-            </NavigationMenu.Arrow>
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-gray-950 bg-white text-gray-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
+            <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-gray-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-gray-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
         </NavigationMenu.Positioner>
@@ -101,34 +103,11 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
-
 const triggerClassName =
-  'box-border flex items-center justify-center gap-1.5 h-10 ' +
-  'px-2 [@media(min-width:32rem)]:px-3.5 m-0 rounded-md bg-gray-50 text-gray-900 font-normal ' +
-  'text-[0.925rem] [@media(min-width:32rem)]:text-base leading-6 select-none no-underline ' +
-  'hover:bg-gray-100 active:bg-gray-100 data-[popup-open]:bg-gray-100 ' +
-  'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 focus-visible:relative';
+  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm leading-5 font-normal text-gray-950 no-underline select-none min-[501px]:px-3 hover:bg-gray-100 data-[popup-open]:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-gray-800 dark:data-[popup-open]:bg-gray-800';
 
 const contentClassName =
-  'w-[calc(100vw_-_40px)] h-full p-6 [@media(min-width:32rem)]:w-max [@media(min-width:32rem)]:min-w-[400px] ' +
+  'h-full p-2 min-[500px]:w-max min-[500px]:max-w-[400px] ' +
   'transition-[opacity,transform,translate] duration-[var(--duration)] ease-[var(--easing)] ' +
   'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 ' +
   'data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] ' +
@@ -137,9 +116,7 @@ const contentClassName =
   'data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%]';
 
 const linkCardClassName =
-  'block rounded-md p-2 [@media(min-width:32rem)]:p-3 no-underline text-inherit ' +
-  'hover:bg-gray-100 focus-visible:relative focus-visible:outline-2 ' +
-  'focus-visible:-outline-offset-1 focus-visible:outline-blue-800';
+  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-gray-100 data-[popup-open]:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-gray-800 dark:data-[popup-open]:bg-gray-800';
 
 const overviewLinks = [
   {
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
index 378da53f2ff..636e0303608 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
@@ -1,14 +1,16 @@
 .Root {
-  background-color: var(--color-gray-50);
-  border-radius: 0.5rem;
-  padding: 0.25rem;
-  color: var(--color-gray-900);
+  box-sizing: border-box;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  padding: 1px;
+  color: light-dark(var(--color-gray-950), white);
   min-width: max-content;
 }
 
 .List {
   display: flex;
   position: relative;
+  gap: 1px;
   list-style: none;
   padding: 0;
   margin: 0;
@@ -20,45 +22,42 @@
   align-items: center;
   justify-content: center;
   gap: 0.375rem;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: none;
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 0;
+  background-color: transparent;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
   text-decoration: none;
 
-  @media (max-width: 640px) {
-    font-size: 0.925rem;
+  @media (max-width: 500px) {
     padding: 0 0.5rem;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
-    position: relative;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
 .Icon {
-  transition: transform 0.2s ease;
+  transition: transform 150ms ease;
 
   &[data-popup-open] {
     transform: rotate(180deg);
@@ -66,8 +65,8 @@
 }
 
 .Positioner {
-  --easing: cubic-bezier(0.22, 1, 0.36, 1);
-  --duration: 0.35s;
+  --easing: ease-out;
+  --duration: 160ms;
   box-sizing: border-box;
   transition-property: top, left, right, bottom;
   transition-duration: var(--duration);
@@ -118,9 +117,11 @@
   position: relative;
   overflow: visible;
   box-sizing: border-box;
-  border-radius: 0.5rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  outline: 0;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition-property: opacity, transform, width, height;
   transition-duration: var(--duration);
@@ -131,29 +132,15 @@
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.98);
   }
 
   &[data-ending-style] {
-    transition-property: opacity, transform;
     transition-timing-function: ease;
     transition-duration: 0.15s;
   }
-}
-
-@media (prefers-color-scheme: light) {
-  .Popup {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .Popup {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+  @media (prefers-color-scheme: dark) {
+    filter: none;
   }
 }
 
@@ -162,7 +149,7 @@
   transition:
     opacity calc(var(--duration) * 0.5) ease,
     transform var(--duration) cubic-bezier(0.4, 0, 0.2, 1);
-  padding: 1.25rem;
+  padding: 0.5rem;
   width: calc(100vw - 40px);
   height: 100%;
 
@@ -217,7 +204,7 @@
 }
 
 .SubmenuRoot {
-  color: var(--color-gray-900);
+  color: light-dark(var(--color-gray-950), white);
   overflow: hidden;
   overflow: clip;
 }
@@ -225,7 +212,6 @@
 .SubmenuLayout {
   display: grid;
   grid-template-columns: 1fr;
-  border-radius: 0.5rem;
   overflow: hidden;
   overflow: clip;
 }
@@ -237,41 +223,28 @@
 }
 
 .SubmenuList {
+  box-sizing: border-box;
   list-style: none;
   margin: 0;
-  padding: 1rem;
+  padding: 0.5rem;
   display: flex;
   flex-direction: row;
   gap: 0.25rem;
   overflow-x: auto;
-  background-color: var(--color-gray-100);
-}
-
-@media (prefers-color-scheme: dark) {
-  .SubmenuList {
-    background-color: rgb(0 0 0 / 20%);
-  }
 }
 
 @media (min-width: 700px) {
   .SubmenuList {
-    box-sizing: border-box;
     flex-direction: column;
     gap: 0;
     overflow-x: visible;
-    overflow-y: auto;
-    border-right: 1px solid var(--color-gray-200);
+    overflow-y: clip;
+    border-right: 1px solid light-dark(var(--color-gray-950), white);
     height: var(--popup-height);
     transition: height var(--duration) var(--easing);
   }
 }
 
-@media (min-width: 700px) and (prefers-color-scheme: dark) {
-  .SubmenuList {
-    border-right-color: var(--color-gray-300);
-  }
-}
-
 .SubmenuTrigger {
   box-sizing: border-box;
   display: flex;
@@ -281,9 +254,8 @@
   width: 100%;
   min-width: 10rem;
   margin: 0;
-  padding: 0.625rem 0.75rem;
+  padding: 0.5rem;
   border: 0;
-  border-radius: 0.5rem;
   background-color: transparent;
   color: inherit;
   font-family: inherit;
@@ -291,53 +263,38 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
   &[data-popup-open] {
-    background-color: canvas;
-    box-shadow:
-      0 1px 2px rgb(0 0 0 / 8%),
-      0 1px 1px rgb(0 0 0 / 4%);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .SubmenuTrigger[data-popup-open] {
-    background-color: var(--color-gray-100);
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
 .SubmenuLabel {
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.2;
-  color: var(--color-gray-900);
+  line-height: 1rem;
+  color: light-dark(var(--color-gray-950), white);
 }
 
 .SubmenuHint {
   font-size: 0.875rem;
-  line-height: 1.35;
-  color: var(--color-gray-500);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-500), var(--color-gray-400));
 }
 
 .SubmenuViewport {
   position: relative;
   overflow: hidden;
   min-height: 16.5rem;
-  border-top: 1px solid var(--color-gray-200);
-}
-
-@media (prefers-color-scheme: dark) {
-  .SubmenuViewport {
-    border-top-color: var(--color-gray-300);
-  }
+  border-top: 1px solid light-dark(var(--color-gray-950), white);
 }
 
 @media (min-width: 700px) {
@@ -347,8 +304,11 @@
 }
 
 .SubmenuContent {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   height: 100%;
-  padding: 1.75rem;
+  padding: 1rem;
   transform: translateX(0);
   transition:
     opacity var(--duration) var(--easing),
@@ -381,9 +341,7 @@
   }
 
   @media (min-width: 700px) {
-    padding: 2rem;
     transform: translateY(0);
-    filter: blur(0);
     transition-duration: calc(var(--duration) * 1.35);
     transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 
@@ -406,120 +364,127 @@
         transform: translateY(-72px);
       }
     }
-
-    &[data-starting-style],
-    &[data-ending-style] {
-      filter: blur(2px);
-    }
   }
 }
 
 .SubmenuTitle {
   margin: 0;
-  font-size: 1.125rem;
-  line-height: 1.3;
+  font-size: 1rem;
+  line-height: 1.25rem;
   font-weight: 400;
 }
 
 .SubmenuDescription {
-  margin: 0.625rem 0 0;
-  color: var(--color-gray-500);
-  font-size: 1rem;
-  line-height: 1.5;
+  margin: 0.25rem 0 0;
+  color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 
 .LinkList {
   list-style: none;
-  margin: 1rem -0.5rem 0;
+  margin: 0 -0.5rem;
   padding: 0;
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: 0;
 }
 
 .LinkCard {
   box-sizing: border-box;
+  position: relative;
   display: block;
-  padding: 0.75rem 0.5rem;
-  border-radius: 0.5rem;
+  width: 100%;
+  height: 100%;
+  padding: 0.5rem;
   text-decoration: none;
   color: inherit;
+  text-align: left;
+  border: 0;
   background-color: transparent;
 
+  &[data-popup-open] {
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
 .LinkTitle {
-  margin: 0;
-  font-size: 1rem;
+  margin: 0 0 4px;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25;
+  line-height: 1rem;
 }
 
 .LinkDescription {
-  margin: 0.35rem 0 0;
-  color: var(--color-gray-500);
-  font-size: 0.95rem;
-  line-height: 1.45;
+  margin: 0;
+  color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 
 .GuidesPanel {
-  padding: 1.75rem;
-
-  @media (min-width: 700px) {
-    padding: 2rem;
-  }
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
 }
 
 .Arrow {
-  display: flex;
-  transition: left calc(var(--duration)) var(--easing);
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
+  transition:
+    left var(--duration) var(--easing),
+    right var(--duration) var(--easing);
 
   @media (max-width: 699px) {
     display: none;
   }
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
-
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
 
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    border: 1px solid light-dark(var(--color-gray-950), white);
+    background-color: light-dark(white, var(--color-gray-950));
+    transform: translate(-50%, 50%) rotate(45deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx
index 6ce2c91f22e..9d140cc67d2 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx
@@ -33,8 +33,10 @@ export default function ExampleNavigationMenu() {
                         <span className={styles.SubmenuHint}>{menu.hint}</span>
                       </NavigationMenu.Trigger>
                       <NavigationMenu.Content className={styles.SubmenuContent}>
-                        <h4 className={styles.SubmenuTitle}>{menu.title}</h4>
-                        <p className={styles.SubmenuDescription}>{menu.description}</p>
+                        <div>
+                          <h4 className={styles.SubmenuTitle}>{menu.title}</h4>
+                          <p className={styles.SubmenuDescription}>{menu.description}</p>
+                        </div>
                         <ul className={styles.LinkList}>
                           {menu.links.map((link) => (
                             <li key={link.href}>
@@ -65,8 +67,10 @@ export default function ExampleNavigationMenu() {
           </NavigationMenu.Trigger>
           <NavigationMenu.Content className={`${styles.Content} ${styles.GuidesContent}`}>
             <div className={styles.GuidesPanel}>
-              <h4 className={styles.SubmenuTitle}>{guidesPanel.title}</h4>
-              <p className={styles.SubmenuDescription}>{guidesPanel.description}</p>
+              <div>
+                <h4 className={styles.SubmenuTitle}>{guidesPanel.title}</h4>
+                <p className={styles.SubmenuDescription}>{guidesPanel.description}</p>
+              </div>
               <ul className={styles.LinkList}>
                 {guideLinks.map((link) => (
                   <li key={link.href}>
@@ -102,9 +106,7 @@ export default function ExampleNavigationMenu() {
           collisionAvoidance={{ side: 'none' }}
         >
           <NavigationMenu.Popup className={styles.Popup}>
-            <NavigationMenu.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </NavigationMenu.Arrow>
+            <NavigationMenu.Arrow className={styles.Arrow} />
             <NavigationMenu.Viewport className={styles.Viewport} />
           </NavigationMenu.Popup>
         </NavigationMenu.Positioner>
@@ -134,22 +136,3 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
     </svg>
   );
 }
-
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
index 67e7640f891..b9698229670 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
@@ -8,47 +8,47 @@ export default function ExampleNavigationMenu() {
   const isDesktop = useMediaQuery('(min-width: 700px)', { defaultMatches: true });
 
   return (
-    <NavigationMenu.Root className="min-w-max rounded-lg bg-gray-50 p-1 text-gray-900">
-      <NavigationMenu.List className="relative flex">
+    <NavigationMenu.Root className="min-w-max border border-gray-950 bg-white p-px text-gray-950 dark:border-white dark:bg-gray-950 dark:text-white">
+      <NavigationMenu.List className="relative flex gap-px">
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
             Product
-            <NavigationMenu.Icon className="transition-transform duration-200 ease-in-out data-[popup-open]:rotate-180">
+            <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-[popup-open]:rotate-180">
               <ChevronDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
           <NavigationMenu.Content className={productContentClassName}>
             <NavigationMenu.Root
-              className="overflow-hidden text-gray-900"
+              className="overflow-hidden overflow-clip text-gray-950 dark:text-white"
               orientation={isDesktop ? 'vertical' : 'horizontal'}
               defaultValue="developers"
             >
-              <div className="grid grid-cols-1 overflow-clip rounded-lg min-[700px]:grid-cols-[13rem_minmax(0,1fr)]">
-                <NavigationMenu.List className="m-0 flex list-none flex-row gap-1 overflow-x-auto bg-gray-100 p-4 min-[700px]:box-border min-[700px]:h-[var(--popup-height)] min-[700px]:flex-col min-[700px]:gap-0 min-[700px]:overflow-x-visible min-[700px]:overflow-y-auto min-[700px]:border-r min-[700px]:border-r-gray-200 min-[700px]:transition-[height] min-[700px]:duration-[var(--duration)] min-[700px]:ease-[var(--easing)] dark:bg-black/20 dark:border-r-gray-300">
+              <div className="grid grid-cols-1 overflow-hidden overflow-clip min-[700px]:grid-cols-[13rem_minmax(0,1fr)]">
+                <NavigationMenu.List className="m-0 box-border flex list-none flex-row gap-1 overflow-x-auto p-2 min-[700px]:h-[var(--popup-height)] min-[700px]:flex-col min-[700px]:gap-0 min-[700px]:overflow-x-visible min-[700px]:overflow-y-clip min-[700px]:border-r min-[700px]:border-r-gray-950 min-[700px]:transition-[height] min-[700px]:duration-[var(--duration)] min-[700px]:ease-[var(--easing)] dark:min-[700px]:border-r-white">
                   {audienceMenus.map((menu) => (
                     <NavigationMenu.Item key={menu.value} value={menu.value}>
                       <NavigationMenu.Trigger className={submenuTriggerClassName}>
-                        <span className="text-base leading-[1.2] font-normal text-gray-900">
+                        <span className="text-sm leading-4 font-normal text-gray-950 dark:text-white">
                           {menu.label}
                         </span>
-                        <span className="text-sm leading-[1.35] text-gray-500">{menu.hint}</span>
+                        <span className="text-sm leading-5 text-gray-500 dark:text-gray-400">
+                          {menu.hint}
+                        </span>
                       </NavigationMenu.Trigger>
                       <NavigationMenu.Content className={submenuContentClassName}>
-                        <h4 className="m-0 text-[1.125rem] leading-[1.3] font-normal">
-                          {menu.title}
-                        </h4>
-                        <p className="m-0 mt-2.5 text-base leading-[1.5] text-gray-500">
-                          {menu.description}
-                        </p>
-                        <ul className="-mx-2 m-0 mt-4 grid list-none gap-0 p-0">
+                        <div>
+                          <h4 className="m-0 text-base leading-5 font-normal">{menu.title}</h4>
+                          <p className="m-0 mt-1 text-sm leading-5 text-gray-500 dark:text-gray-400">
+                            {menu.description}
+                          </p>
+                        </div>
+                        <ul className="-mx-2 m-0 flex list-none flex-col gap-0 p-0">
                           {menu.links.map((link) => (
                             <li key={link.href}>
                               <Link className={linkCardClassName} href={link.href}>
-                                <h5 className="m-0 text-base leading-[1.25] font-normal">
-                                  {link.title}
-                                </h5>
-                                <p className="m-0 mt-[0.35rem] text-[0.95rem] leading-[1.45] text-gray-500">
+                                <h5 className="m-0 text-sm leading-4 font-normal">{link.title}</h5>
+                                <p className="m-0 text-sm leading-5 text-gray-500 dark:text-gray-400">
                                   {link.description}
                                 </p>
                               </Link>
@@ -59,7 +59,7 @@ export default function ExampleNavigationMenu() {
                     </NavigationMenu.Item>
                   ))}
                 </NavigationMenu.List>
-                <NavigationMenu.Viewport className="relative min-h-[16.5rem] overflow-hidden border-t border-gray-200 min-[700px]:border-t-0 dark:border-gray-300" />
+                <NavigationMenu.Viewport className="relative min-h-[16.5rem] overflow-hidden border-t border-gray-950 min-[700px]:border-t-0 dark:border-white" />
               </div>
             </NavigationMenu.Root>
           </NavigationMenu.Content>
@@ -68,23 +68,25 @@ export default function ExampleNavigationMenu() {
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
             Learn
-            <NavigationMenu.Icon className="transition-transform duration-200 ease-in-out data-[popup-open]:rotate-180">
+            <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-[popup-open]:rotate-180">
               <ChevronDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
           <NavigationMenu.Content className={guidesContentClassName}>
-            <div className="p-7 text-gray-900 min-[700px]:p-8">
-              <h4 className="m-0 text-[1.125rem] leading-[1.3] font-normal">{guidesPanel.title}</h4>
-              <p className="m-0 mt-2.5 text-base leading-[1.5] text-gray-500">
-                {guidesPanel.description}
-              </p>
-              <ul className="-mx-2 m-0 mt-4 grid list-none gap-0 p-0">
+            <div className="flex flex-col gap-4 p-4 text-gray-950 dark:text-white">
+              <div>
+                <h4 className="m-0 text-base leading-5 font-normal">{guidesPanel.title}</h4>
+                <p className="m-0 mt-1 text-sm leading-5 text-gray-500 dark:text-gray-400">
+                  {guidesPanel.description}
+                </p>
+              </div>
+              <ul className="-mx-2 m-0 flex list-none flex-col gap-0 p-0">
                 {guideLinks.map((link) => (
                   <li key={link.href}>
                     <Link className={linkCardClassName} href={link.href}>
-                      <h5 className="m-0 text-base leading-[1.25] font-normal">{link.title}</h5>
-                      <p className="m-0 mt-[0.35rem] text-[0.95rem] leading-[1.45] text-gray-500">
+                      <h5 className="m-0 text-sm leading-4 font-normal">{link.title}</h5>
+                      <p className="m-0 text-sm leading-5 text-gray-500 dark:text-gray-400">
                         {link.description}
                       </p>
                     </Link>
@@ -113,16 +115,14 @@ export default function ExampleNavigationMenu() {
           sideOffset={10}
           collisionPadding={{ top: 5, bottom: 5, left: 20, right: 20 }}
           collisionAvoidance={{ side: 'none' }}
-          className="box-border h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-[instant]:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
+          className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-[instant]:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
           style={{
-            ['--duration' as string]: '0.35s',
-            ['--easing' as string]: 'cubic-bezier(0.22, 1, 0.36, 1)',
+            ['--duration' as string]: '160ms',
+            ['--easing' as string]: 'ease-out',
           }}
         >
-          <NavigationMenu.Popup className="data-[ending-style]:easing-[ease] relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] rounded-lg bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[opacity,scale,width,height] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:transition-[opacity,scale] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-            <NavigationMenu.Arrow className="flex transition-[left] duration-[var(--duration)] ease-[var(--easing)] 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 />
-            </NavigationMenu.Arrow>
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-gray-950 bg-white text-gray-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
+            <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-gray-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-gray-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
         </NavigationMenu.Positioner>
@@ -153,31 +153,8 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
-
 const triggerClassName =
-  'box-border flex items-center justify-center gap-1.5 h-10 ' +
-  'px-2 sm:px-3.5 m-0 rounded-md bg-gray-50 text-gray-900 font-normal' +
-  'text-[0.925rem] sm:text-base leading-6 select-none no-underline ' +
-  'hover:bg-gray-100 active:bg-gray-100 data-[popup-open]:bg-gray-100 ' +
-  'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 focus-visible:relative';
+  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm leading-5 font-normal text-gray-950 no-underline select-none min-[501px]:px-3 hover:bg-gray-100 data-[popup-open]:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-gray-800 dark:data-[popup-open]:bg-gray-800';
 
 const sharedContentClassName =
   'h-full w-[calc(100vw_-_40px)] ' +
@@ -189,24 +166,19 @@ const sharedContentClassName =
   'data-[ending-style]:data-[activation-direction=left]:translate-x-[2rem] ' +
   'data-[ending-style]:data-[activation-direction=right]:translate-x-[-2rem]';
 
-const productContentClassName = `${sharedContentClassName} min-[700px]:max-w-[675px] p-0`;
+const productContentClassName = `${sharedContentClassName} p-0 min-[700px]:[width:min(675px,calc(100vw-40px))]`;
 
-const guidesContentClassName = `${sharedContentClassName} min-[700px]:max-w-[500px] p-0`;
+const guidesContentClassName = `${sharedContentClassName} p-0 min-[700px]:[width:min(500px,calc(100vw-40px))]`;
 
 const submenuTriggerClassName =
-  'box-border m-0 flex w-full min-w-[10rem] flex-col items-start gap-0.5 rounded-lg ' +
-  'bg-transparent px-3 py-2.5 text-left text-inherit ' +
-  'hover:bg-gray-100 data-[popup-open]:bg-[canvas] dark:data-[popup-open]:bg-gray-100 data-[popup-open]:shadow-[0_1px_2px_rgb(0_0_0_/_0.08),0_1px_1px_rgb(0_0_0_/_0.04)] focus-visible:outline-2 ' +
-  'focus-visible:-outline-offset-1 focus-visible:outline-blue-800';
+  'm-0 flex w-full min-w-[10rem] flex-col items-start gap-1 border-0 bg-transparent p-2 text-left text-inherit hover:bg-gray-100 data-[popup-open]:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-gray-800 dark:data-[popup-open]:bg-gray-800';
 
 const submenuContentClassName =
-  'h-full translate-x-0 p-7 min-[700px]:p-8 min-[700px]:blur-0 transition-[opacity,translate,filter] duration-[var(--duration)] ease-[var(--easing)] min-[700px]:duration-[calc(var(--duration)*1.35)] min-[700px]:ease-[cubic-bezier(0.16,1,0.3,1)] ' +
+  'flex h-full translate-x-0 flex-col gap-4 p-4 transition-[opacity,translate,filter] duration-[var(--duration)] ease-[var(--easing)] min-[700px]:duration-[calc(var(--duration)*1.35)] min-[700px]:ease-[cubic-bezier(0.16,1,0.3,1)] ' +
   'data-[starting-style]:data-[activation-direction=left]:opacity-0 data-[starting-style]:data-[activation-direction=right]:opacity-0 data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=right]:translate-x-[50%] ' +
   'data-[ending-style]:opacity-0 data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%] ' +
-  'min-[700px]:data-[starting-style]:data-[activation-direction=up]:opacity-0 min-[700px]:data-[starting-style]:data-[activation-direction=down]:opacity-0 min-[700px]:data-[starting-style]:data-[activation-direction=up]:translate-y-[-72px] min-[700px]:data-[starting-style]:data-[activation-direction=down]:translate-y-[72px] min-[700px]:data-[starting-style]:blur-[2px] ' +
-  'min-[700px]:data-[ending-style]:data-[activation-direction=up]:translate-y-[72px] min-[700px]:data-[ending-style]:data-[activation-direction=down]:translate-y-[-72px] min-[700px]:data-[ending-style]:blur-[2px]';
+  'min-[700px]:data-[starting-style]:data-[activation-direction=up]:opacity-0 min-[700px]:data-[starting-style]:data-[activation-direction=down]:opacity-0 min-[700px]:data-[starting-style]:data-[activation-direction=up]:translate-y-[-72px] min-[700px]:data-[starting-style]:data-[activation-direction=down]:translate-y-[72px] ' +
+  'min-[700px]:data-[ending-style]:data-[activation-direction=up]:translate-y-[72px] min-[700px]:data-[ending-style]:data-[activation-direction=down]:translate-y-[-72px]';
 
 const linkCardClassName =
-  'box-border block rounded-lg bg-transparent px-2 py-3 no-underline text-inherit ' +
-  'hover:bg-gray-100 focus-visible:outline-2 ' +
-  'focus-visible:-outline-offset-1 focus-visible:outline-blue-800';
+  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-gray-100 data-[popup-open]:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-gray-800 dark:data-[popup-open]:bg-gray-800';
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
index 28e0cee61d0..498258dbda6 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
@@ -1,14 +1,16 @@
 .Root {
-  background-color: var(--color-gray-50);
-  border-radius: 0.5rem;
-  padding: 0.25rem;
-  color: var(--color-gray-900);
+  box-sizing: border-box;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  padding: 1px;
+  color: light-dark(var(--color-gray-950), white);
   min-width: max-content;
 }
 
 .List {
   display: flex;
   position: relative;
+  gap: 1px;
   list-style: none;
   padding: 0;
   margin: 0;
@@ -20,45 +22,42 @@
   align-items: center;
   justify-content: center;
   gap: 0.375rem;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: none;
-  border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  border: 0;
+  background-color: transparent;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-gray-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-gray-950), white);
   user-select: none;
   text-decoration: none;
 
-  @media (max-width: 640px) {
-    font-size: 0.925rem;
+  @media (max-width: 500px) {
     padding: 0 0.5rem;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   &:focus-visible {
-    position: relative;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
 .Icon {
-  transition: transform 0.2s ease;
+  transition: transform 150ms ease;
 
   &[data-popup-open] {
     transform: rotate(180deg);
@@ -66,8 +65,8 @@
 }
 
 .Positioner {
-  --easing: cubic-bezier(0.22, 1, 0.36, 1);
-  --duration: 0.35s;
+  --easing: ease-out;
+  --duration: 160ms;
   box-sizing: border-box;
   transition-property: top, left, right, bottom;
   transition-duration: var(--duration);
@@ -118,9 +117,11 @@
   position: relative;
   overflow: visible;
   box-sizing: border-box;
-  border-radius: 0.5rem;
-  background-color: canvas;
-  color: var(--color-gray-900);
+  outline: 0;
+  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-gray-950), white);
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition-property: opacity, transform, width, height;
   transition-duration: var(--duration);
@@ -131,28 +132,15 @@
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.98);
   }
 
   &[data-ending-style] {
     transition-timing-function: ease;
     transition-duration: 0.15s;
   }
-}
-
-@media (prefers-color-scheme: light) {
-  .Popup {
-    outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .Popup {
-    outline: 1px solid var(--color-gray-300);
-    outline-offset: -1px;
+  @media (prefers-color-scheme: dark) {
+    filter: none;
   }
 }
 
@@ -161,7 +149,7 @@
   transition:
     opacity calc(var(--duration) * 0.5) ease,
     transform var(--duration) var(--easing);
-  padding: 1.5rem;
+  padding: 0.5rem;
   width: calc(100vw - 40px);
   height: 100%;
 
@@ -202,8 +190,9 @@
 }
 
 .GridLinkList {
+  box-sizing: border-box;
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: 1fr 1fr;
   padding: 0;
   margin: 0;
   list-style: none;
@@ -214,6 +203,7 @@
 }
 
 .FlexLinkList {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -230,85 +220,84 @@
   width: 100%;
   height: 100%;
   padding: 0.5rem;
-  border-radius: 0.375rem;
   text-decoration: none;
   color: inherit;
   text-align: left;
-  border: none;
+  border: 0;
   background-color: transparent;
 
   &[data-popup-open] {
-    background-color: var(--color-gray-50);
+    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
   &:focus-visible {
-    position: relative;
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
-  }
-
-  @media (min-width: 500px) {
-    padding: 0.75rem;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
 .LinkTitle {
   margin: 0 0 4px;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1rem;
 }
 
 .LinkDescription {
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-500);
+  color: light-dark(var(--color-gray-500), var(--color-gray-400));
 }
 
 .Arrow {
-  display: flex;
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
+  transition:
+    left var(--duration) var(--easing),
+    right var(--duration) var(--easing);
 
   &[data-side='top'] {
-    bottom: -8px;
+    bottom: -6px;
     rotate: 180deg;
   }
 
   &[data-side='bottom'] {
-    top: -8px;
+    top: -6px;
     rotate: 0deg;
   }
 
   &[data-side='left'] {
-    right: -13px;
+    right: -9px;
     rotate: 90deg;
   }
 
   &[data-side='right'] {
-    left: -13px;
+    left: -9px;
     rotate: -90deg;
   }
-}
-
-.ArrowFill {
-  fill: canvas;
-}
 
-.ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
-  }
-}
-
-.ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    border: 1px solid light-dark(var(--color-gray-950), white);
+    background-color: light-dark(white, var(--color-gray-950));
+    transform: translate(-50%, 50%) rotate(45deg);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx
index 06d10a626ac..e2a7bc34550 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx
@@ -52,8 +52,8 @@ export default function ExampleNavigationMenu() {
                   <NavigationMenu.Portal>
                     <NavigationMenu.Positioner
                       className={styles.Positioner}
-                      sideOffset={24}
-                      alignOffset={-24}
+                      sideOffset={8}
+                      alignOffset={-8}
                       align="end"
                       side="right"
                     >
@@ -76,9 +76,7 @@ export default function ExampleNavigationMenu() {
           collisionPadding={{ top: 5, bottom: 5, left: 20, right: 20 }}
         >
           <NavigationMenu.Popup className={styles.Popup}>
-            <NavigationMenu.Arrow className={styles.Arrow}>
-              <ArrowSvg />
-            </NavigationMenu.Arrow>
+            <NavigationMenu.Arrow className={styles.Arrow} />
             <NavigationMenu.Viewport className={styles.Viewport} />
           </NavigationMenu.Popup>
         </NavigationMenu.Positioner>
@@ -117,25 +115,6 @@ function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles.ArrowFill}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles.ArrowOuterStroke}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles.ArrowInnerStroke}
-      />
-    </svg>
-  );
-}
-
 const overviewLinks = [
   {
     href: '/react/overview/quick-start',
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
index c0e0a625b9b..3acda9481f5 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
@@ -3,23 +3,25 @@ import { NavigationMenu } from '@base-ui/react/navigation-menu';
 
 export default function ExampleNavigationMenu() {
   return (
-    <NavigationMenu.Root className="min-w-max rounded-lg bg-gray-50 p-1 text-gray-900">
-      <NavigationMenu.List className="relative flex">
+    <NavigationMenu.Root className="min-w-max border border-gray-950 bg-white p-px text-gray-950 dark:border-white dark:bg-gray-950 dark:text-white">
+      <NavigationMenu.List className="relative flex gap-px">
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
             Overview
-            <NavigationMenu.Icon className="transition-transform duration-200 ease-in-out data-[popup-open]:rotate-180">
+            <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-[popup-open]:rotate-180">
               <ChevronDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
           <NavigationMenu.Content className={contentClassName}>
-            <ul className="grid list-none grid-cols-1 gap-0 sm:grid-cols-[12rem_12rem]">
+            <ul className="box-border m-0 grid list-none grid-cols-2 p-0 min-[640px]:grid-cols-[12rem_12rem]">
               {overviewLinks.map((item) => (
                 <li key={item.href}>
                   <Link href={item.href} className={linkCardClassName}>
-                    <h3 className="m-0 mb-1 text-base leading-5 font-normal">{item.title}</h3>
-                    <p className="m-0 text-sm leading-5 text-gray-500">{item.description}</p>
+                    <h3 className="m-0 mb-1 text-sm leading-4 font-normal">{item.title}</h3>
+                    <p className="m-0 text-sm leading-5 text-gray-500 dark:text-gray-400">
+                      {item.description}
+                    </p>
                   </Link>
                 </li>
               ))}
@@ -27,8 +29,8 @@ export default function ExampleNavigationMenu() {
                 <NavigationMenu.Root orientation="vertical">
                   <NavigationMenu.Item>
                     <NavigationMenu.Trigger className={linkCardClassName}>
-                      <span className="m-0 mb-1 text-base leading-5 font-normal">Handbook</span>
-                      <p className="m-0 text-sm leading-5 text-gray-500">
+                      <span className="m-0 mb-1 text-sm leading-4 font-normal">Handbook</span>
+                      <p className="m-0 text-sm leading-5 text-gray-500 dark:text-gray-400">
                         How to use Base UI effectively.
                       </p>
                       <NavigationMenu.Icon className="absolute top-1/2 right-2.5 flex h-2.5 w-2.5 -translate-y-1/2 items-center justify-center transition-transform duration-200 ease-in-out data-[popup-open]:rotate-180">
@@ -36,14 +38,14 @@ export default function ExampleNavigationMenu() {
                       </NavigationMenu.Icon>
                     </NavigationMenu.Trigger>
                     <NavigationMenu.Content className={contentClassName}>
-                      <ul className="flex max-w-[400px] flex-col justify-center">
+                      <ul className="m-0 box-border flex max-w-[400px] list-none flex-col justify-center p-0">
                         {handbookLinks.map((item) => (
                           <li key={item.href}>
                             <Link href={item.href} className={linkCardClassName}>
-                              <h3 className="m-0 mb-1 text-base leading-5 font-normal">
+                              <h3 className="m-0 mb-1 text-sm leading-4 font-normal">
                                 {item.title}
                               </h3>
-                              <p className="m-0 text-sm leading-5 text-gray-500">
+                              <p className="m-0 text-sm leading-5 text-gray-500 dark:text-gray-400">
                                 {item.description}
                               </p>
                             </Link>
@@ -55,17 +57,17 @@ export default function ExampleNavigationMenu() {
 
                   <NavigationMenu.Portal>
                     <NavigationMenu.Positioner
-                      sideOffset={24}
-                      alignOffset={-24}
+                      sideOffset={8}
+                      alignOffset={-8}
                       align="end"
                       side="right"
-                      className="box-border h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-[instant]:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
+                      className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-[instant]:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
                       style={{
-                        ['--duration' as string]: '0.35s',
-                        ['--easing' as string]: 'cubic-bezier(0.22, 1, 0.36, 1)',
+                        ['--duration' as string]: '160ms',
+                        ['--easing' as string]: 'ease-out',
                       }}
                     >
-                      <NavigationMenu.Popup className="data-[ending-style]:easing-[ease] relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] rounded-lg bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[opacity,transform,width,height,scale,translate] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
+                      <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-gray-950 bg-white text-gray-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
                         <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
                       </NavigationMenu.Popup>
                     </NavigationMenu.Positioner>
@@ -81,16 +83,14 @@ export default function ExampleNavigationMenu() {
         <NavigationMenu.Positioner
           sideOffset={10}
           collisionPadding={{ top: 5, bottom: 5, left: 20, right: 20 }}
-          className="box-border h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-[instant]:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
+          className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-[instant]:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
           style={{
-            ['--duration' as string]: '0.35s',
-            ['--easing' as string]: 'cubic-bezier(0.22, 1, 0.36, 1)',
+            ['--duration' as string]: '160ms',
+            ['--easing' as string]: 'ease-out',
           }}
         >
-          <NavigationMenu.Popup className="data-[ending-style]:easing-[ease] relative h-[var(--popup-height)] origin-[var(--transform-origin)] rounded-lg bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[opacity,transform,width,height,scale,translate] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 w-[var(--popup-width)] dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
-            <NavigationMenu.Arrow className="flex transition-[left] duration-[var(--duration)] ease-[var(--easing)] 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 />
-            </NavigationMenu.Arrow>
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-gray-950 bg-white text-gray-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
+            <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-gray-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-gray-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
         </NavigationMenu.Positioner>
@@ -129,34 +129,10 @@ function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   );
 }
 
-function ArrowSvg(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className="fill-[canvas]"
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className="fill-gray-200 dark:fill-none"
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className="dark:fill-gray-300"
-      />
-    </svg>
-  );
-}
-
 const triggerClassName =
-  'box-border flex items-center justify-center gap-1.5 h-10 ' +
-  'px-2 sm:px-3.5 m-0 rounded-md bg-gray-50 text-gray-900 font-normal ' +
-  'text-[0.925rem] sm:text-base leading-6 select-none no-underline ' +
-  'hover:bg-gray-100 active:bg-gray-100 data-[popup-open]:bg-gray-100 ' +
-  'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 focus-visible:relative';
+  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm leading-5 font-normal text-gray-950 no-underline select-none min-[501px]:px-3 hover:bg-gray-100 data-[popup-open]:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-gray-800 dark:data-[popup-open]:bg-gray-800';
 
-const contentClassName =
-  'w-[calc(100vw_-_40px)] h-full p-6 [@media(min-width:32rem)]:w-max [@media(min-width:32rem)]:min-w-[400px] ' +
+const contentTransitionClassName =
   'transition-[opacity,transform,translate] duration-[var(--duration)] ease-[var(--easing)] ' +
   'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 ' +
   'data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] ' +
@@ -164,11 +140,10 @@ const contentClassName =
   'data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] ' +
   'data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%]';
 
+const contentClassName = `h-full w-[calc(100vw_-_40px)] p-2 min-[500px]:w-max min-[500px]:min-w-[400px] ${contentTransitionClassName}`;
+
 const linkCardClassName =
-  'w-full text-left relative block rounded-md p-2 sm:p-3 no-underline text-inherit ' +
-  'hover:bg-gray-100 focus-visible:relative focus-visible:outline-2 ' +
-  'focus-visible:-outline-offset-1 focus-visible:outline-blue-800 ' +
-  'data-[popup-open]:bg-gray-100';
+  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-gray-100 data-[popup-open]:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-gray-800 dark:data-[popup-open]:bg-gray-800';
 
 const overviewLinks = [
   {
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/hero/css-modules/index.tsx
index b54f08fe1e2..468c6bc2efe 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/hero/css-modules/index.tsx
@@ -3,7 +3,7 @@ import styles from '../../index.module.css';
 
 export default function ExamplePreviewCard() {
   return (
-    <PreviewCard.Root>
+    <PreviewCard.Root open>
       <p className={styles.Paragraph}>
         The principles of good{' '}
         <PreviewCard.Trigger

From 94a79644bb35d8cfbb20a639193a3857fa3aed51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 29 Apr 2026 12:43:48 +0200
Subject: [PATCH 089/257] Button: update hover, active, and disabled states

---
 .../button/demos/hero/css-modules/index.module.css  |  5 +++--
 .../components/button/demos/hero/tailwind/index.tsx |  2 +-
 .../demos/loading/css-modules/index.module.css      | 13 +++++++------
 .../button/demos/loading/tailwind/index.tsx         |  2 +-
 4 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
index 7cf7a655cd0..a2f7d4e560a 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
@@ -18,16 +18,17 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &[data-disabled] {
     color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
index 1ae128a7b0e..1baa4413b44 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Button } from '@base-ui/react/button';
 
 export default function ExampleButton() {
   return (
-    <Button className="flex items-center justify-center h-8 px-3 border border-gray-950 dark:border-white rounded-none bg-white dark:bg-gray-950 text-sm font-normal leading-5 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-50 dark:hover:not-data-disabled:bg-gray-900 active:not-data-disabled:bg-gray-100 dark:active:not-data-disabled:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:data-disabled:text-gray-400">
+    <Button className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400">
       Submit
     </Button>
   );
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
index 4ebe69632bf..a2f7d4e560a 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
@@ -18,20 +18,21 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
   }
-
-  &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-  }
 }
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
index 4b6c283c3f9..7dd8aaaa370 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleButton() {
 
   return (
     <Button
-      className="flex items-center justify-center h-8 px-3 border border-gray-950 dark:border-white rounded-none bg-white dark:bg-gray-950 text-sm font-normal leading-5 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-50 dark:hover:not-data-disabled:bg-gray-900 active:not-data-disabled:bg-gray-100 dark:active:not-data-disabled:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:data-disabled:text-gray-400"
+      className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400"
       disabled={loading}
       focusableWhenDisabled
       onClick={() => {

From 2d17e408681bc854bcf85eff97078c8230b5553f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 29 Apr 2026 15:24:56 +0200
Subject: [PATCH 090/257] All: tweak hover, active, and disabled styles

---
 .../alert-dialog/demos/_index.module.css      | 13 +++++--
 .../tailwind/index.tsx                        |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../demos/hero/css-modules/index.module.css   | 13 +++++--
 .../demos/hero/tailwind/index.tsx             |  2 +-
 .../demos/hero/css-modules/index.module.css   | 13 +++++--
 .../collapsible/demos/hero/tailwind/index.tsx |  2 +-
 .../components/dialog/demos/_index.module.css | 13 +++++--
 .../css-modules/index.module.css              | 13 +++++--
 .../close-confirmation/tailwind/index.tsx     | 10 ++---
 .../tailwind/index.tsx                        | 10 ++---
 .../tailwind/index.tsx                        |  4 +-
 .../demos/hero/css-modules/index.module.css   | 13 +++++--
 .../dialog/demos/hero/tailwind/index.tsx      |  4 +-
 .../css-modules/index.module.css              | 13 +++++--
 .../demos/inside-scroll/tailwind/index.tsx    |  4 +-
 .../demos/nested/css-modules/index.module.css | 13 +++++--
 .../dialog/demos/nested/tailwind/index.tsx    |  6 +--
 .../css-modules/index.module.css              | 13 +++++--
 .../demos/outside-scroll/tailwind/index.tsx   |  2 +-
 .../uncontained/css-modules/index.module.css  | 24 +++++++++---
 .../demos/uncontained/tailwind/index.tsx      |  4 +-
 .../form-action/css-modules/index.module.css  | 13 ++++---
 .../form/demos/form-action/tailwind/index.tsx |  2 +-
 .../demos/hero/css-modules/index.module.css   | 13 ++++---
 .../form/demos/hero/tailwind/index.tsx        |  2 +-
 .../demos/zod/css-modules/index.module.css    | 13 ++++---
 .../form/demos/zod/tailwind/index.tsx         |  2 +-
 .../components/menu/demos/_index.module.css   | 26 +++++++++----
 .../css-modules/index.module.css              | 13 +++++--
 .../demos/checkbox-items/tailwind/index.tsx   |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../group-labels/css-modules/index.module.css | 13 +++++--
 .../demos/group-labels/tailwind/index.tsx     |  2 +-
 .../demos/hero/css-modules/index.module.css   | 13 +++++--
 .../menu/demos/hero/tailwind/index.tsx        |  2 +-
 .../css-modules/index.module.css              | 13 +++++--
 .../demos/open-on-hover/tailwind/index.tsx    |  2 +-
 .../radio-items/css-modules/index.module.css  | 13 +++++--
 .../menu/demos/radio-items/tailwind/index.tsx |  2 +-
 .../submenu/css-modules/index.module.css      | 13 +++++--
 .../menu/demos/submenu/tailwind/index.tsx     |  2 +-
 .../demos/hero/css-modules/index.module.css   | 10 +++++
 .../menubar/demos/hero/tailwind/index.tsx     |  8 ++--
 .../demos/hero/css-modules/index.module.css   |  5 ++-
 .../demos/hero/tailwind/index.tsx             |  2 +-
 .../popover/demos/_index.module.css           | 17 ++++++---
 .../tailwind/index.tsx                        |  8 ++--
 .../css-modules/index.module.css              | 27 ++++++++------
 .../detached-triggers-full/tailwind/index.tsx | 18 ++++-----
 .../tailwind/index.tsx                        |  2 +-
 .../popover/demos/hero/tailwind/index.tsx     |  2 +-
 .../demos/open-on-hover/tailwind/index.tsx    |  2 +-
 .../tailwind/index.tsx                        |  8 ++--
 .../preview-card/demos/index.module.css       |  4 +-
 .../grouped/css-modules/index.module.css      | 13 +++++--
 .../select/demos/grouped/tailwind/index.tsx   |  2 +-
 .../demos/hero/css-modules/index.module.css   | 13 +++++--
 .../select/demos/hero/tailwind/index.tsx      |  2 +-
 .../multiple/css-modules/index.module.css     | 13 +++++--
 .../select/demos/multiple/tailwind/index.tsx  |  2 +-
 .../css-modules/index.module.css              | 13 +++++--
 .../demos/object-values/tailwind/index.tsx    |  2 +-
 .../anchored/css-modules/index.module.css     | 30 ++++++++++-----
 .../toast/demos/anchored/tailwind/index.tsx   |  8 ++--
 .../demos/custom/css-modules/index.module.css | 17 ++++++---
 .../deduplicate/css-modules/index.module.css  | 17 ++++++---
 .../demos/hero/css-modules/index.module.css   | 17 ++++++---
 .../toast/demos/hero/tailwind/index.tsx       |  4 +-
 .../position/css-modules/index.module.css     | 17 ++++++---
 .../toast/demos/position/tailwind/index.tsx   |  4 +-
 .../promise/css-modules/index.module.css      | 17 ++++++---
 .../demos/undo/css-modules/index.module.css   | 17 ++++++---
 .../css-modules/index.module.css              | 17 ++++++---
 .../demos/hero/css-modules/index.module.css   | 15 ++++++--
 .../demos/hero/tailwind/index.tsx             |  6 +--
 .../multiple/css-modules/index.module.css     | 13 ++++++-
 .../demos/multiple/tailwind/index.tsx         |  6 +--
 .../demos/hero/css-modules/index.module.css   |  8 ++--
 .../toggle/demos/hero/tailwind/index.tsx      |  2 +-
 .../demos/hero/css-modules/index.module.css   | 37 +++++++++++--------
 .../toolbar/demos/hero/tailwind/index.tsx     | 12 +++---
 .../css-modules/index.module.css              | 23 +++++++-----
 .../demos/hero/css-modules/index.module.css   | 20 +++++-----
 .../components/tooltip/demos/index.module.css | 36 +++++++++++-------
 85 files changed, 549 insertions(+), 323 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
index bc3126c3b74..90a9b79365c 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
@@ -16,19 +16,24 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
   }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
 }
 
 .DangerButton {
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index de5232201e8..93697b6261d 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -7,7 +7,7 @@ type AlertPayload = { message: string };
 const demoAlertDialog = AlertDialog.createHandle<AlertPayload>();
 
 const buttonClasses =
-  'flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
+  'flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
index bdd6ce57e16..c34fe62baf5 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { AlertDialog } from '@base-ui/react/alert-dialog';
 const demoAlertDialog = AlertDialog.createHandle();
 
 const buttonClasses =
-  'flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
+  'flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
index 33a7760a336..e36c2a79e24 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
@@ -20,19 +20,24 @@
   }
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
   }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
 }
 
 .Backdrop {
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
index 7027fc3454e..7f7e494ef61 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
@@ -1,7 +1,7 @@
 import { AlertDialog } from '@base-ui/react/alert-dialog';
 
 const buttonClasses =
-  'flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
+  'flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
index a4981fc51a8..141e9be7166 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
@@ -33,13 +33,13 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &:focus-visible {
@@ -50,6 +50,11 @@
   &[data-panel-open] .Icon {
     transform: rotate(90deg);
   }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
 }
 
 .Panel {
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
index 7c54fedafac..9ee9c6b82f0 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Collapsible } from '@base-ui/react/collapsible';
 export default function ExampleCollapsible() {
   return (
     <Collapsible.Root className="flex min-h-36 w-56 flex-col justify-center text-gray-950 dark:text-white">
-      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none border border-gray-950 dark:border-white bg-white dark:bg-gray-950 pl-3 pr-2 text-sm leading-5 font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none border border-gray-950 dark:border-white bg-white dark:bg-gray-950 pl-3 pr-2 text-sm leading-5 font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400">
         Recovery keys
         <ChevronIcon className="size-3 transition-transform duration-100 ease-out group-data-panel-open:rotate-90" />
       </Collapsible.Trigger>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
index a7d453bd093..63c9c91b8a8 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
@@ -16,13 +16,18 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
index f3f859ea37f..e75012fa02c 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
@@ -16,13 +16,18 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
index 7d57add7618..e7049e042c3 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleDialog() {
         }
       }}
     >
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Tweet
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -50,12 +50,12 @@ export default function ExampleDialog() {
               onChange={(event) => setTextareaValue(event.target.value)}
             />
             <div className="flex justify-end gap-3">
-              <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Cancel
               </Dialog.Close>
               <button
                 type="submit"
-                className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+                className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-700 disabled:border-gray-500 disabled:text-gray-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
               >
                 Tweet
               </button>
@@ -73,12 +73,12 @@ export default function ExampleDialog() {
               Your tweet will be lost.
             </AlertDialog.Description>
             <div className="flex justify-end gap-3">
-              <AlertDialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <AlertDialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Go back
               </AlertDialog.Close>
               <button
                 type="button"
-                className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+                className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-700 disabled:border-gray-500 disabled:text-gray-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
                 onClick={() => {
                   setConfirmationOpen(false);
                   setDialogOpen(false);
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 267fa0117e6..0c7f68ad4e5 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -17,7 +17,7 @@ export default function DialogDetachedTriggersControlledDemo() {
     <React.Fragment>
       <div className="flex flex-wrap gap-2 justify-center">
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoDialog}
           id="trigger-1"
           payload={1}
@@ -26,7 +26,7 @@ export default function DialogDetachedTriggersControlledDemo() {
         </Dialog.Trigger>
 
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoDialog}
           id="trigger-2"
           payload={2}
@@ -35,7 +35,7 @@ export default function DialogDetachedTriggersControlledDemo() {
         </Dialog.Trigger>
 
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoDialog}
           id="trigger-3"
           payload={3}
@@ -45,7 +45,7 @@ export default function DialogDetachedTriggersControlledDemo() {
 
         <button
           type="button"
-          className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-700 disabled:border-gray-500 disabled:text-gray-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
@@ -70,7 +70,7 @@ export default function DialogDetachedTriggersControlledDemo() {
               )}
 
               <div className="flex justify-end gap-3 mt-4">
-                <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                   Close
                 </Dialog.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
index 0c41044c2d1..83d9bb2b7c3 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function DialogDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
       <Dialog.Trigger
-        className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoDialog}
       >
         View notifications
@@ -23,7 +23,7 @@ export default function DialogDetachedTriggersSimpleDemo() {
               You are all caught up. Good job!
             </Dialog.Description>
             <div className="flex justify-end gap-3 mt-4">
-              <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Close
               </Dialog.Close>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
index 00d5b8b1494..48705ca0965 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
@@ -16,13 +16,18 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
index fb7d29f0e0e..4f471b85ba3 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -14,7 +14,7 @@ export default function ExampleDialog() {
             You are all caught up. Good job!
           </Dialog.Description>
           <div className="flex justify-end gap-3 mt-4">
-            <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+            <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
               Close
             </Dialog.Close>
           </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
index 8a7809147b7..be64cac05e0 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
@@ -16,13 +16,18 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
index 22034932ead..dc004b59167 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function InsideScrollDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -36,7 +36,7 @@ export default function InsideScrollDialog() {
               </ScrollArea.Scrollbar>
             </ScrollArea.Root>
             <div className="flex justify-end gap-3 p-4">
-              <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Close
               </Dialog.Close>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
index cd7e33a7263..baeec5deded 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
@@ -16,13 +16,18 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
index 4b367ccf517..a6f24d2d798 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -15,7 +15,7 @@ export default function ExampleDialog() {
           </Dialog.Description>
           <div className="flex items-center gap-3 mt-4">
             <Dialog.Root>
-              <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Customize
               </Dialog.Trigger>
               <Dialog.Portal>
@@ -25,7 +25,7 @@ export default function ExampleDialog() {
                     Review your settings here.
                   </Dialog.Description>
                   <div className="flex items-center justify-end gap-3 mt-4">
-                    <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                    <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                       Close
                     </Dialog.Close>
                   </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
index 70f9c92ccea..4fb2c62c39a 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
@@ -16,13 +16,18 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index 9850307e9d7..f3cc13437d7 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function OutsideScrollDialog() {
   const popupRef = React.useRef<HTMLDivElement>(null);
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
index 2fb5d9ec613..e780a01ca01 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
@@ -16,13 +16,18 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
@@ -131,11 +136,20 @@
   }
 
   @media (hover: hover) {
-    &:hover {
+    &:hover:not([data-disabled]) {
       background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
index 61b45ff29c1..86f5621634f 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleUncontainedDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -11,7 +11,7 @@ export default function ExampleUncontainedDialog() {
         <Dialog.Viewport className="fixed inset-0 grid place-items-center px-4 py-12 xl:py-6">
           <Dialog.Popup className="group/popup relative flex h-full w-full max-w-[70rem] xl:max-w-none justify-center pointer-events-none transition-opacity duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0">
             <Dialog.Close
-              className="absolute right-0 -top-10 flex h-8 w-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 xl:top-0 xl:h-10 xl:w-10 pointer-events-auto"
+              className="absolute right-0 -top-10 flex h-8 w-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none hover:bg-gray-100 dark:hover:bg-gray-800 xl:top-0 xl:h-10 xl:w-10 pointer-events-auto focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
               aria-label="Close"
             >
               <XIcon className="h-6 w-6" />
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
index 8b27d56526c..796ccd67042 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
@@ -70,20 +70,21 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
   }
-
-  &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-  }
 }
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
index 5b1eb908501..e36b8806aa6 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
@@ -34,7 +34,7 @@ export default function ActionStateForm() {
         type="submit"
         disabled={loading}
         focusableWhenDisabled
-        className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-50 active:not-data-disabled:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-900 dark:active:not-data-disabled:bg-gray-800 dark:data-disabled:text-gray-400"
+        className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-50 active:not-data-disabled:bg-gray-100 data-disabled:text-gray-500 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-900 dark:active:not-data-disabled:bg-gray-800 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
index 8b27d56526c..796ccd67042 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
@@ -70,20 +70,21 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
   }
-
-  &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-  }
 }
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
index 16ff17db2c1..afee8871897 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
@@ -45,7 +45,7 @@ export default function ExampleForm() {
         disabled={loading}
         focusableWhenDisabled
         type="submit"
-        className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-50 active:not-data-disabled:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-900 dark:active:not-data-disabled:bg-gray-800 dark:data-disabled:text-gray-400"
+        className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-50 active:not-data-disabled:bg-gray-100 data-disabled:text-gray-500 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-900 dark:active:not-data-disabled:bg-gray-800 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
index 8b27d56526c..796ccd67042 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
@@ -70,20 +70,21 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
   }
-
-  &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-  }
 }
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
index c34f7ddaf5b..76613940d82 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
@@ -54,7 +54,7 @@ export default function Page() {
       </Field.Root>
       <Button
         type="submit"
-        className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-50 active:not-data-disabled:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:text-gray-500 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-900 dark:active:not-data-disabled:bg-gray-800 dark:data-disabled:text-gray-400"
+        className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-50 active:not-data-disabled:bg-gray-100 data-disabled:text-gray-500 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-900 dark:active:not-data-disabled:bg-gray-800 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
index ffcf9ae3c23..2a58b2d42cc 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
@@ -15,19 +15,24 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &[data-popup-open] {
     background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
@@ -67,19 +72,24 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &[data-popup-open] {
     background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
index 0b0c88e4130..13b4c2a032d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
@@ -19,19 +19,24 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &[data-popup-open] {
     background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index 14426f6aba1..41bb3092496 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleMenu() {
 
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-[popup-open]:bg-gray-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Workspace <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
index d178a11fd77..d1d0c4a9d65 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function MenuDetachedTriggersSimpleDemo() {
       <Menu.Trigger
         handle={demoMenu}
         aria-label="Project actions"
-        className="flex size-8 items-center justify-center rounded-none border border-gray-950 bg-white text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-[popup-open]:bg-gray-800"
+        className="flex size-8 items-center justify-center rounded-none border border-gray-950 bg-white text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         <DotsIcon />
       </Menu.Trigger>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
index c4f1c17f6cb..0eeccc042c9 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
@@ -19,19 +19,24 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &[data-popup-open] {
     background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index c04fd5f5a39..0aab7a86777 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleMenu() {
 
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-[popup-open]:bg-gray-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         View <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
index 2728fc9fb37..84b99880519 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
@@ -19,19 +19,24 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &[data-popup-open] {
     background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
index ac8878f09a1..46965cc7f7c 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
@@ -7,7 +7,7 @@ const itemClass =
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-[popup-open]:bg-gray-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Song <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
index 2728fc9fb37..84b99880519 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
@@ -19,19 +19,24 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &[data-popup-open] {
     background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
index d9ab5bd47c5..ec9a378c0ff 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleMenu() {
     <Menu.Root>
       <Menu.Trigger
         openOnHover
-        className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-[popup-open]:bg-gray-800"
+        className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         Add to playlist <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
index 2f5427506e3..ab39779d3b4 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
@@ -19,19 +19,24 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &[data-popup-open] {
     background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index 0274b7a119f..2e4bad8d91f 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleMenu() {
   const [value, setValue] = React.useState('date');
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-[popup-open]:bg-gray-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Sort <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
index 848818f8b0f..d22ab1782dc 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
@@ -19,19 +19,24 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &[data-popup-open] {
     background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
index 30386fc41aa..b7f843d098e 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
@@ -12,7 +12,7 @@ const submenuTriggerClass =
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-[popup-open]:bg-gray-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Song <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
index a62ba2fd3cc..8491ae7ecb6 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
@@ -21,6 +21,16 @@
   line-height: 1.25rem;
   user-select: none;
 
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
   &[data-pressed],
   &[data-popup-open] {
     background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
index b0e30384688..c185280c367 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleMenubar() {
   return (
     <Menubar className="flex items-center border border-gray-950 bg-white p-px dark:border-white dark:bg-gray-950">
       <Menu.Root>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none focus-visible:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-popup-open:bg-gray-100 data-pressed:bg-gray-100 data-disabled:text-gray-500 dark:text-white dark:focus-visible:bg-gray-800 dark:data-popup-open:bg-gray-800 dark:data-pressed:bg-gray-800 dark:data-disabled:text-gray-400">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none data-popup-open:bg-gray-100 data-pressed:bg-gray-100 data-disabled:text-gray-500 dark:text-white dark:focus-visible:bg-gray-800 dark:data-popup-open:bg-gray-800 dark:data-pressed:bg-gray-800 dark:data-disabled:text-gray-400 focus-visible:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           File
         </Menu.Trigger>
         <Menu.Portal>
@@ -76,7 +76,7 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none focus-visible:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-popup-open:bg-gray-100 data-pressed:bg-gray-100 data-disabled:text-gray-500 dark:text-white dark:focus-visible:bg-gray-800 dark:data-popup-open:bg-gray-800 dark:data-pressed:bg-gray-800 dark:data-disabled:text-gray-400">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none data-popup-open:bg-gray-100 data-pressed:bg-gray-100 data-disabled:text-gray-500 dark:text-white dark:focus-visible:bg-gray-800 dark:data-popup-open:bg-gray-800 dark:data-pressed:bg-gray-800 dark:data-disabled:text-gray-400 focus-visible:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           Edit
         </Menu.Trigger>
         <Menu.Portal>
@@ -106,7 +106,7 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none focus-visible:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-popup-open:bg-gray-100 data-pressed:bg-gray-100 data-disabled:text-gray-500 dark:text-white dark:focus-visible:bg-gray-800 dark:data-popup-open:bg-gray-800 dark:data-pressed:bg-gray-800 dark:data-disabled:text-gray-400">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none data-popup-open:bg-gray-100 data-pressed:bg-gray-100 data-disabled:text-gray-500 dark:text-white dark:focus-visible:bg-gray-800 dark:data-popup-open:bg-gray-800 dark:data-pressed:bg-gray-800 dark:data-disabled:text-gray-400 focus-visible:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           View
         </Menu.Trigger>
         <Menu.Portal>
@@ -169,7 +169,7 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root disabled>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none focus-visible:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-popup-open:bg-gray-100 data-pressed:bg-gray-100 data-disabled:text-gray-500 dark:text-white dark:focus-visible:bg-gray-800 dark:data-popup-open:bg-gray-800 dark:data-pressed:bg-gray-800 dark:data-disabled:text-gray-400">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none data-popup-open:bg-gray-100 data-pressed:bg-gray-100 data-disabled:text-gray-500 dark:text-white dark:focus-visible:bg-gray-800 dark:data-popup-open:bg-gray-800 dark:data-pressed:bg-gray-800 dark:data-disabled:text-gray-400 focus-visible:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           Help
         </Menu.Trigger>
       </Menu.Root>
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
index d435da6a399..dfd58f5112d 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
@@ -74,16 +74,17 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &[data-disabled] {
     color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
index a05181e698d..b50166c907c 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { NumberField } from '@base-ui/react/number-field';
 
 const stepperClasses =
-  'flex h-full w-8 items-center justify-center border border-gray-950 rounded-none bg-white bg-clip-padding text-gray-950 outline-0 select-none hover:not-data-disabled:bg-gray-50 active:not-data-disabled:bg-gray-100 data-disabled:text-gray-500 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-900 dark:active:not-data-disabled:bg-gray-800 dark:data-disabled:text-gray-400';
+  'flex h-full w-8 items-center justify-center border border-gray-950 rounded-none bg-white bg-clip-padding text-gray-950 outline-0 select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
 
 export default function ExampleNumberField() {
   const id = React.useId();
diff --git a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
index 173d2dfcdb9..729d72ebbd7 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
@@ -17,19 +17,24 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &[data-popup-open] {
     background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
@@ -157,12 +162,12 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
index 900d0708cad..bc5a222d58d 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
     <React.Fragment>
       <div className="flex gap-2 flex-wrap justify-center">
         <Popover.Trigger
-          className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoPopover}
           id="trigger-1"
         >
@@ -26,7 +26,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
         </Popover.Trigger>
 
         <Popover.Trigger
-          className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoPopover}
           id="trigger-2"
         >
@@ -34,7 +34,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
         </Popover.Trigger>
 
         <Popover.Trigger
-          className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoPopover}
           id="trigger-3"
         >
@@ -43,7 +43,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
 
         <button
           type="button"
-          className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-700 disabled:border-gray-500 disabled:text-gray-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
index 754cd1a9907..2dc980a0fb4 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
@@ -17,19 +17,24 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &[data-popup-open] {
     background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
@@ -71,7 +76,7 @@
   width: var(--popup-width, auto);
   height: var(--popup-height, auto);
 
-  max-width: 500px;
+  max-width: 31.25rem;
 
   /* width and height are essential for the resize animation; opacity and transform handle the enter/exit animation */
   transition-property: width, height, opacity, transform;
@@ -94,14 +99,14 @@
 }
 
 .Viewport {
-  --viewport-inline-padding: 1rem;
+  --viewport-inline-padding: 0.5rem;
   box-sizing: border-box;
   /* Required to clip the overflowing content during the slide in/out animations */
   position: relative;
   overflow: clip;
   width: 100%;
   height: 100%;
-  padding: 0.75rem var(--viewport-inline-padding);
+  padding: 0.5rem var(--viewport-inline-padding);
 
   [data-previous],
   [data-current] {
@@ -198,13 +203,14 @@
 
 .Container {
   display: flex;
-  gap: 8px;
+  gap: 0.5rem;
 }
 
 .ProfilePanel {
   display: grid;
   grid-template-columns: auto auto;
-  column-gap: 16px;
+  width: max-content;
+  column-gap: 0.5rem;
 
   .Title {
     grid-column: 2;
@@ -214,7 +220,6 @@
   .Plan {
     grid-column: 2;
     grid-row: 2;
-
     font-size: 0.875rem;
     line-height: 1.25rem;
     color: light-dark(var(--color-gray-600), var(--color-gray-400));
@@ -251,9 +256,7 @@
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
-    margin-top: 0.5rem;
     padding-top: 0.5rem;
-    border-top: 1px solid light-dark(var(--color-gray-950), white);
     font-size: 0.875rem;
     line-height: 1.25rem;
 
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
index 849bfb6bd4c..c79fa802b1a 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
@@ -10,7 +10,7 @@ export default function PopoverDetachedTriggersFullDemo() {
   return (
     <div className="flex gap-2">
       <Popover.Trigger
-        className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
         payload={NotificationsPanel}
       >
@@ -18,7 +18,7 @@ export default function PopoverDetachedTriggersFullDemo() {
       </Popover.Trigger>
 
       <Popover.Trigger
-        className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
         payload={ActivityPanel}
       >
@@ -26,7 +26,7 @@ export default function PopoverDetachedTriggersFullDemo() {
       </Popover.Trigger>
 
       <Popover.Trigger
-        className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
         payload={ProfilePanel}
       >
@@ -40,13 +40,13 @@ export default function PopoverDetachedTriggersFullDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[instant]:transition-none"
             >
-              <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] origin-[var(--transform-origin)] bg-white dark:bg-gray-950 text-gray-950 dark:text-white border border-gray-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+              <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[31.25rem] origin-[var(--transform-origin)] bg-white dark:bg-gray-950 text-gray-950 dark:text-white border border-gray-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
                 <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
 
                 <Popover.Viewport
                   className={`
-                    relative h-full w-full overflow-clip p-[0.75rem_1rem]
-                    [&_[data-current]]:w-[calc(var(--popup-width)-2rem)]
+                    relative h-full w-full overflow-clip p-2
+                    [&_[data-current]]:w-[calc(var(--popup-width)-1rem)]
                     [&_[data-current]]:translate-x-0
                     [&_[data-current]]:opacity-100
                     [&_[data-current]]:transition-[translate,opacity]
@@ -56,7 +56,7 @@ export default function PopoverDetachedTriggersFullDemo() {
                     data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:opacity-0
                     data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:translate-x-1/2
                     data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:opacity-0
-                    [&_[data-previous]]:w-[calc(var(--popup-width)-2rem)]
+                    [&_[data-previous]]:w-[calc(var(--popup-width)-1rem)]
                     [&_[data-previous]]:translate-x-0
                     [&_[data-previous]]:opacity-100
                     [&_[data-previous]]:transition-[translate,opacity]
@@ -91,7 +91,7 @@ function NotificationsPanel() {
 
 function ProfilePanel() {
   return (
-    <div className="grid grid-cols-[auto_auto] gap-x-4">
+    <div className="grid w-max grid-cols-[auto_auto] gap-x-2">
       <Popover.Title className="col-start-2 col-end-3 row-start-1 row-end-2 m-0 text-sm font-bold leading-5">
         Jason Eventon
       </Popover.Title>
@@ -106,7 +106,7 @@ function ProfilePanel() {
       <span className="col-start-2 col-end-3 row-start-2 row-end-3 text-sm leading-5 text-gray-600 dark:text-gray-400">
         Pro plan
       </span>
-      <div className="col-start-1 col-end-3 row-start-3 row-end-4 mt-2 flex flex-col gap-2 border-t border-gray-950 dark:border-white pt-2 text-sm leading-5">
+      <div className="col-start-1 col-end-3 row-start-3 row-end-4 flex flex-col gap-2 pt-2 text-sm leading-5">
         <a
           href="#"
           className="text-gray-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
index 87ba193de36..064616ae712 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
       <Popover.Trigger
-        className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
       >
         <BellIcon aria-label="Notifications" />
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
index 12406b06234..c2c5abd60e7 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { BellIcon } from '../../icons-tw';
 export default function ExamplePopover() {
   return (
     <Popover.Root>
-      <Popover.Trigger className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Popover.Trigger className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         <BellIcon aria-label="Notifications" />
       </Popover.Trigger>
       <Popover.Portal>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
index 1aeb051b172..719c2c5ac44 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExamplePopover() {
     <Popover.Root>
       <Popover.Trigger
         openOnHover
-        className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         <BellIcon aria-label="Notifications" />
       </Popover.Trigger>
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
index d6cc5887b8b..89cbef0cbc1 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -67,7 +67,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
         <p className="m-0 text-base leading-6 text-gray-950 text-balance dark:text-white">
           Discover{' '}
           <PreviewCard.Trigger
-            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500"
+            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
             handle={demoPreviewCard}
             href="https://en.wikipedia.org/wiki/Typography"
             id="trigger-1"
@@ -77,7 +77,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
           </PreviewCard.Trigger>
           ,{' '}
           <PreviewCard.Trigger
-            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500"
+            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
             handle={demoPreviewCard}
             href="https://en.wikipedia.org/wiki/Industrial_design"
             id="trigger-2"
@@ -87,7 +87,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
           </PreviewCard.Trigger>
           , or{' '}
           <PreviewCard.Trigger
-            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500"
+            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
             handle={demoPreviewCard}
             href="https://en.wikipedia.org/wiki/Art"
             id="trigger-3"
@@ -99,7 +99,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
         </p>
         <button
           type="button"
-          className="box-border flex h-10 items-center justify-center border border-gray-950 bg-white px-3.5 font-[inherit] text-base leading-6 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800"
+          className="box-border flex h-10 items-center justify-center border border-gray-950 bg-white px-3.5 font-[inherit] text-base leading-6 font-normal text-gray-950 select-none hover:bg-gray-100 active:bg-gray-200 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-800 dark:active:bg-gray-700 disabled:border-gray-500 disabled:text-gray-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
index 1026c5236aa..bc8cd672112 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
@@ -163,12 +163,12 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index 2a3bf062881..a2e1cb7b657 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -39,8 +39,8 @@
   min-width: 11rem;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
@@ -48,8 +48,13 @@
     background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index 3e5a0338c00..8d4d77391e2 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleSelectGrouped() {
         Produce
       </Field.Label>
       <Select.Root items={groupedProduce}>
-        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 font-normal">
+        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           <Select.Value
             className="data-[placeholder]:text-gray-600 dark:data-[placeholder]:text-gray-400"
             placeholder="Select produce"
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
index 0c4a76a3fc7..cc30609ec32 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
@@ -39,8 +39,8 @@
   min-width: 10rem;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
@@ -48,8 +48,13 @@
     background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index 8bf8308015b..18444dbacb1 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function ExampleSelect() {
         <Select.Label className="cursor-default text-sm leading-5 font-bold text-gray-950 dark:text-white">
           Apple
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 font-normal">
+        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           <Select.Value
             className="data-[placeholder]:text-gray-600 dark:data-[placeholder]:text-gray-400"
             placeholder="Select apple"
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
index a370c060893..5d0f67c533a 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
@@ -39,8 +39,8 @@
   min-width: 14rem;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
@@ -48,8 +48,13 @@
     background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index b6855bf85b4..1aa71837047 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -36,7 +36,7 @@ export default function MultiSelectExample() {
         <Select.Label className="cursor-default text-sm leading-5 font-bold text-gray-950 dark:text-white">
           Languages
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 font-normal">
+        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           <Select.Value className="data-[placeholder]:text-gray-600 dark:data-[placeholder]:text-gray-400">
             {renderValue}
           </Select.Value>
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
index faa963999b3..c41312362d6 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
@@ -36,8 +36,8 @@
   min-width: 16rem;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
@@ -45,8 +45,13 @@
     background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index d9e52578767..70e4448855b 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ObjectValueSelect() {
         <Select.Label className="cursor-default text-sm leading-5 font-bold text-gray-950 dark:text-white">
           Shipping method
         </Select.Label>
-        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-start justify-between gap-3 pl-3 pr-2 py-1.5 text-sm leading-5 border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white select-none hover:bg-gray-50 dark:hover:bg-gray-900 active:bg-gray-100 dark:active:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 font-normal">
+        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-start justify-between gap-3 pl-3 pr-2 py-1.5 text-sm leading-5 border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           <Select.Value>
             {(method: ShippingMethod) => (
               <span className="flex flex-col items-start gap-0.5">
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
index 6f0667dce52..c564d02ea94 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
@@ -193,13 +193,18 @@
   line-height: 1.25rem;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
@@ -306,12 +311,12 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &:focus-visible {
@@ -342,13 +347,18 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index bcdce512c75..a8994427774 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -35,7 +35,7 @@ function StackedToastButton() {
   return (
     <button
       type="button"
-      className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800"
+      className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 select-none hover:bg-gray-100 active:bg-gray-200 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-800 dark:active:bg-gray-700 disabled:border-gray-500 disabled:text-gray-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       onClick={createToast}
     >
       Stacked toast
@@ -68,7 +68,7 @@ function CopyButton() {
       <Tooltip.Trigger
         ref={buttonRef}
         closeOnClick={false}
-        className="flex h-8 w-8 items-center justify-center rounded-none border border-gray-950 bg-white text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800"
+        className="flex h-8 w-8 items-center justify-center rounded-none border border-gray-950 bg-white text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         onClick={handleCopy}
         aria-label="Copy to clipboard"
         render={<Button disabled={copied} focusableWhenDisabled />}
@@ -100,7 +100,7 @@ function AnchoredToasts() {
           >
             <Toast.Root
               toast={toast}
-              className="flex w-max origin-[var(--transform-origin)] flex-col border border-gray-950 bg-white px-2 py-1 text-sm text-gray-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]"
+              className="flex w-max origin-[var(--transform-origin)] flex-col border border-gray-950 bg-white px-2 py-1 text-sm text-gray-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
             >
               <Toast.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-gray-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-gray-950" />
               <Toast.Content>
@@ -130,7 +130,7 @@ function StackedToasts() {
                 <Toast.Title className="text-sm font-bold" />
                 <Toast.Description className="text-sm" />
               </div>
-              <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800">
+              <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Dismiss
               </Toast.Close>
             </Toast.Content>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
index d682f573c42..5f03657f4c1 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
@@ -152,13 +152,18 @@
   line-height: 1.25rem;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
@@ -187,12 +192,12 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
index 210f5fd2a4e..85ceb584376 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
@@ -164,13 +164,18 @@
   line-height: 1.25rem;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
@@ -199,12 +204,12 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
index d682f573c42..5f03657f4c1 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
@@ -152,13 +152,18 @@
   line-height: 1.25rem;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
@@ -187,12 +192,12 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
index 68e72470a45..a5674a73b4a 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
@@ -30,7 +30,7 @@ function ToastButton() {
   return (
     <button
       type="button"
-      className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800"
+      className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 select-none hover:bg-gray-100 active:bg-gray-200 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-800 dark:active:bg-gray-700 disabled:border-gray-500 disabled:text-gray-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       onClick={createToast}
     >
       Create toast
@@ -51,7 +51,7 @@ function ToastList() {
           <Toast.Title className="text-sm font-bold" />
           <Toast.Description className="text-sm" />
         </div>
-        <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800">
+        <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           Dismiss
         </Toast.Close>
       </Toast.Content>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
index 1c925722880..d2d06fa1274 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
@@ -147,13 +147,18 @@
   line-height: 1.25rem;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
@@ -182,12 +187,12 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
index 36d2d5fa319..af24a438ee9 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
@@ -30,7 +30,7 @@ function ToastButton() {
   return (
     <button
       type="button"
-      className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800"
+      className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 select-none hover:bg-gray-100 active:bg-gray-200 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-800 dark:active:bg-gray-700 disabled:border-gray-500 disabled:text-gray-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       onClick={createToast}
     >
       Create toast
@@ -52,7 +52,7 @@ function ToastList() {
           <Toast.Title className="text-sm font-bold" />
           <Toast.Description className="text-sm" />
         </div>
-        <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800">
+        <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           Dismiss
         </Toast.Close>
       </Toast.Content>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
index 55e0890a460..3e492d56040 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
@@ -160,13 +160,18 @@
   line-height: 1.25rem;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
@@ -195,12 +200,12 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
index 1934a990f76..824ca94ac27 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
@@ -155,13 +155,18 @@
   line-height: 1.25rem;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
@@ -190,12 +195,12 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
index 435079f9689..1eb1139b9d0 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
@@ -152,13 +152,18 @@
   line-height: 1.25rem;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {
@@ -187,12 +192,12 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
index b32bc106d5b..d1709dd9cd0 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
@@ -21,13 +21,13 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled], [data-pressed]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &[data-pressed] {
@@ -35,6 +35,13 @@
     color: light-dark(white, var(--color-gray-950));
   }
 
+  @media (hover: hover) {
+    &[data-pressed]:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-950), white);
+      color: light-dark(white, var(--color-gray-950));
+    }
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
index e47764e6267..d7c02b733d3 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/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 border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-50 dark:hover:not-data-disabled:bg-gray-900 active:not-data-disabled:bg-gray-100 dark:active:not-data-disabled:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:not-data-pressed:bg-gray-200 dark:active:not-data-disabled:not-data-pressed:bg-gray-700 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950 data-pressed:hover:not-data-disabled:bg-gray-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-gray-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         <AlignLeftIcon className="size-4" />
       </Toggle>
       <Toggle
         aria-label="Align center"
         value="center"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-50 dark:hover:not-data-disabled:bg-gray-900 active:not-data-disabled:bg-gray-100 dark:active:not-data-disabled:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:not-data-pressed:bg-gray-200 dark:active:not-data-disabled:not-data-pressed:bg-gray-700 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950 data-pressed:hover:not-data-disabled:bg-gray-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-gray-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         <AlignCenterIcon className="size-4" />
       </Toggle>
       <Toggle
         aria-label="Align right"
         value="right"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-50 dark:hover:not-data-disabled:bg-gray-900 active:not-data-disabled:bg-gray-100 dark:active:not-data-disabled:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:not-data-pressed:bg-gray-200 dark:active:not-data-disabled:not-data-pressed:bg-gray-700 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950 data-pressed:hover:not-data-disabled:bg-gray-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-gray-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         <AlignRightIcon className="size-4" />
       </Toggle>
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
index 58ba8408c28..d1709dd9cd0 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
@@ -21,16 +21,27 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
+    &:hover:not([data-disabled]) {
       background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
+  &:active:not([data-disabled], [data-pressed]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
   &[data-pressed] {
     background-color: light-dark(var(--color-gray-950), white);
     color: light-dark(white, var(--color-gray-950));
   }
 
+  @media (hover: hover) {
+    &[data-pressed]:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-950), white);
+      color: light-dark(white, var(--color-gray-950));
+    }
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
index f0cd635d782..fe5cd00e160 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
@@ -12,21 +12,21 @@ export default function ExampleToggleGroupMultiple() {
       <Toggle
         aria-label="Bold"
         value="bold"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950 data-pressed:hover:bg-gray-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-gray-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         <BoldIcon />
       </Toggle>
       <Toggle
         aria-label="Italic"
         value="italic"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950 data-pressed:hover:bg-gray-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-gray-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         <ItalicIcon />
       </Toggle>
       <Toggle
         aria-label="Underline"
         value="underline"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950 data-pressed:hover:bg-gray-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-gray-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         <UnderlineIcon />
       </Toggle>
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
index 327518a0067..a427e244f9e 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
@@ -14,13 +14,13 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &[data-pressed] {
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
index ebfede8709c..4062940428d 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleToggle() {
   return (
     <Toggle
       aria-label="Favorite"
-      className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-50 dark:hover:not-data-disabled:bg-gray-900 active:not-data-disabled:bg-gray-100 dark:active:not-data-disabled:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-pressed:text-gray-950 dark:data-pressed:text-white"
+      className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-50 dark:hover:not-data-disabled:bg-gray-900 active:not-data-disabled:bg-gray-100 dark:active:not-data-disabled:bg-gray-800 data-pressed:text-gray-950 dark:data-pressed:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       render={(props, state) => {
         if (state.pressed) {
           return (
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
index cdcc752ea6c..c8dad789270 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
@@ -31,20 +31,14 @@
   font-weight: 400;
   line-height: 1.25rem;
 
-  &:focus-visible {
-    background-color: transparent;
-    outline: 2px solid var(--color-blue-800);
-    outline-offset: -2px;
-  }
-
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled], [data-pressed]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &[data-pressed] {
@@ -52,6 +46,13 @@
     color: light-dark(white, var(--color-gray-950));
   }
 
+  @media (hover: hover) {
+    &[data-pressed]:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-950), white);
+      color: light-dark(white, var(--color-gray-950));
+    }
+  }
+
   &[data-popup-open] {
     background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
@@ -65,6 +66,12 @@
     justify-content: space-between;
     padding: 0 0.75rem;
   }
+
+  &:focus-visible {
+    background-color: transparent;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
+  }
 }
 
 .Separator {
@@ -84,16 +91,16 @@
   flex: 0 0 auto;
   margin-inline: auto 0.875rem;
 
-  &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
-    outline-offset: -2px;
-  }
-
   @media (hover: hover) {
     &:hover {
       color: light-dark(var(--color-blue-700), var(--color-blue-500));
     }
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
+  }
 }
 
 .SelectIcon {
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
index 5307668f844..5d0579587d3 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleToolbar() {
           render={<Toggle />}
           aria-label="Align left"
           value="align-left"
-          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-pressed:bg-gray-950 data-pressed:text-white data-[popup-open]:bg-gray-100 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-pressed:bg-white dark:data-pressed:text-gray-950 dark:data-[popup-open]:bg-gray-800"
+          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:not-data-pressed:bg-gray-200 data-pressed:bg-gray-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-gray-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-gray-100 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:not-data-pressed:bg-gray-700 dark:data-pressed:bg-white dark:data-pressed:text-gray-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-gray-950 dark:data-[popup-open]:bg-gray-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         >
           Align Left
         </Toolbar.Button>
@@ -20,7 +20,7 @@ export default function ExampleToolbar() {
           render={<Toggle />}
           aria-label="Align right"
           value="align-right"
-          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-pressed:bg-gray-950 data-pressed:text-white data-[popup-open]:bg-gray-100 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-pressed:bg-white dark:data-pressed:text-gray-950 dark:data-[popup-open]:bg-gray-800"
+          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:not-data-pressed:bg-gray-200 data-pressed:bg-gray-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-gray-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-gray-100 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:not-data-pressed:bg-gray-700 dark:data-pressed:bg-white dark:data-pressed:text-gray-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-gray-950 dark:data-[popup-open]:bg-gray-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         >
           Align Right
         </Toolbar.Button>
@@ -28,13 +28,13 @@ export default function ExampleToolbar() {
       <Toolbar.Separator className="m-1 h-4 w-px bg-gray-950 dark:bg-white" />
       <Toolbar.Group className="flex" aria-label="Numerical format">
         <Toolbar.Button
-          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-pressed:bg-gray-950 data-pressed:text-white data-[popup-open]:bg-gray-100 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-pressed:bg-white dark:data-pressed:text-gray-950 dark:data-[popup-open]:bg-gray-800"
+          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:not-data-pressed:bg-gray-200 data-pressed:bg-gray-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-gray-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-gray-100 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:not-data-pressed:bg-gray-700 dark:data-pressed:bg-white dark:data-pressed:text-gray-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-gray-950 dark:data-[popup-open]:bg-gray-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           aria-label="Format as currency"
         >
           $
         </Toolbar.Button>
         <Toolbar.Button
-          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-pressed:bg-gray-950 data-pressed:text-white data-[popup-open]:bg-gray-100 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-pressed:bg-white dark:data-pressed:text-gray-950 dark:data-[popup-open]:bg-gray-800"
+          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:not-data-pressed:bg-gray-200 data-pressed:bg-gray-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-gray-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-gray-100 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:not-data-pressed:bg-gray-700 dark:data-pressed:bg-white dark:data-pressed:text-gray-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-gray-950 dark:data-[popup-open]:bg-gray-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           aria-label="Format as percent"
         >
           %
@@ -44,7 +44,7 @@ export default function ExampleToolbar() {
       <Select.Root defaultValue="Helvetica">
         <Toolbar.Button
           render={<Select.Trigger />}
-          className="flex h-8 min-w-32 cursor-default items-center justify-between border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-pressed:bg-gray-950 data-pressed:text-white data-[popup-open]:bg-gray-100 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-pressed:bg-white dark:data-pressed:text-gray-950 dark:data-[popup-open]:bg-gray-800"
+          className="flex h-8 min-w-32 cursor-default items-center justify-between border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:not-data-pressed:bg-gray-200 data-pressed:bg-gray-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-gray-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-gray-100 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:not-data-pressed:bg-gray-700 dark:data-pressed:bg-white dark:data-pressed:text-gray-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-gray-950 dark:data-[popup-open]:bg-gray-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         >
           <Select.Value />
           <Select.Icon className="flex">
@@ -78,7 +78,7 @@ export default function ExampleToolbar() {
       </Select.Root>
       <Toolbar.Separator className="m-1 h-4 w-px bg-gray-950 dark:bg-white" />
       <Toolbar.Link
-        className="mr-[0.875rem] ml-auto flex-none self-center font-[inherit] text-sm leading-5 text-gray-500 no-underline hover:text-blue-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-gray-400 dark:hover:text-blue-500"
+        className="mr-[0.875rem] ml-auto flex-none self-center font-[inherit] text-sm leading-5 text-gray-500 no-underline hover:text-blue-700 dark:text-gray-400 dark:hover:text-blue-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         href="#"
       >
         Edited 51m ago
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
index 8cbacc3b6ff..8bacae0ed87 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
@@ -24,24 +24,29 @@
     background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
-  &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
-    outline-offset: -2px;
-  }
-
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &:not(:first-child) {
     border-left: none;
   }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
+  }
 }
 
 .Icon {
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
index 40823e4c724..cf7c972fc76 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
@@ -22,20 +22,20 @@
     background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
-  &:focus-visible {
-    background-color: transparent;
-    outline: 2px solid var(--color-blue-800);
-    outline-offset: -2px;
-  }
-
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &:focus-visible {
+    background-color: transparent;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
index 325ddd7ecee..402460bf020 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
@@ -27,24 +27,29 @@
     background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
   }
 
-  &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
-    outline-offset: -2px;
-  }
-
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
   }
 
   &:not(:first-child) {
     border-left: none;
   }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
+  }
 }
 
 .Icon {
@@ -148,13 +153,18 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
     }
   }
 
-  &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
   }
 
   &:focus-visible {

From 2ed24bb5c9fdabcdc94400bf2e868ef62387ef6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 29 Apr 2026 15:39:06 +0200
Subject: [PATCH 091/257] Menubar: chromeless

---
 .../menubar/demos/hero/css-modules/index.module.css           | 4 ----
 .../react/components/menubar/demos/hero/css-modules/index.tsx | 2 +-
 .../react/components/menubar/demos/hero/tailwind/index.tsx    | 4 ++--
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
index 8491ae7ecb6..1ecf0adea88 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
@@ -1,10 +1,6 @@
 .Menubar {
-  box-sizing: border-box;
   display: flex;
   align-items: center;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  padding: 1px;
 }
 
 .MenuTrigger {
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
index d90f69f4de1..cc009427af6 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
@@ -10,7 +10,7 @@ export default function ExampleMenubar() {
       <Menu.Root>
         <Menu.Trigger className={styles.MenuTrigger}>File</Menu.Trigger>
         <Menu.Portal>
-          <Menu.Positioner className={styles.MenuPositioner} sideOffset={6} alignOffset={-2}>
+          <Menu.Positioner className={styles.MenuPositioner} sideOffset={4}>
             <Menu.Popup className={styles.MenuPopup}>
               <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                 New
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
index c185280c367..e6853806407 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
@@ -5,13 +5,13 @@ import { Menu } from '@base-ui/react/menu';
 
 export default function ExampleMenubar() {
   return (
-    <Menubar className="flex items-center border border-gray-950 bg-white p-px dark:border-white dark:bg-gray-950">
+    <Menubar className="flex items-center">
       <Menu.Root>
         <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none data-popup-open:bg-gray-100 data-pressed:bg-gray-100 data-disabled:text-gray-500 dark:text-white dark:focus-visible:bg-gray-800 dark:data-popup-open:bg-gray-800 dark:data-pressed:bg-gray-800 dark:data-disabled:text-gray-400 focus-visible:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           File
         </Menu.Trigger>
         <Menu.Portal>
-          <Menu.Positioner className="outline-none" sideOffset={6} alignOffset={-2}>
+          <Menu.Positioner className="outline-none" sideOffset={4}>
             <Menu.Popup className="origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
               <Menu.Item
                 onClick={handleClick}

From 2e9533c589011e99b9ab00c52d2d4a6d4ea1a11e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 29 Apr 2026 15:43:12 +0200
Subject: [PATCH 092/257] NavigationMenu: chromeless

---
 .../navigation-menu/demos/hero/css-modules/index.module.css    | 3 ---
 .../components/navigation-menu/demos/hero/tailwind/index.tsx   | 2 +-
 .../demos/nested-inline/css-modules/index.module.css           | 3 ---
 .../navigation-menu/demos/nested-inline/tailwind/index.tsx     | 2 +-
 .../navigation-menu/demos/nested/css-modules/index.module.css  | 3 ---
 .../components/navigation-menu/demos/nested/tailwind/index.tsx | 2 +-
 6 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
index ecd1a5f9b20..28743c2ea5f 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
@@ -1,8 +1,5 @@
 .Root {
   box-sizing: border-box;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  padding: 1px;
   color: light-dark(var(--color-gray-950), white);
   min-width: max-content;
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
index 20d6fb7165e..a20a3dff360 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { NavigationMenu } from '@base-ui/react/navigation-menu';
 
 export default function ExampleNavigationMenu() {
   return (
-    <NavigationMenu.Root className="min-w-max border border-gray-950 bg-white p-px text-gray-950 dark:border-white dark:bg-gray-950 dark:text-white">
+    <NavigationMenu.Root className="min-w-max text-gray-950 dark:text-white">
       <NavigationMenu.List className="relative flex gap-px">
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
index 636e0303608..4b202786fc8 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
@@ -1,8 +1,5 @@
 .Root {
   box-sizing: border-box;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  padding: 1px;
   color: light-dark(var(--color-gray-950), white);
   min-width: max-content;
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
index b9698229670..6a33c9dcf9d 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleNavigationMenu() {
   const isDesktop = useMediaQuery('(min-width: 700px)', { defaultMatches: true });
 
   return (
-    <NavigationMenu.Root className="min-w-max border border-gray-950 bg-white p-px text-gray-950 dark:border-white dark:bg-gray-950 dark:text-white">
+    <NavigationMenu.Root className="min-w-max text-gray-950 dark:text-white">
       <NavigationMenu.List className="relative flex gap-px">
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
index 498258dbda6..fd15ad13e11 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
@@ -1,8 +1,5 @@
 .Root {
   box-sizing: border-box;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  padding: 1px;
   color: light-dark(var(--color-gray-950), white);
   min-width: max-content;
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
index 3acda9481f5..f30dc3f2826 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { NavigationMenu } from '@base-ui/react/navigation-menu';
 
 export default function ExampleNavigationMenu() {
   return (
-    <NavigationMenu.Root className="min-w-max border border-gray-950 bg-white p-px text-gray-950 dark:border-white dark:bg-gray-950 dark:text-white">
+    <NavigationMenu.Root className="min-w-max text-gray-950 dark:text-white">
       <NavigationMenu.List className="relative flex gap-px">
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>

From ad43381747cea9a6ace631cf5a72bed29c91be71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 29 Apr 2026 15:49:08 +0200
Subject: [PATCH 093/257] gray -> neutral

---
 .../accordion/demos/_index.module.css         |  8 +--
 .../accordion/demos/hero/tailwind/index.tsx   |  8 +--
 .../demos/multiple/tailwind/index.tsx         |  8 +--
 .../alert-dialog/demos/_index.module.css      | 22 +++----
 .../tailwind/index.tsx                        |  6 +-
 .../tailwind/index.tsx                        |  6 +-
 .../demos/hero/css-modules/index.module.css   | 22 +++----
 .../demos/hero/tailwind/index.tsx             |  6 +-
 .../demos/async/css-modules/index.module.css  | 26 ++++----
 .../demos/async/tailwind/index.tsx            | 12 ++--
 .../css-modules/index.module.css              | 22 +++----
 .../demos/auto-highlight/tailwind/index.tsx   | 10 ++--
 .../css-modules/index.module.css              | 44 +++++++-------
 .../demos/command-palette/tailwind/index.tsx  | 24 ++++----
 .../css-modules/index.module.css              | 22 +++----
 .../demos/fuzzy-matching/tailwind/index.tsx   | 12 ++--
 .../demos/grid/css-modules/index.module.css   | 44 +++++++-------
 .../demos/grid/tailwind/index.tsx             | 14 ++---
 .../grouped/css-modules/index.module.css      | 24 ++++----
 .../demos/grouped/tailwind/index.tsx          | 10 ++--
 .../demos/hero/css-modules/index.module.css   | 24 ++++----
 .../demos/hero/tailwind/index.tsx             | 10 ++--
 .../demos/inline/css-modules/index.module.css | 20 +++----
 .../demos/inline/tailwind/index.tsx           |  8 +--
 .../demos/limit/css-modules/index.module.css  | 24 ++++----
 .../demos/limit/tailwind/index.tsx            | 12 ++--
 .../virtualized/css-modules/index.module.css  | 22 +++----
 .../demos/virtualized/tailwind/index.tsx      | 10 ++--
 .../demos/hero/css-modules/index.module.css   |  4 +-
 .../avatar/demos/hero/tailwind/index.tsx      |  4 +-
 .../demos/hero/css-modules/index.module.css   | 14 ++---
 .../button/demos/hero/tailwind/index.tsx      |  2 +-
 .../loading/css-modules/index.module.css      | 14 ++---
 .../button/demos/loading/tailwind/index.tsx   |  2 +-
 .../demos/hero/css-modules/index.module.css   | 12 ++--
 .../demos/hero/tailwind/index.tsx             | 14 ++---
 .../demos/nested/css-modules/index.module.css | 12 ++--
 .../demos/parent/css-modules/index.module.css | 12 ++--
 .../demos/hero/css-modules/index.module.css   | 12 ++--
 .../checkbox/demos/hero/tailwind/index.tsx    |  4 +-
 .../demos/hero/css-modules/index.module.css   | 16 ++---
 .../collapsible/demos/hero/tailwind/index.tsx |  4 +-
 .../css-modules/index.module.css              | 38 ++++++------
 .../demos/async-multiple/tailwind/index.tsx   | 22 +++----
 .../async-single/css-modules/index.module.css | 30 +++++-----
 .../demos/async-single/tailwind/index.tsx     | 18 +++---
 .../creatable/css-modules/index.module.css    | 56 ++++++++---------
 .../demos/creatable/tailwind/index.tsx        | 28 ++++-----
 .../grouped/css-modules/index.module.css      | 26 ++++----
 .../combobox/demos/grouped/tailwind/index.tsx | 16 ++---
 .../demos/hero/css-modules/index.module.css   | 26 ++++----
 .../combobox/demos/hero/tailwind/index.tsx    | 14 ++---
 .../css-modules/index.module.css              | 32 +++++-----
 .../input-inside-popup/tailwind/index.tsx     | 12 ++--
 .../multiple/css-modules/index.module.css     | 34 +++++------
 .../demos/multiple/tailwind/index.tsx         | 16 ++---
 .../virtualized/css-modules/index.module.css  | 22 +++----
 .../demos/virtualized/tailwind/index.tsx      | 10 ++--
 .../demos/hero/css-modules/index.module.css   | 20 +++----
 .../demos/hero/tailwind/index.tsx             | 10 ++--
 .../submenu/css-modules/index.module.css      | 30 +++++-----
 .../demos/submenu/tailwind/index.tsx          | 14 ++---
 .../components/dialog/demos/_index.module.css | 22 +++----
 .../css-modules/index.module.css              | 28 ++++-----
 .../close-confirmation/tailwind/index.tsx     | 18 +++---
 .../tailwind/index.tsx                        | 12 ++--
 .../tailwind/index.tsx                        |  8 +--
 .../demos/hero/css-modules/index.module.css   | 22 +++----
 .../dialog/demos/hero/tailwind/index.tsx      |  8 +--
 .../css-modules/index.module.css              | 28 ++++-----
 .../demos/inside-scroll/tailwind/index.tsx    | 14 ++---
 .../demos/nested/css-modules/index.module.css | 26 ++++----
 .../dialog/demos/nested/tailwind/index.tsx    | 14 ++---
 .../css-modules/index.module.css              | 36 +++++------
 .../demos/outside-scroll/tailwind/index.tsx   | 16 ++---
 .../uncontained/css-modules/index.module.css  | 34 +++++------
 .../demos/uncontained/tailwind/index.tsx      |  6 +-
 .../demos/hero/css-modules/index.module.css   | 20 +++----
 .../drawer/demos/hero/tailwind/index.tsx      |  8 +--
 .../css-modules/index.module.css              | 30 +++++-----
 .../demos/indent-provider/tailwind/index.tsx  | 14 ++---
 .../mobile-nav/css-modules/index.module.css   | 40 ++++++-------
 .../demos/mobile-nav/tailwind/index.tsx       | 16 ++---
 .../demos/nested/css-modules/index.module.css | 32 +++++-----
 .../drawer/demos/nested/tailwind/index.tsx    | 28 ++++-----
 .../non-modal/css-modules/index.module.css    | 20 +++----
 .../drawer/demos/non-modal/tailwind/index.tsx |  8 +--
 .../position/css-modules/index.module.css     | 22 +++----
 .../drawer/demos/position/tailwind/index.tsx  | 10 ++--
 .../snap-points/css-modules/index.module.css  | 30 +++++-----
 .../demos/snap-points/tailwind/index.tsx      | 14 ++---
 .../swipe-area/css-modules/index.module.css   | 28 ++++-----
 .../demos/swipe-area/tailwind/index.tsx       | 10 ++--
 .../uncontained/css-modules/index.module.css  | 32 +++++-----
 .../demos/uncontained/tailwind/index.tsx      | 12 ++--
 .../demos/hero/css-modules/index.module.css   | 10 ++--
 .../field/demos/hero/tailwind/index.tsx       |  6 +-
 .../demos/hero/css-modules/index.module.css   | 14 ++---
 .../fieldset/demos/hero/tailwind/index.tsx    | 10 ++--
 .../form-action/css-modules/index.module.css  | 22 +++----
 .../form/demos/form-action/tailwind/index.tsx |  6 +-
 .../demos/hero/css-modules/index.module.css   | 22 +++----
 .../form/demos/hero/tailwind/index.tsx        |  6 +-
 .../demos/zod/css-modules/index.module.css    | 22 +++----
 .../form/demos/zod/tailwind/index.tsx         | 14 +++--
 .../demos/hero/css-modules/index.module.css   |  8 +--
 .../input/demos/hero/tailwind/index.tsx       |  4 +-
 .../components/menu/demos/_index.module.css   | 52 ++++++++--------
 .../css-modules/index.module.css              | 34 +++++------
 .../demos/checkbox-items/tailwind/index.tsx   |  8 +--
 .../tailwind/index.tsx                        |  8 +--
 .../detached-triggers-full/tailwind/index.tsx | 26 ++++----
 .../tailwind/index.tsx                        | 10 ++--
 .../group-labels/css-modules/index.module.css | 36 +++++------
 .../demos/group-labels/tailwind/index.tsx     | 14 ++---
 .../demos/hero/css-modules/index.module.css   | 34 +++++------
 .../menu/demos/hero/tailwind/index.tsx        | 12 ++--
 .../css-modules/index.module.css              | 34 +++++------
 .../demos/open-on-hover/tailwind/index.tsx    | 10 ++--
 .../radio-items/css-modules/index.module.css  | 34 +++++------
 .../menu/demos/radio-items/tailwind/index.tsx |  8 +--
 .../submenu/css-modules/index.module.css      | 38 ++++++------
 .../menu/demos/submenu/tailwind/index.tsx     | 18 +++---
 .../demos/hero/css-modules/index.module.css   | 28 ++++-----
 .../menubar/demos/hero/tailwind/index.tsx     | 58 +++++++++---------
 .../demos/hero/css-modules/index.module.css   |  8 +--
 .../meter/demos/hero/tailwind/index.tsx       |  8 +--
 .../demos/hero/css-modules/index.module.css   | 24 ++++----
 .../demos/hero/tailwind/index.tsx             | 14 ++---
 .../css-modules/index.module.css              | 40 ++++++-------
 .../demos/nested-inline/tailwind/index.tsx    | 32 +++++-----
 .../demos/nested/css-modules/index.module.css | 24 ++++----
 .../demos/nested/tailwind/index.tsx           | 18 +++---
 .../demos/hero/css-modules/index.module.css   | 24 ++++----
 .../demos/hero/tailwind/index.tsx             |  6 +-
 .../alphanumeric/css-modules/index.module.css |  8 +--
 .../demos/alphanumeric/tailwind/index.tsx     |  9 ++-
 .../css-modules/index.module.css              |  8 +--
 .../css-modules/index.module.css              | 10 ++--
 .../focused-placeholder/tailwind/index.tsx    |  9 ++-
 .../grouped/css-modules/index.module.css      |  8 +--
 .../demos/grouped/tailwind/index.tsx          |  8 +--
 .../demos/hero/css-modules/index.module.css   |  8 +--
 .../otp-field/demos/hero/tailwind/index.tsx   |  9 ++-
 .../password/css-modules/index.module.css     |  8 +--
 .../demos/password/tailwind/index.tsx         |  9 ++-
 .../popover/demos/_index.module.css           | 38 ++++++------
 .../tailwind/index.tsx                        | 14 ++---
 .../css-modules/index.module.css              | 36 +++++------
 .../detached-triggers-full/tailwind/index.tsx | 22 +++----
 .../tailwind/index.tsx                        |  8 +--
 .../popover/demos/hero/tailwind/index.tsx     |  8 +--
 .../demos/open-on-hover/tailwind/index.tsx    |  8 +--
 .../tailwind/index.tsx                        | 14 ++---
 .../css-modules/index.module.css              | 14 ++---
 .../detached-triggers-full/tailwind/index.tsx | 12 ++--
 .../tailwind/index.tsx                        |  8 +--
 .../demos/hero/tailwind/index.tsx             |  8 +--
 .../preview-card/demos/index.module.css       | 24 ++++----
 .../demos/hero/css-modules/index.module.css   |  8 +--
 .../progress/demos/hero/tailwind/index.tsx    |  8 +--
 .../demos/hero/css-modules/index.module.css   | 12 ++--
 .../radio/demos/hero/tailwind/index.tsx       | 14 ++---
 .../demos/both/css-modules/index.module.css   |  8 +--
 .../scroll-area/demos/both/tailwind/index.tsx |  8 +--
 .../demos/hero/css-modules/index.module.css   |  8 +--
 .../scroll-area/demos/hero/tailwind/index.tsx |  8 +--
 .../scroll-fade/css-modules/index.module.css  |  8 +--
 .../demos/scroll-fade/tailwind/index.tsx      |  8 +--
 .../grouped/css-modules/index.module.css      | 38 ++++++------
 .../select/demos/grouped/tailwind/index.tsx   | 18 +++---
 .../demos/hero/css-modules/index.module.css   | 32 +++++-----
 .../select/demos/hero/tailwind/index.tsx      | 14 ++---
 .../multiple/css-modules/index.module.css     | 30 +++++-----
 .../select/demos/multiple/tailwind/index.tsx  | 10 ++--
 .../css-modules/index.module.css              | 36 +++++------
 .../demos/object-values/tailwind/index.tsx    | 16 ++---
 .../demos/hero/css-modules/index.module.css   |  6 +-
 .../separator/demos/hero/tailwind/index.tsx   | 14 ++---
 .../css-modules/index.module.css              |  8 +--
 .../demos/edge-alignment/tailwind/index.tsx   |  6 +-
 .../demos/hero/css-modules/index.module.css   |  8 +--
 .../slider/demos/hero/tailwind/index.tsx      |  6 +-
 .../range-slider/css-modules/index.module.css |  8 +--
 .../demos/range-slider/tailwind/index.tsx     |  8 +--
 .../vertical/css-modules/index.module.css     |  8 +--
 .../slider/demos/vertical/tailwind/index.tsx  |  6 +-
 .../demos/hero/css-modules/index.module.css   | 12 ++--
 .../switch/demos/hero/tailwind/index.tsx      |  6 +-
 .../demos/hero/css-modules/index.module.css   | 20 +++----
 .../tabs/demos/hero/tailwind/index.tsx        | 20 +++----
 .../anchored/css-modules/index.module.css     | 60 +++++++++----------
 .../toast/demos/anchored/tailwind/index.tsx   | 16 ++---
 .../demos/custom/css-modules/index.module.css | 30 +++++-----
 .../deduplicate/css-modules/index.module.css  | 30 +++++-----
 .../demos/hero/css-modules/index.module.css   | 30 +++++-----
 .../toast/demos/hero/tailwind/index.tsx       |  6 +-
 .../position/css-modules/index.module.css     | 30 +++++-----
 .../toast/demos/position/tailwind/index.tsx   |  6 +-
 .../promise/css-modules/index.module.css      | 30 +++++-----
 .../demos/undo/css-modules/index.module.css   | 30 +++++-----
 .../css-modules/index.module.css              | 30 +++++-----
 .../demos/hero/css-modules/index.module.css   | 16 ++---
 .../demos/hero/tailwind/index.tsx             |  8 +--
 .../multiple/css-modules/index.module.css     | 16 ++---
 .../demos/multiple/tailwind/index.tsx         |  8 +--
 .../demos/hero/css-modules/index.module.css   |  8 +--
 .../toggle/demos/hero/tailwind/index.tsx      |  2 +-
 .../demos/hero/css-modules/index.module.css   | 34 +++++------
 .../toolbar/demos/hero/tailwind/index.tsx     | 26 ++++----
 .../tailwind/index.tsx                        |  8 +--
 .../css-modules/index.module.css              | 26 ++++----
 .../detached-triggers-full/tailwind/index.tsx | 10 ++--
 .../tailwind/index.tsx                        |  6 +-
 .../demos/hero/css-modules/index.module.css   | 22 +++----
 .../tooltip/demos/hero/tailwind/index.tsx     |  8 +--
 .../components/tooltip/demos/index.module.css | 40 ++++++-------
 .../css-modules/index.module.css              | 22 +++----
 .../css-modules/index.module.css              | 22 +++----
 .../css-modules/index.module.css              | 26 ++++----
 .../forms/demos/components/autocomplete.tsx   |  6 +-
 .../forms/demos/components/button.tsx         |  2 +-
 .../forms/demos/components/checkbox-group.tsx |  2 +-
 .../forms/demos/components/checkbox.tsx       |  4 +-
 .../forms/demos/components/combobox.tsx       |  8 +--
 .../handbook/forms/demos/components/field.tsx |  6 +-
 .../forms/demos/components/fieldset.tsx       |  2 +-
 .../forms/demos/components/number-field.tsx   |  6 +-
 .../forms/demos/components/radio-group.tsx    |  2 +-
 .../handbook/forms/demos/components/radio.tsx |  4 +-
 .../forms/demos/components/select.tsx         | 10 ++--
 .../forms/demos/components/slider.tsx         | 11 ++--
 .../forms/demos/components/switch.tsx         |  4 +-
 .../handbook/forms/demos/components/toast.tsx |  8 +--
 .../forms/demos/hero/tailwind/index.tsx       |  4 +-
 .../demos/react-hook-form/tailwind/index.tsx  |  4 +-
 .../demos/tanstack-form/tailwind/index.tsx    |  4 +-
 .../(docs)/react/handbook/styling/page.mdx    |  8 +--
 .../demos/hero/css-modules/index.module.css   |  8 +--
 .../demos/hero/tailwind/index.tsx             |  6 +-
 .../css-modules/index.module.css              | 12 ++--
 .../css-modules/index.module.css              | 10 ++--
 .../demos/render/css-modules/index.module.css |  2 +-
 docs/src/css/index.css                        | 22 +++----
 244 files changed, 2031 insertions(+), 2008 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
index 457e3de6805..0739bb3a0e0 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
@@ -4,8 +4,8 @@
   width: 20rem;
   max-width: 100%;
   flex-direction: column;
-  border-bottom: 1px solid light-dark(var(--color-gray-950), white);
-  color: light-dark(var(--color-gray-950), white);
+  border-bottom: 1px solid light-dark(var(--color-neutral-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Header {
@@ -22,10 +22,10 @@
   padding: 0.5rem 0;
   margin: 0;
   border: none;
-  border-top: 1px solid light-dark(var(--color-gray-950), white);
+  border-top: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
   background-color: transparent;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
index 132123013db..44b9114595a 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
@@ -3,10 +3,10 @@ import { Accordion } from '@base-ui/react/accordion';
 
 export default function ExampleAccordion() {
   return (
-    <Accordion.Root className="flex w-80 max-w-full flex-col border-b border-gray-950 text-gray-950 dark:border-white dark:text-white">
+    <Accordion.Root className="flex w-80 max-w-full flex-col border-b border-neutral-950 text-neutral-950 dark:border-white dark:text-white">
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             What is Base UI?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -21,7 +21,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             How do I get started?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -36,7 +36,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             Can I use it for my project?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
index cc1a8d998bd..6e478a9ba7c 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
@@ -5,11 +5,11 @@ export default function ExampleAccordion() {
   return (
     <Accordion.Root
       multiple
-      className="flex w-80 max-w-full flex-col border-b border-gray-950 text-gray-950 dark:border-white dark:text-white"
+      className="flex w-80 max-w-full flex-col border-b border-neutral-950 text-neutral-950 dark:border-white dark:text-white"
     >
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             What is Base UI?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -24,7 +24,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             How do I get started?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -39,7 +39,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-gray-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-gray-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             Can I use it for my project?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
index 90a9b79365c..f0d6f44f5c7 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
@@ -6,23 +6,23 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &:focus-visible {
@@ -31,8 +31,8 @@
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 }
 
@@ -73,9 +73,9 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 0.75rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 100ms ease-out,
@@ -103,7 +103,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 93697b6261d..c0a0d28d99a 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -7,7 +7,7 @@ type AlertPayload = { message: string };
 const demoAlertDialog = AlertDialog.createHandle<AlertPayload>();
 
 const buttonClasses =
-  'flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400';
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
@@ -71,11 +71,11 @@ export default function AlertDialogDetachedTriggersControlledDemo() {
         {({ payload }) => (
           <AlertDialog.Portal>
             <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-            <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+            <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
               <AlertDialog.Title className="text-sm font-bold">
                 {payload?.message ?? 'Are you sure?'}
               </AlertDialog.Title>
-              <AlertDialog.Description className="text-sm text-gray-600 dark:text-gray-400">
+              <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
                 This action cannot be undone.
               </AlertDialog.Description>
               <div className="flex justify-end gap-3 mt-4">
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
index c34fe62baf5..2d88963776b 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { AlertDialog } from '@base-ui/react/alert-dialog';
 const demoAlertDialog = AlertDialog.createHandle();
 
 const buttonClasses =
-  'flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400';
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
@@ -19,9 +19,9 @@ export default function AlertDialogDetachedTriggersSimpleDemo() {
       <AlertDialog.Root handle={demoAlertDialog}>
         <AlertDialog.Portal>
           <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-          <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+          <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
             <AlertDialog.Title className="text-sm font-bold">Discard draft?</AlertDialog.Title>
-            <AlertDialog.Description className="text-sm text-gray-600 dark:text-gray-400">
+            <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
               This action cannot be undone.
             </AlertDialog.Description>
             <div className="flex justify-end gap-3 mt-4">
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
index e36c2a79e24..e9189caf6ca 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
@@ -6,13 +6,13 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   &[data-color='red'] {
@@ -21,12 +21,12 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &:focus-visible {
@@ -35,8 +35,8 @@
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 }
 
@@ -73,9 +73,9 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 0.75rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 100ms ease-out,
@@ -103,7 +103,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
index 7f7e494ef61..eeb43bb5455 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
@@ -1,7 +1,7 @@
 import { AlertDialog } from '@base-ui/react/alert-dialog';
 
 const buttonClasses =
-  'flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400';
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
@@ -11,9 +11,9 @@ export default function ExampleAlertDialog() {
       <AlertDialog.Trigger className={dangerButtonClasses}>Discard draft</AlertDialog.Trigger>
       <AlertDialog.Portal>
         <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <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 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+        <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
           <AlertDialog.Title className="text-sm font-bold">Discard draft?</AlertDialog.Title>
-          <AlertDialog.Description className="text-sm text-gray-600 dark:text-gray-400">
+          <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
             You can’t undo this action.
           </AlertDialog.Description>
           <div className="flex justify-end gap-3 mt-4">
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
index ae8d7f09077..7087bf585b3 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
@@ -2,7 +2,7 @@
   box-sizing: border-box;
   padding-left: 0.875rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   width: 16rem;
   height: 2.5rem;
   border-radius: 0.375rem;
@@ -10,7 +10,7 @@
   font-size: 1rem;
   font-weight: 400;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   outline: none;
 
   &:focus {
@@ -30,7 +30,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
 }
 
 .Positioner {
@@ -42,7 +42,7 @@
   padding-block: 0.5rem;
   border-radius: 0.375rem;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   width: var(--anchor-width);
   max-height: min(var(--available-height), 23rem);
   max-width: var(--available-width);
@@ -51,14 +51,14 @@
   overscroll-behavior: contain;
 
   @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
+    outline: 1px solid var(--color-neutral-200);
     box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-neutral-200),
+      0 4px 6px -4px var(--color-neutral-200);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
     outline-offset: -1px;
   }
 }
@@ -78,7 +78,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: var(--color-neutral-50);
   }
 
   &[data-highlighted]::before {
@@ -88,7 +88,7 @@
     inset-block: 0;
     inset-inline: 0.5rem;
     border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    background-color: var(--color-neutral-900);
   }
 }
 
@@ -119,15 +119,15 @@
   padding-right: 2rem;
   font-size: 0.875rem;
   text-align: center;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
 }
 
 .Spinner {
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border: 2px solid var(--color-gray-200);
-  border-top: 2px solid var(--color-gray-600);
+  border: 2px solid var(--color-neutral-200);
+  border-top: 2px solid var(--color-neutral-600);
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
index 435c339c9ad..759ae661d85 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function ExampleAsyncAutocomplete() {
       return (
         <React.Fragment>
           <div
-            className="size-4 rounded-full border-2 border-gray-200 border-t-gray-600 animate-spin"
+            className="size-4 rounded-full border-2 border-neutral-200 border-t-neutral-600 animate-spin"
             aria-hidden
           />
           Searching…
@@ -77,23 +77,23 @@ export default function ExampleAsyncAutocomplete() {
       itemToStringValue={(item) => item.title}
       filter={null}
     >
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-gray-900">
+      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-900">
         Search movies by name or year
         <Autocomplete.Input
           placeholder="e.g. Pulp Fiction or 1994"
-          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-gray-200 pl-3.5 text-base font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-neutral-200 pl-3.5 text-base font-normal text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
         />
       </label>
 
       <Autocomplete.Portal hidden={!status}>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4} align="start">
           <Autocomplete.Popup
-            className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-[canvas] py-2 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300"
+            className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-[canvas] py-2 text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300"
             aria-busy={isPending || undefined}
           >
             <Autocomplete.Status>
               {status && (
-                <div className="flex items-center gap-2 py-1 pl-4 pr-8 text-sm text-gray-600">
+                <div className="flex items-center gap-2 py-1 pl-4 pr-8 text-sm text-neutral-600">
                   {status}
                 </div>
               )}
@@ -102,7 +102,7 @@ export default function ExampleAsyncAutocomplete() {
               {(movie: Movie) => (
                 <Autocomplete.Item
                   key={movie.id}
-                  className="flex cursor-default py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                  className="flex cursor-default py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900"
                   value={movie}
                 >
                   <span className="flex w-full flex-col gap-1">
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
index 2aeb94e5b24..faeceeecbe7 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
@@ -2,7 +2,7 @@
   box-sizing: border-box;
   padding-left: 0.875rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   width: 16rem;
   height: 2.5rem;
   border-radius: 0.375rem;
@@ -10,7 +10,7 @@
   font-size: 1rem;
   font-weight: 400;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   outline: none;
 
   &:focus {
@@ -30,7 +30,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
 }
 
 .Positioner {
@@ -41,20 +41,20 @@
   box-sizing: border-box;
   border-radius: 0.375rem;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   width: var(--anchor-width);
   max-height: 23rem;
   max-width: var(--available-width);
 
   @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
+    outline: 1px solid var(--color-neutral-200);
     box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-neutral-200),
+      0 4px 6px -4px var(--color-neutral-200);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
     outline-offset: -1px;
   }
 }
@@ -88,7 +88,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: var(--color-neutral-50);
   }
 
   &[data-highlighted]::before {
@@ -98,7 +98,7 @@
     inset-block: 0;
     inset-inline: 0.5rem;
     border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    background-color: var(--color-neutral-900);
   }
 }
 
@@ -107,5 +107,5 @@
   padding: 1rem;
   font-size: 0.925rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
index dd3b01a478c..2610773ba6f 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
@@ -4,25 +4,25 @@ import { Autocomplete } from '@base-ui/react/autocomplete';
 export default function ExampleAutocompleteAutoHighlight() {
   return (
     <Autocomplete.Root items={tags} autoHighlight>
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-gray-900">
+      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-900">
         Auto highlight on type
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-gray-200 pl-3.5 text-base font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-neutral-200 pl-3.5 text-base font-normal text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
         />
       </label>
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] rounded-md bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] rounded-md bg-[canvas] text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300">
             <Autocomplete.Empty>
-              <div className="p-4 text-[0.925rem] leading-4 text-gray-600">No tags found.</div>
+              <div className="p-4 text-[0.925rem] leading-4 text-neutral-600">No tags found.</div>
             </Autocomplete.Empty>
             <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-[empty]:p-0">
               {(tag: Tag) => (
                 <Autocomplete.Item
                   key={tag.id}
-                  className="flex cursor-default items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                  className="flex cursor-default items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900"
                   value={tag}
                 >
                   {tag.value}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
index ed2f920cd29..5bb73e637e4 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
@@ -7,25 +7,25 @@
   padding: 0 0.875rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  background-color: var(--color-neutral-50);
   font-family: inherit;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   user-select: none;
   cursor: default;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: var(--color-neutral-100);
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 
   &:focus-visible {
@@ -68,7 +68,7 @@
   max-width: 28rem;
   border-radius: 1rem;
   background-color: white;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   transition:
     transform 150ms,
     opacity 150ms;
@@ -104,24 +104,24 @@
   padding: 1rem;
   margin: 0;
   border: none;
-  border-bottom: 1px solid var(--color-gray-100);
+  border-bottom: 1px solid var(--color-neutral-100);
   width: 100%;
   height: auto;
   border-radius: 0;
   font-family: inherit;
   font-size: 1rem;
   background-color: transparent;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   letter-spacing: 0.016em;
   outline: none;
 
   &::placeholder {
     font-weight: 400;
-    color: var(--color-gray-500);
+    color: var(--color-neutral-500);
   }
 
   &:focus {
-    border-bottom-color: var(--color-gray-100);
+    border-bottom-color: var(--color-neutral-100);
     outline: none;
   }
 }
@@ -177,7 +177,7 @@
   letter-spacing: 0.00625em;
   line-height: 1;
   font-weight: 400;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
 }
 
 .Item {
@@ -199,7 +199,7 @@
   font-weight: 400;
 
   &[data-highlighted] {
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 }
 
@@ -213,12 +213,12 @@
 
 .ItemType {
   font-size: 0.875rem;
-  color: var(--color-gray-500);
+  color: var(--color-neutral-500);
   letter-spacing: 0.00625em;
   white-space: nowrap;
 
   [data-highlighted] & {
-    color: var(--color-gray-700);
+    color: var(--color-neutral-700);
   }
 }
 
@@ -230,7 +230,7 @@
   padding: 1rem;
   font-size: 0.925rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
   min-height: 8rem;
 }
 
@@ -254,7 +254,7 @@
     height: 100%;
     width: 0.25rem;
     border-radius: 0.25rem;
-    background-color: var(--color-gray-400);
+    background-color: var(--color-neutral-400);
   }
 }
 
@@ -263,10 +263,10 @@
   align-items: center;
   justify-content: space-between;
   padding: 0.625rem 0.75rem;
-  border-top: 1px solid var(--color-gray-200);
+  border-top: 1px solid var(--color-neutral-200);
   font-size: 0.75rem;
-  color: var(--color-gray-600);
-  background-color: var(--color-gray-50);
+  color: var(--color-neutral-600);
+  background-color: var(--color-neutral-50);
   border-radius: 0 0 1rem 1rem;
 }
 
@@ -289,9 +289,9 @@
     ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
   font-weight: 400;
   line-height: 1;
-  color: var(--color-gray-700);
-  background-color: var(--color-gray-100);
-  border: 1px solid var(--color-gray-300);
+  color: var(--color-neutral-700);
+  background-color: var(--color-neutral-100);
+  border: 1px solid var(--color-neutral-300);
   border-radius: 0.25rem;
 }
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
index c35599d1aeb..b679d75a88a 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
@@ -13,14 +13,14 @@ export default function ExampleAutocompleteCommandPalette() {
 
   return (
     <Dialog.Root open={open} onOpenChange={setOpen}>
-      <Dialog.Trigger className="flex h-10 cursor-default items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal 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">
+      <Dialog.Trigger className="flex h-10 cursor-default items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
         Open command palette
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 ease-[cubic-bezier(0.45,1.005,0,1.005)] data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="fixed inset-0 flex items-start justify-center overflow-hidden px-2 pt-18 pb-2">
           <Dialog.Popup
-            className="relative flex max-h-[min(36rem,calc(100dvh-5rem))] w-[calc(100vw-1rem)] max-w-[28rem] flex-col overflow-hidden rounded-2xl bg-white text-gray-900 outline-1 outline-black/4 shadow-[0_.5px_1px_hsl(0_0%_0%/12%),0_1px_3px_-1px_hsl(0_0%_0%/4%),0_2px_4px_-1px_hsl(0_0%_0%/4%),0_4px_8px_-2px_hsl(0_0%_0%/4%),0_12px_14px_-4px_hsl(0_0%_0%/4%),0_24px_64px_-8px_hsl(0_0%_0%/4%),0_40px_48px_-32px_hsl(0_0%_0%/4%)] transition-[opacity,transform,scale,translate] duration-150 data-ending-style:-translate-y-4 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:-translate-y-4 data-starting-style:scale-95 data-starting-style:opacity-0 dark:bg-[oklch(20%_0.5%_264deg)] dark:outline-white/25"
+            className="relative flex max-h-[min(36rem,calc(100dvh-5rem))] w-[calc(100vw-1rem)] max-w-[28rem] flex-col overflow-hidden rounded-2xl bg-white text-neutral-900 outline-1 outline-black/4 shadow-[0_.5px_1px_hsl(0_0%_0%/12%),0_1px_3px_-1px_hsl(0_0%_0%/4%),0_2px_4px_-1px_hsl(0_0%_0%/4%),0_4px_8px_-2px_hsl(0_0%_0%/4%),0_12px_14px_-4px_hsl(0_0%_0%/4%),0_24px_64px_-8px_hsl(0_0%_0%/4%),0_40px_48px_-32px_hsl(0_0%_0%/4%)] transition-[opacity,transform,scale,translate] duration-150 data-ending-style:-translate-y-4 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:-translate-y-4 data-starting-style:scale-95 data-starting-style:opacity-0 dark:bg-[oklch(20%_0.5%_264deg)] dark:outline-white/25"
             aria-label="Command palette"
           >
             <Autocomplete.Root
@@ -31,7 +31,7 @@ export default function ExampleAutocompleteCommandPalette() {
               keepHighlight
             >
               <Autocomplete.Input
-                className="w-full border-0 border-b border-gray-100 bg-transparent p-4 text-base font-normal tracking-[0.016em] text-gray-900 placeholder:text-gray-500 outline-none"
+                className="w-full border-0 border-b border-neutral-100 bg-transparent p-4 text-base font-normal tracking-[0.016em] text-neutral-900 placeholder:text-neutral-500 outline-none"
                 placeholder="Search for apps and commands…"
               />
               <Dialog.Close className="sr-only">Close command palette</Dialog.Close>
@@ -40,7 +40,7 @@ export default function ExampleAutocompleteCommandPalette() {
                 <ScrollArea.Viewport className="min-h-0 flex-1 overscroll-contain [scroll-padding-block:0.25rem] focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-blue-800">
                   <ScrollArea.Content style={{ minWidth: '100%' }}>
                     <Autocomplete.Empty>
-                      <div className="flex min-h-32 items-center justify-center p-4 text-[0.925rem] leading-4 text-gray-600">
+                      <div className="flex min-h-32 items-center justify-center p-4 text-[0.925rem] leading-4 text-neutral-600">
                         No results found.
                       </div>
                     </Autocomplete.Empty>
@@ -52,7 +52,7 @@ export default function ExampleAutocompleteCommandPalette() {
                           items={group.items}
                           className="not-last:mb-1"
                         >
-                          <Autocomplete.GroupLabel className="m-0 flex h-8 items-center px-3.5 text-[0.9375rem] tracking-[0.00625em] font-normal leading-none text-gray-600 select-none outline-none">
+                          <Autocomplete.GroupLabel className="m-0 flex h-8 items-center px-3.5 text-[0.9375rem] tracking-[0.00625em] font-normal leading-none text-neutral-600 select-none outline-none">
                             {group.value}
                           </Autocomplete.GroupLabel>
                           <Autocomplete.Collection>
@@ -61,10 +61,10 @@ export default function ExampleAutocompleteCommandPalette() {
                                 key={item.value}
                                 value={item}
                                 onClick={handleItemClick}
-                                className="grid min-h-8 cursor-default grid-cols-[minmax(0,1fr)_auto] items-center gap-2 rounded-md pl-9 pr-3 text-[0.9375rem] tracking-[0.016em] font-normal leading-[1.25] select-none outline-none [scroll-margin-block:0.25rem] data-[highlighted]:bg-gray-100"
+                                className="grid min-h-8 cursor-default grid-cols-[minmax(0,1fr)_auto] items-center gap-2 rounded-md pl-9 pr-3 text-[0.9375rem] tracking-[0.016em] font-normal leading-[1.25] select-none outline-none [scroll-margin-block:0.25rem] data-[highlighted]:bg-neutral-100"
                               >
                                 <span className="truncate font-normal">{item.label}</span>
-                                <span className="shrink-0 whitespace-nowrap text-[0.875rem] tracking-[0.00625em] text-gray-500 data-[highlighted]:text-gray-700">
+                                <span className="shrink-0 whitespace-nowrap text-[0.875rem] tracking-[0.00625em] text-neutral-500 data-[highlighted]:text-neutral-700">
                                   {group.value === 'Suggestions' ? 'Application' : 'Command'}
                                 </span>
                               </Autocomplete.Item>
@@ -76,23 +76,23 @@ export default function ExampleAutocompleteCommandPalette() {
                   </ScrollArea.Content>
                 </ScrollArea.Viewport>
                 <ScrollArea.Scrollbar className="-mr-1 flex w-6 justify-center py-2">
-                  <ScrollArea.Thumb className="flex w-full justify-center before:block before:h-full before:w-1 before:rounded-sm before:bg-gray-400 before:content-['']" />
+                  <ScrollArea.Thumb className="flex w-full justify-center before:block before:h-full before:w-1 before:rounded-sm before:bg-neutral-400 before:content-['']" />
                 </ScrollArea.Scrollbar>
               </ScrollArea.Root>
 
-              <div className="flex items-center justify-between border-t border-gray-200 bg-gray-50 px-3 py-2.5 text-xs text-gray-600">
+              <div className="flex items-center justify-between border-t border-neutral-200 bg-neutral-50 px-3 py-2.5 text-xs text-neutral-600">
                 <div className="flex items-center gap-2">
                   <span>Activate</span>
-                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center rounded border border-gray-300 bg-gray-100 px-1 text-[0.625rem] font-normal text-gray-700">
+                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center rounded border border-neutral-300 bg-neutral-100 px-1 text-[0.625rem] font-normal text-neutral-700">
                     Enter
                   </kbd>
                 </div>
                 <div className="flex items-center gap-2">
                   <span>Actions</span>
-                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center rounded border border-gray-300 bg-gray-100 px-1 text-[0.625rem] font-normal text-gray-700">
+                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center rounded border border-neutral-300 bg-neutral-100 px-1 text-[0.625rem] font-normal text-neutral-700">
                     Cmd
                   </kbd>
-                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center rounded border border-gray-300 bg-gray-100 px-1 text-[0.625rem] font-normal text-gray-700">
+                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center rounded border border-neutral-300 bg-neutral-100 px-1 text-[0.625rem] font-normal text-neutral-700">
                     K
                   </kbd>
                 </div>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
index 063ef01314e..a55805184d1 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
@@ -5,14 +5,14 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
 }
 
 .Input {
   box-sizing: border-box;
   padding-left: 0.875rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   width: 16rem;
   height: 2.5rem;
   border-radius: 0.375rem;
@@ -20,7 +20,7 @@
   font-size: 1rem;
   font-weight: 400;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   outline: none;
 
   @media (min-width: 500px) {
@@ -42,7 +42,7 @@
   padding-block: 0.5rem;
   border-radius: 0.375rem;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   width: var(--anchor-width);
   max-height: min(var(--available-height), 28rem);
   max-width: var(--available-width);
@@ -51,14 +51,14 @@
   overscroll-behavior: contain;
 
   @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
+    outline: 1px solid var(--color-neutral-200);
     box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-neutral-200),
+      0 4px 6px -4px var(--color-neutral-200);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
     outline-offset: -1px;
   }
 }
@@ -91,7 +91,7 @@
     inset-block: 0;
     inset-inline: 0.5rem;
     border-radius: 0.25rem;
-    background-color: var(--color-gray-200);
+    background-color: var(--color-neutral-200);
   }
 }
 
@@ -117,7 +117,7 @@
 
 .ItemDescription {
   font-size: 0.875rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
   line-height: 1.25rem;
 }
 
@@ -125,7 +125,7 @@
   box-sizing: border-box;
   font-size: 0.925rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
   padding: 0.5rem 1rem;
 }
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
index 779dcf99396..52cd58fff43 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
@@ -10,19 +10,19 @@ export default function ExampleFuzzyMatchingAutocomplete() {
       filter={fuzzyFilter}
       itemToStringValue={(item) => item.title}
     >
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-gray-900">
+      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-900">
         Fuzzy search documentation
         <Autocomplete.Input
           placeholder="e.g. React"
-          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-gray-200 pl-3.5 text-base font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-neutral-200 pl-3.5 text-base font-normal text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
         />
       </label>
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),28rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-[canvas] py-2 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),28rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-[canvas] py-2 text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300">
             <Autocomplete.Empty>
-              <div className="px-4 py-2 text-[0.925rem] leading-4 text-gray-600">
+              <div className="px-4 py-2 text-[0.925rem] leading-4 text-neutral-600">
                 No results found for "{<Autocomplete.Value />}"
               </div>
             </Autocomplete.Empty>
@@ -32,7 +32,7 @@ export default function ExampleFuzzyMatchingAutocomplete() {
                 <Autocomplete.Item
                   key={item.title}
                   value={item}
-                  className="flex cursor-default py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-200"
+                  className="flex cursor-default py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-200"
                 >
                   <Autocomplete.Value>
                     {(value) => (
@@ -42,7 +42,7 @@ export default function ExampleFuzzyMatchingAutocomplete() {
                             {highlightText(item.title, value)}
                           </span>
                         </span>
-                        <span className="text-sm leading-5 text-gray-600">
+                        <span className="text-sm leading-5 text-neutral-600">
                           {highlightText(item.description, value)}
                         </span>
                       </span>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
index 108d8eb5c83..4bc8d976a2f 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
@@ -13,7 +13,7 @@
   box-sizing: border-box;
   padding-left: 0.875rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   flex: 1;
   height: 2.5rem;
   border-radius: 0.375rem;
@@ -21,7 +21,7 @@
   font-size: 1rem;
   font-weight: 400;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   outline: none;
 
   &:focus {
@@ -34,18 +34,18 @@
   box-sizing: border-box;
   width: 2.5rem;
   height: 2.5rem;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
   background-color: canvas;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.25rem;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   outline: none;
 
   &:hover {
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 
   &:focus-visible {
@@ -55,7 +55,7 @@
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 }
 
@@ -70,12 +70,12 @@
   padding-right: 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
   font-family: inherit;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   cursor: default;
   user-select: none;
   min-width: 9rem;
@@ -83,12 +83,12 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: var(--color-neutral-100);
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 
   &:focus-visible {
@@ -117,14 +117,14 @@
   box-sizing: border-box;
   padding-left: 0.875rem;
   margin: 0;
-  border: 1px solid var(--color-gray-300);
+  border: 1px solid var(--color-neutral-300);
   width: 100%;
   height: 2.5rem;
   border-radius: 0.375rem;
   font-family: inherit;
   font-size: 1rem;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   outline: none;
 
   &:focus {
@@ -142,7 +142,7 @@
   box-sizing: border-box;
   border-radius: 0.5rem;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   transform-origin: var(--transform-origin);
   transition:
     transform 150ms,
@@ -157,14 +157,14 @@
   }
 
   @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
+    outline: 1px solid var(--color-neutral-200);
     box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-neutral-200),
+      0 4px 6px -4px var(--color-neutral-200);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
   }
 }
 
@@ -192,11 +192,11 @@
   padding: 0.5rem 1rem 0.25rem;
   font-size: 0.75rem;
   font-weight: 700;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
   text-transform: uppercase;
   letter-spacing: 0.025em;
   background-color: canvas;
-  border-bottom: 1px solid var(--color-gray-100);
+  border-bottom: 1px solid var(--color-neutral-100);
   position: sticky;
   z-index: 1;
   top: 0;
@@ -235,7 +235,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: var(--color-neutral-50);
 
     &::before {
       content: '';
@@ -243,7 +243,7 @@
       position: absolute;
       inset: 0;
       border-radius: 0.375rem;
-      background-color: var(--color-gray-200);
+      background-color: var(--color-neutral-200);
     }
   }
 }
@@ -275,5 +275,5 @@
   padding: 0.5rem 1rem 1rem;
   font-size: 0.925rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
index b227938047b..8e09d3653fb 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
@@ -35,7 +35,7 @@ export default function ExampleEmojiPicker() {
         <input
           ref={textInputRef}
           type="text"
-          className="h-10 flex-1 font-normal 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 flex-1 font-normal rounded-md border border-neutral-200 pl-3.5 text-base text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
           placeholder="iMessage"
           value={textValue}
           onChange={(event) => setTextValue(event.target.value)}
@@ -55,29 +55,29 @@ export default function ExampleEmojiPicker() {
           }}
         >
           <Autocomplete.Trigger
-            className="size-10 rounded-md border border-gray-200 bg-[canvas] text-[1.25rem] text-gray-900 outline-hidden hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-gray-100"
+            className="size-10 rounded-md border border-neutral-200 bg-[canvas] text-[1.25rem] text-neutral-900 outline-hidden hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-neutral-100"
             aria-label="Choose emoji"
           >
             😀
           </Autocomplete.Trigger>
           <Autocomplete.Portal>
             <Autocomplete.Positioner className="outline-hidden" sideOffset={4} align="end">
-              <Autocomplete.Popup className="[--input-container-height:3rem] max-w-[var(--available-width)] max-h-[20.5rem] origin-[var(--transform-origin)] rounded-lg bg-[canvas] shadow-lg shadow-gray-200 text-gray-900 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">
+              <Autocomplete.Popup className="[--input-container-height:3rem] max-w-[var(--available-width)] max-h-[20.5rem] origin-[var(--transform-origin)] rounded-lg bg-[canvas] shadow-lg shadow-neutral-200 text-neutral-900 outline-1 outline-neutral-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-neutral-300">
                 <div className="mx-1 flex h-[var(--input-container-height)] w-64 items-center justify-center bg-[canvas] text-center">
                   <Autocomplete.Input
                     placeholder="Search emojis…"
-                    className="h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-gray-200 pl-3.5 text-base font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+                    className="h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-neutral-200 pl-3.5 text-base font-normal text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
                   />
                 </div>
                 <Autocomplete.Empty>
-                  <div className="px-4 pb-4 pt-2 text-[0.925rem] leading-4 text-gray-600">
+                  <div className="px-4 pb-4 pt-2 text-[0.925rem] leading-4 text-neutral-600">
                     No emojis found
                   </div>
                 </Autocomplete.Empty>
                 <Autocomplete.List className="max-h-[min(calc(20.5rem-var(--input-container-height)),calc(var(--available-height)-var(--input-container-height)))] overflow-auto scroll-pt-10 scroll-pb-[0.35rem] overscroll-contain">
                   {(group: EmojiGroup) => (
                     <Autocomplete.Group key={group.value} items={group.items} className="block">
-                      <Autocomplete.GroupLabel className="sticky top-0 z-[1] m-0 w-full border-b border-gray-100 bg-[canvas] px-4 pb-1 pt-2 text-[0.75rem] font-bold uppercase tracking-wide text-gray-600">
+                      <Autocomplete.GroupLabel className="sticky top-0 z-[1] m-0 w-full border-b border-neutral-100 bg-[canvas] px-4 pb-1 pt-2 text-[0.75rem] font-bold uppercase tracking-wide text-neutral-600">
                         {group.label}
                       </Autocomplete.GroupLabel>
                       <div className="p-1" role="presentation">
@@ -87,7 +87,7 @@ export default function ExampleEmojiPicker() {
                               <Autocomplete.Item
                                 key={rowItem.emoji}
                                 value={rowItem}
-                                className="group min-w-[var(--anchor-width)] select-none flex h-10 flex-col items-center justify-center rounded-md bg-transparent px-0.5 py-2 text-gray-900 outline-hidden data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-md data-[highlighted]:before:bg-gray-200"
+                                className="group min-w-[var(--anchor-width)] select-none flex h-10 flex-col items-center justify-center rounded-md bg-transparent px-0.5 py-2 text-neutral-900 outline-hidden data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-md data-[highlighted]:before:bg-neutral-200"
                                 onClick={() => {
                                   handleInsertEmoji(rowItem.emoji);
                                   setPickerOpen(false);
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
index 1e6bfc23f89..118a32e4978 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
@@ -2,7 +2,7 @@
   box-sizing: border-box;
   padding-left: 0.875rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   width: 16rem;
   height: 2.5rem;
   border-radius: 0.375rem;
@@ -10,7 +10,7 @@
   font-size: 1rem;
   font-weight: 400;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   outline: none;
 
   &:focus {
@@ -30,7 +30,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
 }
 
 .Positioner {
@@ -41,20 +41,20 @@
   box-sizing: border-box;
   border-radius: 0.5rem;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   width: var(--anchor-width);
   max-height: 22.5rem;
   max-width: var(--available-width);
 
   @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
+    outline: 1px solid var(--color-neutral-200);
     box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-neutral-200),
+      0 4px 6px -4px var(--color-neutral-200);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
   }
 }
 
@@ -105,7 +105,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: var(--color-neutral-50);
   }
 
   &[data-highlighted]::before {
@@ -115,14 +115,14 @@
     inset-block: 0;
     inset-inline: 0.5rem;
     border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    background-color: var(--color-neutral-900);
   }
 }
 
 .Separator {
   margin: 0.375rem 1rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: var(--color-neutral-200);
 }
 
 .Empty {
@@ -130,5 +130,5 @@
   padding: 1rem;
   font-size: 0.925rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
index 312a09c529e..1189700d000 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
@@ -4,19 +4,19 @@ import { Autocomplete } from '@base-ui/react/autocomplete';
 export default function ExampleGroupAutocomplete() {
   return (
     <Autocomplete.Root items={groupedTags}>
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-gray-900">
+      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-900">
         Select a tag
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-gray-200 pl-3.5 text-base font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-neutral-200 pl-3.5 text-base font-normal text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
         />
       </label>
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[22.5rem] max-w-[var(--available-width)] rounded-lg bg-[canvas] text-gray-900 outline-1 outline-gray-200 shadow-lg shadow-gray-200 dark:outline-gray-300 dark:shadow-none">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[22.5rem] max-w-[var(--available-width)] rounded-lg bg-[canvas] text-neutral-900 outline-1 outline-neutral-200 shadow-lg shadow-neutral-200 dark:outline-neutral-300 dark:shadow-none">
             <Autocomplete.Empty>
-              <div className="px-4 py-2 text-[0.925rem] leading-4 text-gray-600">
+              <div className="px-4 py-2 text-[0.925rem] leading-4 text-neutral-600">
                 No tags found.
               </div>
             </Autocomplete.Empty>
@@ -30,7 +30,7 @@ export default function ExampleGroupAutocomplete() {
                     {(tag: Tag) => (
                       <Autocomplete.Item
                         key={tag.id}
-                        className="flex cursor-default items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                        className="flex cursor-default items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900"
                         value={tag}
                       >
                         {tag.label}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
index fafc21490ee..770fd61eb8c 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
@@ -2,7 +2,7 @@
   box-sizing: border-box;
   padding-left: 0.875rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   width: 16rem;
   height: 2.5rem;
   border-radius: 0.375rem;
@@ -10,7 +10,7 @@
   font-size: 1rem;
   font-weight: 400;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   outline: none;
 
   &:focus {
@@ -30,7 +30,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
 }
 
 .Positioner {
@@ -41,20 +41,20 @@
   box-sizing: border-box;
   border-radius: 0.375rem;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   width: var(--anchor-width);
   max-height: 23rem;
   max-width: var(--available-width);
 
   @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
+    outline: 1px solid var(--color-neutral-200);
     box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-neutral-200),
+      0 4px 6px -4px var(--color-neutral-200);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
     outline-offset: -1px;
   }
 }
@@ -88,7 +88,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: var(--color-neutral-50);
   }
 
   &[data-highlighted]::before {
@@ -98,14 +98,14 @@
     inset-block: 0;
     inset-inline: 0.5rem;
     border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    background-color: var(--color-neutral-900);
   }
 }
 
 .Separator {
   margin: 0.375rem 1rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: var(--color-neutral-200);
 }
 
 .Empty {
@@ -113,5 +113,5 @@
   padding: 1rem;
   font-size: 0.925rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
index 70aa047b685..c0585f79a2a 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
@@ -4,25 +4,25 @@ import { Autocomplete } from '@base-ui/react/autocomplete';
 export default function ExampleAutocomplete() {
   return (
     <Autocomplete.Root items={tags}>
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-gray-900">
+      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-900">
         Search tags
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-gray-200 pl-3.5 text-base font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-neutral-200 pl-3.5 text-base font-normal text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
         />
       </label>
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] rounded-md bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] rounded-md bg-[canvas] text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300">
             <Autocomplete.Empty>
-              <div className="p-4 text-[0.925rem] leading-4 text-gray-600">No tags found.</div>
+              <div className="p-4 text-[0.925rem] leading-4 text-neutral-600">No tags found.</div>
             </Autocomplete.Empty>
             <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-[empty]:p-0">
               {(tag: Tag) => (
                 <Autocomplete.Item
                   key={tag.id}
-                  className="flex cursor-default items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                  className="flex cursor-default items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900"
                   value={tag}
                 >
                   {tag.value}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
index c4221adb3c8..65f3888f55a 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
@@ -8,7 +8,7 @@
   box-sizing: border-box;
   padding-left: 0.875rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   width: 16rem;
   height: 2.5rem;
   border-radius: 0.375rem;
@@ -16,7 +16,7 @@
   font-size: 1rem;
   font-weight: 400;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   outline: none;
 
   &:focus {
@@ -36,7 +36,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
 }
 
 .Positioner {
@@ -51,20 +51,20 @@
   box-sizing: border-box;
   border-radius: 0.375rem;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   width: var(--anchor-width);
   max-height: 23rem;
   max-width: var(--available-width);
 
   @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
+    outline: 1px solid var(--color-neutral-200);
     box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-neutral-200),
+      0 4px 6px -4px var(--color-neutral-200);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
     outline-offset: -1px;
   }
 }
@@ -99,7 +99,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: var(--color-neutral-50);
   }
 
   &[data-highlighted]::before {
@@ -109,6 +109,6 @@
     inset-block: 0;
     inset-inline: 0.5rem;
     border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    background-color: var(--color-neutral-900);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
index 3f678663b7a..23c40775135 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
@@ -4,22 +4,22 @@ import { Autocomplete } from '@base-ui/react/autocomplete';
 export default function ExampleAutocompleteInline() {
   return (
     <Autocomplete.Root items={tags} mode="both">
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-gray-900">
+      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-900">
         Search tags
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-gray-200 pl-3.5 text-base font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-neutral-200 pl-3.5 text-base font-normal text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
         />
       </label>
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden data-[empty]:hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] rounded-md bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] rounded-md bg-[canvas] text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300">
             <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-[empty]:p-0">
               {(tag: Tag) => (
                 <Autocomplete.Item
                   key={tag.id}
-                  className="flex cursor-default items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                  className="flex cursor-default items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900"
                   value={tag}
                 >
                   {tag.value}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
index 50870736782..d71f39c6631 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
@@ -2,7 +2,7 @@
   box-sizing: border-box;
   padding-left: 0.875rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   width: 16rem;
   height: 2.5rem;
   border-radius: 0.375rem;
@@ -10,7 +10,7 @@
   font-size: 1rem;
   font-weight: 400;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   outline: none;
 
   &:focus {
@@ -30,7 +30,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
 }
 
 .Positioner {
@@ -42,7 +42,7 @@
   padding-block: 0.5rem;
   border-radius: 0.375rem;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   width: var(--anchor-width);
   max-height: min(var(--available-height), 23rem);
   max-width: var(--available-width);
@@ -51,14 +51,14 @@
   overscroll-behavior: contain;
 
   @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
+    outline: 1px solid var(--color-neutral-200);
     box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-neutral-200),
+      0 4px 6px -4px var(--color-neutral-200);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
     outline-offset: -1px;
   }
 }
@@ -78,7 +78,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: var(--color-neutral-50);
   }
 
   &[data-highlighted]::before {
@@ -88,7 +88,7 @@
     inset-block: 0;
     inset-inline: 0.5rem;
     border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    background-color: var(--color-neutral-900);
   }
 }
 
@@ -97,7 +97,7 @@
   padding: 0.5rem 1rem;
   font-size: 0.925rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
 }
 
 .Status {
@@ -106,5 +106,5 @@
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
index 275a09469c4..3b85985e62e 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
@@ -21,19 +21,19 @@ export default function ExampleAutocompleteLimit() {
 
   return (
     <Autocomplete.Root items={tags} value={value} onValueChange={setValue} limit={limit}>
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-gray-900">
+      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-900">
         Limit results to 8
         <Autocomplete.Input
           placeholder="e.g. component"
-          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-gray-200 pl-3.5 text-base font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-neutral-200 pl-3.5 text-base font-normal text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
         />
       </label>
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-[canvas] py-2 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-[canvas] py-2 text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300">
             <Autocomplete.Empty>
-              <div className="px-4 py-2 text-[0.925rem] leading-4 text-gray-600">
+              <div className="px-4 py-2 text-[0.925rem] leading-4 text-neutral-600">
                 No results found for "{value}"
               </div>
             </Autocomplete.Empty>
@@ -42,7 +42,7 @@ export default function ExampleAutocompleteLimit() {
               {(tag: Tag) => (
                 <Autocomplete.Item
                   key={tag.id}
-                  className="flex cursor-default py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+                  className="flex cursor-default py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900"
                   value={tag}
                 >
                   {tag.value}
@@ -52,7 +52,7 @@ export default function ExampleAutocompleteLimit() {
 
             <Autocomplete.Status>
               {moreCount > 0 ? (
-                <div className="mt-1 px-4 py-2 text-sm leading-5 text-gray-600">
+                <div className="mt-1 px-4 py-2 text-sm leading-5 text-neutral-600">
                   {`Hiding ${moreCount} results (type a more specific query to narrow results)`}
                 </div>
               ) : null}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
index 39fc697d482..ed09bc82ac5 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
@@ -2,7 +2,7 @@
   box-sizing: border-box;
   padding-left: 0.875rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   width: 16rem;
   height: 2.5rem;
   border-radius: 0.375rem;
@@ -10,7 +10,7 @@
   font-size: 1rem;
   font-weight: 400;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   outline: none;
 
   &:focus {
@@ -30,7 +30,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
 }
 
 .Positioner {
@@ -41,20 +41,20 @@
   box-sizing: border-box;
   border-radius: 0.375rem;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   width: var(--anchor-width);
   max-height: min(22rem, var(--available-height));
   max-width: var(--available-width);
 
   @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
+    outline: 1px solid var(--color-neutral-200);
     box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-neutral-200),
+      0 4px 6px -4px var(--color-neutral-200);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
     outline-offset: -1px;
   }
 }
@@ -92,7 +92,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: var(--color-neutral-50);
   }
 
   &[data-highlighted]::before {
@@ -102,7 +102,7 @@
     inset-block: 0;
     inset-inline: 0.5rem;
     border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    background-color: var(--color-neutral-900);
   }
 }
 
@@ -110,6 +110,6 @@
   box-sizing: border-box;
   font-size: 0.925rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
   padding: 1rem;
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
index 616d193350a..a74adf66127 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
@@ -30,16 +30,16 @@ export default function ExampleVirtualizedAutocomplete() {
         }
       }}
     >
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-gray-900">
+      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-900">
         Search 10,000 items
-        <Autocomplete.Input className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-gray-200 pl-3.5 text-base font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800" />
+        <Autocomplete.Input className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-neutral-200 pl-3.5 text-base font-normal text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800" />
       </label>
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(22rem,var(--available-height))] max-w-[var(--available-width)] rounded-md bg-[canvas] text-gray-900 outline-1 outline-gray-200 shadow-lg shadow-gray-200 dark:-outline-offset-1 dark:outline-gray-300">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(22rem,var(--available-height))] max-w-[var(--available-width)] rounded-md bg-[canvas] text-neutral-900 outline-1 outline-neutral-200 shadow-lg shadow-neutral-200 dark:-outline-offset-1 dark:outline-neutral-300">
             <Autocomplete.Empty>
-              <div className="px-4 py-4 text-[0.925rem] leading-4 text-gray-600">
+              <div className="px-4 py-4 text-[0.925rem] leading-4 text-neutral-600">
                 No items found.
               </div>
             </Autocomplete.Empty>
@@ -112,7 +112,7 @@ function VirtualizedList({
               data-index={virtualItem.index}
               ref={virtualizer.measureElement}
               value={item}
-              className="flex cursor-default py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900"
+              className="flex cursor-default py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900"
               aria-setsize={filteredItems.length}
               aria-posinset={virtualItem.index + 1}
               style={{
diff --git a/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css
index bb470393097..e2dc2858145 100644
--- a/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css
@@ -6,8 +6,8 @@
   border-radius: 100%;
   user-select: none;
   font-weight: 400;
-  color: light-dark(var(--color-gray-950), white);
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  color: light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
   font-size: 0.875rem;
   line-height: 1;
   overflow: hidden;
diff --git a/docs/src/app/(docs)/react/components/avatar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/avatar/demos/hero/tailwind/index.tsx
index 59789b02fb9..87590a4d1d7 100644
--- a/docs/src/app/(docs)/react/components/avatar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/avatar/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Avatar } from '@base-ui/react/avatar';
 export default function ExampleAvatar() {
   return (
     <div className="flex gap-4">
-      <Avatar.Root className="inline-flex size-8 items-center justify-center overflow-hidden rounded-full bg-gray-200 align-middle text-sm leading-none font-normal text-gray-950 select-none dark:bg-gray-800 dark:text-white">
+      <Avatar.Root className="inline-flex size-8 items-center justify-center overflow-hidden rounded-full bg-neutral-200 align-middle text-sm leading-none font-normal text-neutral-950 select-none dark:bg-neutral-800 dark:text-white">
         <Avatar.Image
           src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
           width="48"
@@ -14,7 +14,7 @@ export default function ExampleAvatar() {
           LT
         </Avatar.Fallback>
       </Avatar.Root>
-      <Avatar.Root className="inline-flex size-8 items-center justify-center overflow-hidden rounded-full bg-gray-200 align-middle text-sm leading-none font-normal text-gray-950 select-none dark:bg-gray-800 dark:text-white">
+      <Avatar.Root className="inline-flex size-8 items-center justify-center overflow-hidden rounded-full bg-neutral-200 align-middle text-sm leading-none font-normal text-neutral-950 select-none dark:bg-neutral-800 dark:text-white">
         LT
       </Avatar.Root>
     </div>
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
index a2f7d4e560a..b0860a01bf8 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
@@ -6,29 +6,29 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
index 1baa4413b44..70b9ee4f086 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Button } from '@base-ui/react/button';
 
 export default function ExampleButton() {
   return (
-    <Button className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400">
+    <Button className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
       Submit
     </Button>
   );
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
index a2f7d4e560a..b0860a01bf8 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
@@ -6,29 +6,29 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
index 7dd8aaaa370..b49bac4fbae 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleButton() {
 
   return (
     <Button
-      className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400"
+      className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
       disabled={loading}
       focusableWhenDisabled
       onClick={() => {
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
index c527465d482..014a31cd28b 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Caption {
@@ -29,17 +29,17 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(white, var(--color-neutral-950));
   padding: 0;
   margin: 0;
 
   &[data-checked],
   &[data-indeterminate] {
-    background-color: light-dark(var(--color-gray-950), white);
-    color: light-dark(white, var(--color-gray-950));
+    background-color: light-dark(var(--color-neutral-950), white);
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
index dccd88c77ef..91aada9320f 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
@@ -9,17 +9,17 @@ export default function ExampleCheckboxGroup() {
     <CheckboxGroup
       aria-labelledby={id}
       defaultValue={['fuji-apple']}
-      className="flex flex-col items-start gap-1 text-gray-950 dark:text-white"
+      className="flex flex-col items-start gap-1 text-neutral-950 dark:text-white"
     >
       <div className="text-sm leading-5 font-bold" id={id}>
         Apples
       </div>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-950 dark:text-white">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-neutral-950 dark:text-white">
         <Checkbox.Root
           name="apple"
           value="fuji-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-950 bg-white text-white dark:border-white dark:bg-gray-950 dark:text-gray-950 data-checked:bg-gray-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         >
           <Checkbox.Indicator className="flex data-unchecked:hidden">
             <CheckIcon className="size-3" />
@@ -28,11 +28,11 @@ export default function ExampleCheckboxGroup() {
         Fuji
       </label>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-950 dark:text-white">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-neutral-950 dark:text-white">
         <Checkbox.Root
           name="apple"
           value="gala-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-950 bg-white text-white dark:border-white dark:bg-gray-950 dark:text-gray-950 data-checked:bg-gray-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         >
           <Checkbox.Indicator className="flex data-unchecked:hidden">
             <CheckIcon className="size-3" />
@@ -41,11 +41,11 @@ export default function ExampleCheckboxGroup() {
         Gala
       </label>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-950 dark:text-white">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-neutral-950 dark:text-white">
         <Checkbox.Root
           name="apple"
           value="granny-smith-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-950 bg-white text-white dark:border-white dark:bg-gray-950 dark:text-gray-950 data-checked:bg-gray-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         >
           <Checkbox.Indicator className="flex data-unchecked:hidden">
             <CheckIcon className="size-3" />
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
index c527465d482..014a31cd28b 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Caption {
@@ -29,17 +29,17 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(white, var(--color-neutral-950));
   padding: 0;
   margin: 0;
 
   &[data-checked],
   &[data-indeterminate] {
-    background-color: light-dark(var(--color-gray-950), white);
-    color: light-dark(white, var(--color-gray-950));
+    background-color: light-dark(var(--color-neutral-950), white);
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
index c527465d482..014a31cd28b 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Caption {
@@ -29,17 +29,17 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(white, var(--color-neutral-950));
   padding: 0;
   margin: 0;
 
   &[data-checked],
   &[data-indeterminate] {
-    background-color: light-dark(var(--color-gray-950), white);
-    color: light-dark(white, var(--color-gray-950));
+    background-color: light-dark(var(--color-neutral-950), white);
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
index 867cda6a366..7963ab1ea97 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
@@ -5,7 +5,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Checkbox {
@@ -16,17 +16,17 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(white, var(--color-neutral-950));
   padding: 0;
   margin: 0;
 
   &[data-checked],
   &[data-indeterminate] {
-    background-color: light-dark(var(--color-gray-950), white);
-    color: light-dark(white, var(--color-gray-950));
+    background-color: light-dark(var(--color-neutral-950), white);
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
index 737ab27c40b..8dbe3c8c553 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
@@ -3,10 +3,10 @@ import { Checkbox } from '@base-ui/react/checkbox';
 
 export default function ExampleCheckbox() {
   return (
-    <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-950 dark:text-white">
+    <label className="flex items-center gap-2 text-sm leading-5 font-normal text-neutral-950 dark:text-white">
       <Checkbox.Root
         defaultChecked
-        className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-gray-950 bg-white text-white dark:border-white dark:bg-gray-950 dark:text-gray-950 data-checked:bg-gray-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
       >
         <Checkbox.Indicator className="flex data-unchecked:hidden">
           <CheckIcon className="size-3" />
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
index 141e9be7166..f2293684a28 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
@@ -4,7 +4,7 @@
   min-height: 9rem;
   flex-direction: column;
   justify-content: center;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Icon {
@@ -22,10 +22,10 @@
   height: 2rem;
   padding: 0 0.5rem 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -34,12 +34,12 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &:focus-visible {
@@ -52,8 +52,8 @@
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
index 9ee9c6b82f0..1562e1abe33 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
@@ -3,8 +3,8 @@ import { Collapsible } from '@base-ui/react/collapsible';
 
 export default function ExampleCollapsible() {
   return (
-    <Collapsible.Root className="flex min-h-36 w-56 flex-col justify-center text-gray-950 dark:text-white">
-      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none border border-gray-950 dark:border-white bg-white dark:bg-gray-950 pl-3 pr-2 text-sm leading-5 font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400">
+    <Collapsible.Root className="flex min-h-36 w-56 flex-col justify-center text-neutral-950 dark:text-white">
+      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 pl-3 pr-2 text-sm leading-5 font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
         Recovery keys
         <ChevronIcon className="size-3 transition-transform duration-100 ease-out group-data-panel-open:rotate-90" />
       </Collapsible.Trigger>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
index 3bc2ead58e0..01d879b604b 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
@@ -4,7 +4,7 @@
   gap: 0.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
 }
 
 .Label {
@@ -25,7 +25,7 @@
   width: 16rem;
   cursor: text;
 
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
   background-color: canvas;
 
@@ -52,8 +52,8 @@
   align-items: center;
   gap: 0.25rem;
   border-radius: 0.375rem;
-  background-color: var(--color-gray-100);
-  color: var(--color-gray-900);
+  background-color: var(--color-neutral-100);
+  color: var(--color-neutral-900);
   padding: 0.25rem 0.25rem 0.25rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -62,13 +62,13 @@
 
   &:focus-within {
     background-color: var(--color-blue);
-    color: var(--color-gray-50);
+    color: var(--color-neutral-50);
   }
 
   @media (hover: hover) {
     &[data-highlighted] {
       background-color: var(--color-blue);
-      color: var(--color-gray-50);
+      color: var(--color-neutral-50);
     }
   }
 }
@@ -85,7 +85,7 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-200);
+      background-color: var(--color-neutral-200);
     }
   }
 }
@@ -103,7 +103,7 @@
   font-family: inherit;
   font-size: 1rem;
   font-weight: 400;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
 
   &:focus {
     outline: none;
@@ -119,7 +119,7 @@
   padding-block: 0.5rem;
   border-radius: 0.375rem;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   width: var(--anchor-width);
   max-height: min(var(--available-height), 23rem);
   max-width: var(--available-width);
@@ -141,14 +141,14 @@
   }
 
   @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
+    outline: 1px solid var(--color-neutral-200);
     box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-neutral-200),
+      0 4px 6px -4px var(--color-neutral-200);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
     outline-offset: -1px;
   }
 }
@@ -162,7 +162,7 @@
   padding-right: 1.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
 }
 
 .Spinner {
@@ -190,7 +190,7 @@
   box-sizing: border-box;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
   padding: 0.5rem 1rem;
 }
 
@@ -213,7 +213,7 @@
     &[data-highlighted] {
       z-index: 0;
       position: relative;
-      color: var(--color-gray-900);
+      color: var(--color-neutral-900);
     }
 
     &[data-highlighted]::before {
@@ -223,7 +223,7 @@
       inset-block: 0;
       inset-inline: 0.5rem;
       border-radius: 0.25rem;
-      background-color: var(--color-gray-100);
+      background-color: var(--color-neutral-100);
     }
   }
 }
@@ -256,7 +256,7 @@
   flex-wrap: wrap;
   gap: 0.5rem;
   font-size: 0.8125rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
 }
 
 .ItemUsername {
@@ -265,5 +265,5 @@
 
 .ItemEmail {
   font-size: 0.75rem;
-  color: var(--color-gray-500);
+  color: var(--color-neutral-500);
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index 85b5d3b4867..d1330867b5c 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -134,11 +134,11 @@ export default function ExampleAsyncMultipleCombobox() {
         });
       }}
     >
-      <div className="flex flex-col gap-1 text-sm text-gray-900">
+      <div className="flex flex-col gap-1 text-sm text-neutral-900">
         <label className="inline-flex text-inherit font-bold" htmlFor={id}>
           Assign reviewers
         </label>
-        <Combobox.InputGroup className="relative flex min-h-10 w-[16rem] cursor-text rounded-md border border-gray-200 bg-[canvas] px-1.5 py-1 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 md:w-[20rem]">
+        <Combobox.InputGroup className="relative flex min-h-10 w-[16rem] cursor-text rounded-md border border-neutral-200 bg-[canvas] px-1.5 py-1 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 md:w-[20rem]">
           <Combobox.Chips className="flex w-full flex-wrap items-center gap-1">
             <Combobox.Value>
               {(value: DirectoryUser[]) => (
@@ -146,12 +146,12 @@ export default function ExampleAsyncMultipleCombobox() {
                   {value.map((user) => (
                     <Combobox.Chip
                       key={user.id}
-                      className="flex cursor-default items-center gap-1 rounded-md bg-gray-100 py-1 pl-2 pr-1 text-sm text-gray-900 outline-none focus-within:bg-blue-800 focus-within:text-gray-50 [@media(hover:hover)]:[&[data-highlighted]]:bg-blue-800 [@media(hover:hover)]:[&[data-highlighted]]:text-gray-50"
+                      className="flex cursor-default items-center gap-1 rounded-md bg-neutral-100 py-1 pl-2 pr-1 text-sm text-neutral-900 outline-none focus-within:bg-blue-800 focus-within:text-neutral-50 [@media(hover:hover)]:[&[data-highlighted]]:bg-blue-800 [@media(hover:hover)]:[&[data-highlighted]]:text-neutral-50"
                       aria-label={user.name}
                     >
                       {user.name}
                       <Combobox.ChipRemove
-                        className="inline-flex items-center justify-center rounded-md border-none bg-transparent p-[0.2rem] text-inherit hover:bg-gray-200"
+                        className="inline-flex items-center justify-center rounded-md border-none bg-transparent p-[0.2rem] text-inherit hover:bg-neutral-200"
                         aria-label={`Remove ${user.name}`}
                       >
                         <XIcon />
@@ -161,7 +161,7 @@ export default function ExampleAsyncMultipleCombobox() {
                   <Combobox.Input
                     id={id}
                     placeholder={value.length > 0 ? '' : 'e.g. Michael'}
-                    className="h-8 min-w-24 flex-1 rounded-md border-0 bg-transparent pl-2 text-base font-normal text-gray-900 outline-none placeholder:font-normal"
+                    className="h-8 min-w-24 flex-1 rounded-md border-0 bg-transparent pl-2 text-base font-normal text-neutral-900 outline-none placeholder:font-normal"
                   />
                 </React.Fragment>
               )}
@@ -173,19 +173,19 @@ export default function ExampleAsyncMultipleCombobox() {
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
           <Combobox.Popup
-            className="box-border w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto scroll-pb-2 scroll-pt-2 overscroll-contain rounded-md bg-[canvas] py-2 text-gray-900 shadow-[0_10px_15px_-3px_var(--color-gray-200),0_4px_6px_-4px_var(--color-gray-200)] outline outline-1 outline-gray-200 transition-[opacity,transform,scale] duration-100 data-[ending-style]:transition-none data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:-outline-offset-1 dark:shadow-none dark:outline-gray-300"
+            className="box-border w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto scroll-pb-2 scroll-pt-2 overscroll-contain rounded-md bg-[canvas] py-2 text-neutral-900 shadow-[0_10px_15px_-3px_var(--color-neutral-200),0_4px_6px_-4px_var(--color-neutral-200)] outline outline-1 outline-neutral-200 transition-[opacity,transform,scale] duration-100 data-[ending-style]:transition-none data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:-outline-offset-1 dark:shadow-none dark:outline-neutral-300"
             aria-busy={isPending || undefined}
           >
             <Combobox.Status>
               {status ? (
-                <div className="flex items-center gap-2 py-1 pl-4 pr-5 text-sm text-gray-600">
+                <div className="flex items-center gap-2 py-1 pl-4 pr-5 text-sm text-neutral-600">
                   {status}
                 </div>
               ) : null}
             </Combobox.Status>
             <Combobox.Empty>
               {emptyMessage ? (
-                <div className="box-border px-4 py-2 text-sm leading-4 text-gray-600">
+                <div className="box-border px-4 py-2 text-sm leading-4 text-neutral-600">
                   {emptyMessage}
                 </div>
               ) : null}
@@ -195,18 +195,18 @@ export default function ExampleAsyncMultipleCombobox() {
                 <Combobox.Item
                   key={user.id}
                   value={user}
-                  className="grid cursor-default select-none grid-cols-[0.75rem_1fr] items-start gap-2 py-2 pl-4 pr-5 text-base leading-[1.2rem] outline-none [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-gray-900 [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-2 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1] [@media(hover:hover)]:[&[data-highlighted]]:before:rounded [@media(hover:hover)]:[&[data-highlighted]]:before:bg-gray-100 [@media(hover:hover)]:[&[data-highlighted]]:before:content-['']"
+                  className="grid cursor-default select-none grid-cols-[0.75rem_1fr] items-start gap-2 py-2 pl-4 pr-5 text-base leading-[1.2rem] outline-none [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-neutral-900 [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-2 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1] [@media(hover:hover)]:[&[data-highlighted]]:before:rounded [@media(hover:hover)]:[&[data-highlighted]]:before:bg-neutral-100 [@media(hover:hover)]:[&[data-highlighted]]:before:content-['']"
                 >
                   <Combobox.ItemIndicator className="col-start-1 mt-1">
                     <CheckIcon className="size-3" />
                   </Combobox.ItemIndicator>
                   <span className="col-start-2 flex flex-col gap-1">
                     <span className="text-[0.95rem] font-bold">{user.name}</span>
-                    <span className="flex flex-wrap gap-2 text-[0.8125rem] text-gray-600">
+                    <span className="flex flex-wrap gap-2 text-[0.8125rem] text-neutral-600">
                       <span className="opacity-80">@{user.username}</span>
                       <span>{user.title}</span>
                     </span>
-                    <span className="text-xs text-gray-500">{user.email}</span>
+                    <span className="text-xs text-neutral-500">{user.email}</span>
                   </span>
                 </Combobox.Item>
               )}
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
index 7aea89e292a..3e921461472 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
@@ -5,7 +5,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   position: relative;
 }
 
@@ -13,7 +13,7 @@
   position: relative;
   width: 16rem;
   height: 2.5rem;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
   background-color: canvas;
 
@@ -44,7 +44,7 @@
   font-size: 1rem;
   font-weight: 400;
   background-color: transparent;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
 
   &:focus {
     outline: none;
@@ -62,7 +62,7 @@
   right: 0.5rem;
   border-radius: 0.25rem;
   border: none;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
   padding: 0;
 }
 
@@ -74,7 +74,7 @@
   justify-content: center;
   width: 1.5rem;
   height: 2.5rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
   border: none;
   padding: 0;
   border-radius: 0.25rem;
@@ -96,7 +96,7 @@
   padding-block: 0.5rem;
   border-radius: 0.375rem;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   width: var(--anchor-width);
   max-height: min(var(--available-height), 23rem);
   max-width: var(--available-width);
@@ -118,14 +118,14 @@
   }
 
   @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
+    outline: 1px solid var(--color-neutral-200);
     box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-neutral-200),
+      0 4px 6px -4px var(--color-neutral-200);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
     outline-offset: -1px;
   }
 }
@@ -139,7 +139,7 @@
   padding-right: 1.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
 }
 
 .Spinner {
@@ -182,7 +182,7 @@
     &[data-highlighted] {
       z-index: 0;
       position: relative;
-      color: var(--color-gray-900);
+      color: var(--color-neutral-900);
     }
 
     &[data-highlighted]::before {
@@ -192,7 +192,7 @@
       inset-block: 0;
       inset-inline: 0.5rem;
       border-radius: 0.25rem;
-      background-color: var(--color-gray-100);
+      background-color: var(--color-neutral-100);
     }
   }
 }
@@ -225,7 +225,7 @@
   flex-wrap: wrap;
   gap: 0.75rem;
   font-size: 0.8125rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
 }
 
 .ItemUsername {
@@ -241,6 +241,6 @@
   box-sizing: border-box;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
   padding: 0.5rem 1rem;
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index a4bf1b37236..f2db0358cd2 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -111,15 +111,15 @@ export default function ExampleAsyncSingleCombobox() {
         });
       }}
     >
-      <div className="relative flex flex-col gap-1 text-sm font-bold leading-5 text-gray-900">
+      <div className="relative flex flex-col gap-1 text-sm font-bold leading-5 text-neutral-900">
         <label htmlFor={id}>Assign reviewer</label>
-        <Combobox.InputGroup className="relative box-content h-10 w-[16rem] rounded-md border border-gray-200 bg-[canvas] focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 md:w-[20rem] [&>input]:pr-[calc(0.5rem+1.5rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+1.5rem*2)]">
+        <Combobox.InputGroup className="relative box-content h-10 w-[16rem] rounded-md border border-neutral-200 bg-[canvas] focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 md:w-[20rem] [&>input]:pr-[calc(0.5rem+1.5rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+1.5rem*2)]">
           <Combobox.Input
             id={id}
             placeholder="e.g. Michael"
-            className="box-border h-full w-full border-0 bg-transparent pl-3.5 text-base font-normal text-gray-900 outline-none"
+            className="box-border h-full w-full border-0 bg-transparent pl-3.5 text-base font-normal text-neutral-900 outline-none"
           />
-          <div className="absolute bottom-0 right-2 flex h-10 items-center justify-center text-gray-600">
+          <div className="absolute bottom-0 right-2 flex h-10 items-center justify-center text-neutral-600">
             <Combobox.Clear
               className="combobox-clear flex h-10 w-6 items-center justify-center rounded border-0 bg-transparent p-0"
               aria-label="Clear selection"
@@ -139,19 +139,19 @@ export default function ExampleAsyncSingleCombobox() {
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
           <Combobox.Popup
-            className="box-border w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto scroll-pb-2 scroll-pt-2 overscroll-contain rounded-md bg-[canvas] py-2 text-gray-900 shadow-[0_10px_15px_-3px_var(--color-gray-200),0_4px_6px_-4px_var(--color-gray-200)] outline outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:transition-none data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:-outline-offset-1 dark:shadow-none dark:outline-gray-300"
+            className="box-border w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto scroll-pb-2 scroll-pt-2 overscroll-contain rounded-md bg-[canvas] py-2 text-neutral-900 shadow-[0_10px_15px_-3px_var(--color-neutral-200),0_4px_6px_-4px_var(--color-neutral-200)] outline outline-1 outline-neutral-200 transition-[transform,scale,opacity] data-[ending-style]:transition-none data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:-outline-offset-1 dark:shadow-none dark:outline-neutral-300"
             aria-busy={isPending || undefined}
           >
             <Combobox.Status>
               {status ? (
-                <div className="flex items-center gap-2 py-1 pl-4 pr-5 text-sm text-gray-600">
+                <div className="flex items-center gap-2 py-1 pl-4 pr-5 text-sm text-neutral-600">
                   {status}
                 </div>
               ) : null}
             </Combobox.Status>
             <Combobox.Empty>
               {emptyMessage ? (
-                <div className="px-4 py-2 text-[0.875rem] leading-4 text-gray-600">
+                <div className="px-4 py-2 text-[0.875rem] leading-4 text-neutral-600">
                   {emptyMessage}
                 </div>
               ) : null}
@@ -161,14 +161,14 @@ export default function ExampleAsyncSingleCombobox() {
                 <Combobox.Item
                   key={user.id}
                   value={user}
-                  className="grid cursor-default select-none grid-cols-[0.75rem_1fr] items-start gap-2 py-2 pl-4 pr-5 text-base leading-[1.2rem] outline-none [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-gray-900 [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-2 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1] [@media(hover:hover)]:[&[data-highlighted]]:before:rounded [@media(hover:hover)]:[&[data-highlighted]]:before:bg-gray-100 [@media(hover:hover)]:[&[data-highlighted]]:before:content-['']"
+                  className="grid cursor-default select-none grid-cols-[0.75rem_1fr] items-start gap-2 py-2 pl-4 pr-5 text-base leading-[1.2rem] outline-none [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-neutral-900 [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-2 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1] [@media(hover:hover)]:[&[data-highlighted]]:before:rounded [@media(hover:hover)]:[&[data-highlighted]]:before:bg-neutral-100 [@media(hover:hover)]:[&[data-highlighted]]:before:content-['']"
                 >
                   <Combobox.ItemIndicator className="col-start-1 mt-1">
                     <CheckIcon className="size-3" />
                   </Combobox.ItemIndicator>
                   <span className="col-start-2 flex flex-col gap-1">
                     <span className="text-[0.95rem] font-bold">{user.name}</span>
-                    <span className="flex flex-wrap gap-3 text-[0.8125rem] text-gray-600">
+                    <span className="flex flex-wrap gap-3 text-[0.8125rem] text-neutral-600">
                       <span className="opacity-80">@{user.username}</span>
                       <span>{user.title}</span>
                     </span>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
index 156330ce4a6..06a520ea02d 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
@@ -12,7 +12,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
 }
 
 .InputGroup {
@@ -21,7 +21,7 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 0.125rem;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
   background-color: canvas;
   padding: 0.25rem 0.375rem;
@@ -49,8 +49,8 @@
 .Chip {
   display: flex;
   align-items: center;
-  background-color: var(--color-gray-100);
-  color: var(--color-gray-900);
+  background-color: var(--color-neutral-100);
+  color: var(--color-neutral-900);
   border-radius: 0.375rem;
   font-size: 0.875rem;
   padding: 0.2rem 0.2rem 0.2rem 0.4rem;
@@ -61,13 +61,13 @@
 
   &:focus-within {
     background-color: var(--color-blue);
-    color: var(--color-gray-50);
+    color: var(--color-neutral-50);
   }
 
   @media (hover: hover) {
     &[data-highlighted] {
       background-color: var(--color-blue);
-      color: var(--color-gray-50);
+      color: var(--color-neutral-50);
     }
   }
 }
@@ -99,7 +99,7 @@
   font-size: 1rem;
   font-weight: 400;
   background-color: transparent;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   min-width: 3rem;
 
   &:focus {
@@ -117,7 +117,7 @@
   border-radius: 0.5rem;
   padding-block: 0.5rem;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   width: var(--anchor-width);
   max-width: var(--available-width);
   max-height: min(var(--available-height), 24rem);
@@ -126,14 +126,14 @@
   overscroll-behavior: contain;
 
   @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
+    outline: 1px solid var(--color-neutral-200);
     box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-neutral-200),
+      0 4px 6px -4px var(--color-neutral-200);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
     outline-offset: -1px;
   }
 }
@@ -156,7 +156,7 @@
   &[data-selected] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-900);
+    color: var(--color-neutral-900);
   }
 
   &[data-selected]::before,
@@ -173,11 +173,11 @@
     &[data-highlighted] {
       z-index: 0;
       position: relative;
-      color: var(--color-gray-50);
+      color: var(--color-neutral-50);
     }
 
     &[data-highlighted]::before {
-      background-color: var(--color-gray-900);
+      background-color: var(--color-neutral-900);
     }
   }
 }
@@ -200,7 +200,7 @@
   box-sizing: border-box;
   font-size: 0.925rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
   padding: 0.5rem 1rem;
 }
 
@@ -215,7 +215,7 @@
   border: none;
   background: none;
   text-align: left;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   padding: 0.5rem 2rem 0.5rem 1rem;
   cursor: default;
   border-radius: 0.25rem;
@@ -265,13 +265,13 @@
   margin-top: -2rem;
   padding: 1.5rem;
   border-radius: 0.5rem;
-  outline: 1px solid var(--color-gray-200);
+  outline: 1px solid var(--color-neutral-200);
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   transition: all 150ms;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
   }
 
   &[data-starting-style],
@@ -293,17 +293,17 @@
   margin: 0 0 1rem;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
 }
 
 .TextField {
   box-sizing: border-box;
   width: 100%;
   height: 2.5rem;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   padding: 0 0.625rem;
   font: inherit;
 
@@ -329,24 +329,24 @@
   padding: 0 0.875rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  background-color: var(--color-neutral-50);
   font-family: inherit;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: var(--color-neutral-100);
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
index 4f86147917a..87ed358f7b7 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
@@ -122,10 +122,10 @@ export default function ExampleCreatableCombobox() {
         }}
       >
         <div className="max-w-112 flex flex-col gap-1">
-          <label className="text-sm leading-5 font-bold text-gray-900" htmlFor={id}>
+          <label className="text-sm leading-5 font-bold text-neutral-900" htmlFor={id}>
             Labels
           </label>
-          <Combobox.InputGroup className="w-64 cursor-text rounded-md border border-gray-200 bg-[canvas] px-1.5 py-1 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 min-[500px]:w-[22rem]">
+          <Combobox.InputGroup className="w-64 cursor-text rounded-md border border-neutral-200 bg-[canvas] px-1.5 py-1 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 min-[500px]:w-[22rem]">
             <Combobox.Chips className="flex w-full flex-wrap items-center gap-0.5">
               <Combobox.Value>
                 {(value: LabelItem[]) => (
@@ -133,12 +133,12 @@ export default function ExampleCreatableCombobox() {
                     {value.map((label) => (
                       <Combobox.Chip
                         key={label.id}
-                        className="flex items-center gap-1 rounded-md bg-gray-100 px-1.5 py-[0.2rem] text-sm text-gray-900 outline-none cursor-default [@media(hover:hover)]:[&[data-highlighted]]:bg-blue-800 [@media(hover:hover)]:[&[data-highlighted]]:text-gray-50 focus-within:bg-blue-800 focus-within:text-gray-50"
+                        className="flex items-center gap-1 rounded-md bg-neutral-100 px-1.5 py-[0.2rem] text-sm text-neutral-900 outline-none cursor-default [@media(hover:hover)]:[&[data-highlighted]]:bg-blue-800 [@media(hover:hover)]:[&[data-highlighted]]:text-neutral-50 focus-within:bg-blue-800 focus-within:text-neutral-50"
                         aria-label={label.value}
                       >
                         {label.value}
                         <Combobox.ChipRemove
-                          className="rounded-md p-1 text-inherit hover:bg-gray-200"
+                          className="rounded-md p-1 text-inherit hover:bg-neutral-200"
                           aria-label={`Remove ${label.value}`}
                         >
                           <XIcon />
@@ -149,7 +149,7 @@ export default function ExampleCreatableCombobox() {
                       ref={comboboxInputRef}
                       id={id}
                       placeholder={value.length > 0 ? '' : 'e.g. bug'}
-                      className="min-w-12 flex-1 h-8 rounded-md border-0 bg-transparent pl-2 text-base font-normal text-gray-900 outline-none"
+                      className="min-w-12 flex-1 h-8 rounded-md border-0 bg-transparent pl-2 text-base font-normal text-neutral-900 outline-none"
                       onKeyDown={handleInputKeyDown}
                     />
                   </React.Fragment>
@@ -161,9 +161,9 @@ export default function ExampleCreatableCombobox() {
 
         <Combobox.Portal>
           <Combobox.Positioner className="z-50 outline-none" sideOffset={4}>
-            <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-lg bg-[canvas] py-2 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
+            <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-lg bg-[canvas] py-2 text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300">
               <Combobox.Empty>
-                <div className="px-4 py-2 text-[0.925rem] leading-4 text-gray-600">
+                <div className="px-4 py-2 text-[0.925rem] leading-4 text-neutral-600">
                   No labels found.
                 </div>
               </Combobox.Empty>
@@ -172,7 +172,7 @@ export default function ExampleCreatableCombobox() {
                   item.creatable ? (
                     <Combobox.Item
                       key={item.id}
-                      className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-gray-50 [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-2 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1] [@media(hover:hover)]:[&[data-highlighted]]:before:rounded-sm [@media(hover:hover)]:[&[data-highlighted]]:before:bg-gray-900"
+                      className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-neutral-50 [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-2 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1] [@media(hover:hover)]:[&[data-highlighted]]:before:rounded-sm [@media(hover:hover)]:[&[data-highlighted]]:before:bg-neutral-900"
                       value={item}
                     >
                       <span className="col-start-1">
@@ -183,7 +183,7 @@ export default function ExampleCreatableCombobox() {
                   ) : (
                     <Combobox.Item
                       key={item.id}
-                      className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-gray-50 [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-2 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1] [@media(hover:hover)]:[&[data-highlighted]]:before:rounded-sm [@media(hover:hover)]:[&[data-highlighted]]:before:bg-gray-900"
+                      className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-neutral-50 [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-2 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1] [@media(hover:hover)]:[&[data-highlighted]]:before:rounded-sm [@media(hover:hover)]:[&[data-highlighted]]:before:bg-neutral-900"
                       value={item}
                     >
                       <Combobox.ItemIndicator className="col-start-1">
@@ -203,29 +203,29 @@ export default function ExampleCreatableCombobox() {
         <Dialog.Portal>
           <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity dark:opacity-70 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 supports-[-webkit-touch-callout:none]:absolute" />
           <Dialog.Popup
-            className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 mt-[-2rem] w-[24rem] max-w-[calc(100vw-3rem)] rounded-lg bg-[canvas] p-6 text-gray-900 outline-1 outline-gray-200 transition-all data-[starting-style]:opacity-0 data-[starting-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:scale-90 dark:-outline-offset-1 dark:outline-gray-300"
+            className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 mt-[-2rem] w-[24rem] max-w-[calc(100vw-3rem)] rounded-lg bg-[canvas] p-6 text-neutral-900 outline-1 outline-neutral-200 transition-all data-[starting-style]:opacity-0 data-[starting-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:scale-90 dark:-outline-offset-1 dark:outline-neutral-300"
             initialFocus={createInputRef}
           >
             <Dialog.Title className="-mt-1.5 mb-1 text-lg leading-7 tracking-[-0.0025em] font-bold">
               Create new label
             </Dialog.Title>
-            <Dialog.Description className="mb-4 text-base leading-6 text-gray-600">
+            <Dialog.Description className="mb-4 text-base leading-6 text-neutral-600">
               Add a new label to select.
             </Dialog.Description>
             <form onSubmit={handleCreateSubmit}>
               <input
                 ref={createInputRef}
-                className="w-full h-10 rounded-md border border-gray-200 bg-[canvas] text-gray-900 px-2.5 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 font-normal"
+                className="w-full h-10 rounded-md border border-neutral-200 bg-[canvas] text-neutral-900 px-2.5 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 font-normal"
                 placeholder="Label name"
                 defaultValue={pendingQueryRef.current}
               />
               <div className="mt-4 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 text-gray-900 select-none hover:bg-gray-100 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 font-normal">
+                <Dialog.Close className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base text-neutral-900 select-none hover:bg-neutral-100 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100 font-normal">
                   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-normal 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-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100"
                 >
                   Create
                 </button>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
index 6a0925d9226..5999a33da85 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
@@ -2,7 +2,7 @@
   position: relative;
   width: 16rem;
   height: 2.5rem;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
   background-color: canvas;
 
@@ -29,7 +29,7 @@
   font-size: 1rem;
   font-weight: 400;
   background-color: transparent;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   outline: none;
 
   &:focus {
@@ -44,7 +44,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   position: relative;
 }
 
@@ -60,7 +60,7 @@
   right: 0.5rem;
   border-radius: 0.25rem;
   border: none;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
   padding: 0;
 }
 
@@ -72,7 +72,7 @@
   justify-content: center;
   width: var(--size);
   height: 2.5rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
   border: none;
   padding: 0;
   border-radius: 0.25rem;
@@ -94,7 +94,7 @@
   border-radius: 0.375rem;
   overflow: hidden;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   width: var(--anchor-width);
   max-height: 23rem;
   max-width: var(--available-width);
@@ -110,14 +110,14 @@
   }
 
   @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
+    outline: 1px solid var(--color-neutral-200);
     box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-neutral-200),
+      0 4px 6px -4px var(--color-neutral-200);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
   }
 }
 
@@ -167,7 +167,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: var(--color-neutral-50);
   }
 
   &[data-highlighted]::before {
@@ -177,7 +177,7 @@
     inset-block: 0;
     inset-inline: 0.5rem;
     border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    background-color: var(--color-neutral-900);
   }
 }
 
@@ -200,5 +200,5 @@
   padding: 1rem;
   font-size: 0.925rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index 29f20452a3d..9de2cf1857d 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -6,15 +6,15 @@ export default function ExampleGroupedCombobox() {
   const id = React.useId();
   return (
     <Combobox.Root items={groupedProduce}>
-      <div className="relative flex flex-col gap-1 text-sm leading-5 font-bold text-gray-900">
+      <div className="relative flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-900">
         <label htmlFor={id}>Select produce</label>
-        <Combobox.InputGroup className="relative box-content h-10 w-[16rem] rounded-md border border-gray-200 bg-[canvas] focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 [&>input]:pr-[calc(0.5rem+1.5rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+1.5rem*2)]">
+        <Combobox.InputGroup className="relative box-content h-10 w-[16rem] rounded-md border border-neutral-200 bg-[canvas] focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 [&>input]:pr-[calc(0.5rem+1.5rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+1.5rem*2)]">
           <Combobox.Input
             placeholder="e.g. Mango"
             id={id}
-            className="h-full w-full border-0 bg-transparent pl-3.5 text-base font-normal text-gray-900 outline-none"
+            className="h-full w-full border-0 bg-transparent pl-3.5 text-base font-normal text-neutral-900 outline-none"
           />
-          <div className="absolute right-2 bottom-0 flex h-10 items-center justify-center text-gray-600">
+          <div className="absolute right-2 bottom-0 flex h-10 items-center justify-center text-neutral-600">
             <Combobox.Clear
               className="combobox-clear flex h-10 w-6 items-center justify-center rounded bg-transparent p-0"
               aria-label="Clear selection"
@@ -33,9 +33,11 @@ export default function ExampleGroupedCombobox() {
 
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
-          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-hidden rounded-md bg-[canvas] pt-0 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:shadow-none dark:outline-gray-300 duration-100">
+          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-hidden rounded-md bg-[canvas] pt-0 text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:shadow-none dark:outline-neutral-300 duration-100">
             <Combobox.Empty>
-              <div className="p-4 text-[0.925rem] leading-4 text-gray-600">No produce found.</div>
+              <div className="p-4 text-[0.925rem] leading-4 text-neutral-600">
+                No produce found.
+              </div>
             </Combobox.Empty>
             <Combobox.List className="outline-0 overflow-y-auto scroll-pt-[2.25rem] scroll-pb-[0.5rem] overscroll-contain max-h-[min(23rem,var(--available-height))]">
               {(group: ProduceGroup) => (
@@ -47,7 +49,7 @@ export default function ExampleGroupedCombobox() {
                     {(item: Produce) => (
                       <Combobox.Item
                         key={item.id}
-                        className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base 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-2 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-4 text-base leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900"
                         value={item}
                       >
                         <Combobox.ItemIndicator className="col-start-1 flex items-center justify-center">
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
index 2aaf58c9cc8..63bcda18013 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
@@ -2,7 +2,7 @@
   position: relative;
   width: 16rem;
   height: 2.5rem;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
   background-color: canvas;
 
@@ -29,7 +29,7 @@
   font-size: 1rem;
   font-weight: 400;
   background-color: transparent;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
 
   &:focus {
     outline: none;
@@ -43,7 +43,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   position: relative;
 }
 
@@ -58,7 +58,7 @@
   right: 0.5rem;
   border-radius: 0.25rem;
   border: none;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
   padding: 0;
 }
 
@@ -70,7 +70,7 @@
   justify-content: center;
   width: 1.5rem;
   height: 2.5rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
   border: none;
   padding: 0;
   border-radius: 0.25rem;
@@ -91,7 +91,7 @@
   box-sizing: border-box;
   border-radius: 0.375rem;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   width: var(--anchor-width);
   max-height: 23rem;
   max-width: var(--available-width);
@@ -107,14 +107,14 @@
   }
 
   @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
+    outline: 1px solid var(--color-neutral-200);
     box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-neutral-200),
+      0 4px 6px -4px var(--color-neutral-200);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
     outline-offset: -1px;
   }
 }
@@ -151,7 +151,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: var(--color-neutral-50);
   }
 
   &[data-highlighted]::before {
@@ -161,7 +161,7 @@
     inset-block: 0;
     inset-inline: 0.5rem;
     border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    background-color: var(--color-neutral-900);
   }
 }
 
@@ -182,6 +182,6 @@
 .Empty {
   font-size: 0.925rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
   padding: 1rem;
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
index 6cebb4cebc1..fdf649c5020 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
@@ -6,15 +6,15 @@ export default function ExampleCombobox() {
   const id = React.useId();
   return (
     <Combobox.Root items={fruits}>
-      <div className="relative flex flex-col gap-1 text-sm leading-5 font-bold text-gray-900">
+      <div className="relative flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-900">
         <label htmlFor={id}>Choose a fruit</label>
-        <Combobox.InputGroup className="relative box-content h-10 w-64 rounded-md border border-gray-200 bg-[canvas] focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 [&>input]:pr-[calc(0.5rem+1.5rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+1.5rem*2)]">
+        <Combobox.InputGroup className="relative box-content h-10 w-64 rounded-md border border-neutral-200 bg-[canvas] focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 [&>input]:pr-[calc(0.5rem+1.5rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+1.5rem*2)]">
           <Combobox.Input
             placeholder="e.g. Apple"
             id={id}
-            className="h-full w-full border-0 bg-transparent pl-3.5 text-base font-normal text-gray-900 outline-none"
+            className="h-full w-full border-0 bg-transparent pl-3.5 text-base font-normal text-neutral-900 outline-none"
           />
-          <div className="absolute right-2 bottom-0 flex h-10 items-center justify-center text-gray-600">
+          <div className="absolute right-2 bottom-0 flex h-10 items-center justify-center text-neutral-600">
             <Combobox.Clear
               className="combobox-clear flex h-10 w-6 items-center justify-center rounded bg-transparent p-0"
               aria-label="Clear selection"
@@ -33,16 +33,16 @@ export default function ExampleCombobox() {
 
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
-          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] rounded-md bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300 duration-100">
+          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] rounded-md bg-[canvas] text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300 duration-100">
             <Combobox.Empty>
-              <div className="p-4 text-[0.925rem] leading-4 text-gray-600">No fruits found.</div>
+              <div className="p-4 text-[0.925rem] leading-4 text-neutral-600">No fruits found.</div>
             </Combobox.Empty>
             <Combobox.List className="outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-[empty]:p-0">
               {(item: Fruit) => (
                 <Combobox.Item
                   key={item.value}
                   value={item}
-                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base 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-2 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-4 text-base leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900"
                 >
                   <Combobox.ItemIndicator className="col-start-1">
                     <CheckIcon className="size-3" />
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
index 353d8f11520..a01f1bc4809 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
@@ -16,13 +16,13 @@
   padding-right: 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
   font-family: inherit;
   font-size: 1rem;
   line-height: 1.5rem;
   font-weight: 400;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   cursor: default;
   background-color: canvas;
   user-select: none;
@@ -30,12 +30,12 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: var(--color-neutral-100);
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 
   &:focus-visible {
@@ -64,7 +64,7 @@
   box-sizing: border-box;
   padding-left: 0.875rem;
   margin: 0;
-  border: 1px solid var(--color-gray-300);
+  border: 1px solid var(--color-neutral-300);
   min-width: 18rem;
   width: 100%;
   height: 2.5rem;
@@ -73,7 +73,7 @@
   font-size: 1rem;
   font-weight: 400;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   outline: none;
 
   &:focus {
@@ -86,7 +86,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   cursor: default;
 }
 
@@ -99,7 +99,7 @@
   box-sizing: border-box;
   border-radius: 0.5rem;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   transform-origin: var(--transform-origin);
   transition:
     transform 150ms,
@@ -114,14 +114,14 @@
   }
 
   @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
+    outline: 1px solid var(--color-neutral-200);
     box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-neutral-200),
+      0 4px 6px -4px var(--color-neutral-200);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
     outline-offset: -1px;
   }
 }
@@ -161,7 +161,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: var(--color-neutral-50);
   }
 
   &[data-highlighted]::before {
@@ -171,7 +171,7 @@
     inset-block: 0;
     inset-inline: 0.5rem;
     border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    background-color: var(--color-neutral-900);
   }
 }
 
@@ -192,13 +192,13 @@
 .Separator {
   margin: 0.375rem 1rem;
   height: 1px;
-  background-color: var(--color-gray-200);
+  background-color: var(--color-neutral-200);
 }
 
 .Empty {
   box-sizing: border-box;
   font-size: 0.925rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
   padding: 1rem;
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index c9480580b27..992d6799f4d 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -6,10 +6,10 @@ export default function ExamplePopoverCombobox() {
   return (
     <div className="flex flex-col gap-1">
       <Combobox.Root items={countries}>
-        <Combobox.Label className="cursor-default text-sm leading-5 font-bold text-gray-900">
+        <Combobox.Label className="cursor-default text-sm leading-5 font-bold text-neutral-900">
           Country
         </Combobox.Label>
-        <Combobox.Trigger className="flex bg-[canvas] h-10 min-w-[12rem] 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 data-[popup-open]:bg-gray-100 cursor-default font-normal">
+        <Combobox.Trigger className="flex bg-[canvas] h-10 min-w-[12rem] items-center justify-between gap-3 rounded-md border border-neutral-200 pr-3 pl-3.5 text-base text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-neutral-100 cursor-default font-normal">
           <Combobox.Value placeholder={<span className="opacity-60">Select country</span>} />
           <Combobox.Icon className="flex">
             <ChevronUpDownIcon />
@@ -18,17 +18,17 @@ export default function ExamplePopoverCombobox() {
         <Combobox.Portal>
           <Combobox.Positioner align="start" sideOffset={4}>
             <Combobox.Popup
-              className="[--input-container-height:3rem] origin-[var(--transform-origin)] max-w-[var(--available-width)] max-h-[24rem] rounded-lg bg-[canvas] shadow-lg shadow-gray-200 text-gray-900 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"
+              className="[--input-container-height:3rem] origin-[var(--transform-origin)] max-w-[var(--available-width)] max-h-[24rem] rounded-lg bg-[canvas] shadow-lg shadow-neutral-200 text-neutral-900 outline-1 outline-neutral-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-neutral-300"
               aria-label="Select country"
             >
               <div className="w-80 h-[var(--input-container-height)] text-center p-2">
                 <Combobox.Input
                   placeholder="e.g. United Kingdom"
-                  className="h-10 w-full font-normal rounded-md border border-gray-200 pl-3.5 text-base font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+                  className="h-10 w-full font-normal rounded-md border border-neutral-200 pl-3.5 text-base font-normal text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
                 />
               </div>
               <Combobox.Empty>
-                <div className="p-4 text-[0.925rem] leading-4 text-gray-600">
+                <div className="p-4 text-[0.925rem] leading-4 text-neutral-600">
                   No countries found.
                 </div>
               </Combobox.Empty>
@@ -37,7 +37,7 @@ export default function ExamplePopoverCombobox() {
                   <Combobox.Item
                     key={country.code}
                     value={country}
-                    className="grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 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-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900"
                   >
                     <Combobox.ItemIndicator className="col-start-1">
                       <CheckIcon className="size-3" />
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
index b28a83c31f6..60fa4136d82 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
@@ -12,7 +12,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
 }
 
 .InputGroup {
@@ -21,7 +21,7 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 0.125rem;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
   background-color: canvas;
   padding: 0.25rem 0.375rem;
@@ -49,8 +49,8 @@
 .Chip {
   display: flex;
   align-items: center;
-  background-color: var(--color-gray-100);
-  color: var(--color-gray-900);
+  background-color: var(--color-neutral-100);
+  color: var(--color-neutral-900);
   border-radius: 0.375rem;
   font-size: 0.875rem;
   padding: 0.2rem 0.2rem 0.2rem 0.4rem;
@@ -61,13 +61,13 @@
 
   &:focus-within {
     background-color: var(--color-blue);
-    color: var(--color-gray-50);
+    color: var(--color-neutral-50);
   }
 
   @media (hover: hover) {
     &[data-highlighted] {
       background-color: var(--color-blue);
-      color: var(--color-gray-50);
+      color: var(--color-neutral-50);
     }
   }
 }
@@ -97,7 +97,7 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-200);
+      background-color: var(--color-neutral-200);
     }
   }
 }
@@ -114,7 +114,7 @@
   font-size: 1rem;
   font-weight: 400;
   background-color: transparent;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   min-width: 3rem;
 
   &:focus {
@@ -132,7 +132,7 @@
   border-radius: 0.5rem;
   padding-block: 0.5rem;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   width: var(--anchor-width);
   max-width: var(--available-width);
   max-height: min(var(--available-height), 24rem);
@@ -151,14 +151,14 @@
   }
 
   @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
+    outline: 1px solid var(--color-neutral-200);
     box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-neutral-200),
+      0 4px 6px -4px var(--color-neutral-200);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
     outline-offset: -1px;
   }
 }
@@ -181,7 +181,7 @@
   &[data-selected] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-900);
+    color: var(--color-neutral-900);
   }
 
   &[data-selected]::before,
@@ -198,11 +198,11 @@
     &[data-highlighted] {
       z-index: 0;
       position: relative;
-      color: var(--color-gray-50);
+      color: var(--color-neutral-50);
     }
 
     &[data-highlighted]::before {
-      background-color: var(--color-gray-900);
+      background-color: var(--color-neutral-900);
     }
   }
 }
@@ -230,6 +230,6 @@
   box-sizing: border-box;
   font-size: 0.925rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
   padding: 0.5rem 1rem;
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
index 109b7f273b8..04aac641610 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
@@ -8,10 +8,10 @@ export default function ExampleMultipleCombobox() {
   return (
     <Combobox.Root items={langs} multiple>
       <div className="max-w-[28rem] flex flex-col gap-1">
-        <label className="text-sm leading-5 font-bold text-gray-900" htmlFor={id}>
+        <label className="text-sm leading-5 font-bold text-neutral-900" htmlFor={id}>
           Programming languages
         </label>
-        <Combobox.InputGroup className="w-64 cursor-text rounded-md border border-gray-200 bg-[canvas] px-1.5 py-1 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 min-[500px]:w-[22rem]">
+        <Combobox.InputGroup className="w-64 cursor-text rounded-md border border-neutral-200 bg-[canvas] px-1.5 py-1 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 min-[500px]:w-[22rem]">
           <Combobox.Chips className="flex w-full flex-wrap items-center gap-0.5">
             <Combobox.Value>
               {(value: ProgrammingLanguage[]) => (
@@ -19,12 +19,12 @@ export default function ExampleMultipleCombobox() {
                   {value.map((language) => (
                     <Combobox.Chip
                       key={language.id}
-                      className="flex items-center gap-1 rounded-md bg-gray-100 px-1.5 py-[0.2rem] text-sm text-gray-900 outline-none cursor-default [@media(hover:hover)]:[&[data-highlighted]]:bg-blue-800 [@media(hover:hover)]:[&[data-highlighted]]:text-gray-50 focus-within:bg-blue-800 focus-within:text-gray-50"
+                      className="flex items-center gap-1 rounded-md bg-neutral-100 px-1.5 py-[0.2rem] text-sm text-neutral-900 outline-none cursor-default [@media(hover:hover)]:[&[data-highlighted]]:bg-blue-800 [@media(hover:hover)]:[&[data-highlighted]]:text-neutral-50 focus-within:bg-blue-800 focus-within:text-neutral-50"
                       aria-label={language.value}
                     >
                       {language.value}
                       <Combobox.ChipRemove
-                        className="rounded-md p-1 text-inherit hover:bg-gray-200"
+                        className="rounded-md p-1 text-inherit hover:bg-neutral-200"
                         aria-label={`Remove ${language.value}`}
                       >
                         <XIcon />
@@ -34,7 +34,7 @@ export default function ExampleMultipleCombobox() {
                   <Combobox.Input
                     id={id}
                     placeholder={value.length > 0 ? '' : 'e.g. TypeScript'}
-                    className="min-w-12 flex-1 h-8 rounded-md border-0 bg-transparent pl-2 text-base font-normal text-gray-900 outline-none"
+                    className="min-w-12 flex-1 h-8 rounded-md border-0 bg-transparent pl-2 text-base font-normal text-neutral-900 outline-none"
                   />
                 </React.Fragment>
               )}
@@ -45,9 +45,9 @@ export default function ExampleMultipleCombobox() {
 
       <Combobox.Portal>
         <Combobox.Positioner className="z-50 outline-none" sideOffset={4}>
-          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-[canvas] py-2 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">
+          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-[canvas] py-2 text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300">
             <Combobox.Empty>
-              <div className="px-4 py-2 text-[0.925rem] leading-4 text-gray-600">
+              <div className="px-4 py-2 text-[0.925rem] leading-4 text-neutral-600">
                 No languages found.
               </div>
             </Combobox.Empty>
@@ -55,7 +55,7 @@ export default function ExampleMultipleCombobox() {
               {(language: ProgrammingLanguage) => (
                 <Combobox.Item
                   key={language.id}
-                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-gray-50 [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-2 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1] [@media(hover:hover)]:[&[data-highlighted]]:before:rounded-sm [@media(hover:hover)]:[&[data-highlighted]]:before:bg-gray-900"
+                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-neutral-50 [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-2 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1] [@media(hover:hover)]:[&[data-highlighted]]:before:rounded-sm [@media(hover:hover)]:[&[data-highlighted]]:before:bg-neutral-900"
                   value={language}
                 >
                   <Combobox.ItemIndicator className="col-start-1">
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
index a663430db94..5b853f044fb 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
@@ -2,7 +2,7 @@
   box-sizing: border-box;
   padding-left: 0.875rem;
   margin: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   width: 16rem;
   height: 2.5rem;
   border-radius: 0.375rem;
@@ -10,7 +10,7 @@
   font-size: 1rem;
   font-weight: 400;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   outline: none;
 
   &:focus {
@@ -26,7 +26,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
 }
 
 .Positioner {
@@ -37,20 +37,20 @@
   box-sizing: border-box;
   border-radius: 0.375rem;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   width: var(--anchor-width);
   max-height: min(22rem, var(--available-height));
   max-width: var(--available-width);
 
   @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
+    outline: 1px solid var(--color-neutral-200);
     box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-neutral-200),
+      0 4px 6px -4px var(--color-neutral-200);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
     outline-offset: -1px;
   }
 }
@@ -92,7 +92,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: var(--color-neutral-50);
   }
 
   &[data-highlighted]::before {
@@ -102,7 +102,7 @@
     inset-block: 0;
     inset-inline: 0.5rem;
     border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    background-color: var(--color-neutral-900);
   }
 }
 
@@ -124,6 +124,6 @@
   box-sizing: border-box;
   font-size: 0.925rem;
   line-height: 1rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
   padding: 1rem;
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
index 49ad3317264..f96e34eec59 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
@@ -32,16 +32,16 @@ export default function ExampleVirtualizedCombobox() {
         }
       }}
     >
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-gray-900">
+      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-900">
         Search 10,000 items
-        <Combobox.Input className="h-10 w-64 rounded-md font-normal border border-gray-200 pl-3.5 text-base text-gray-900 bg-[canvas] focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800" />
+        <Combobox.Input className="h-10 w-64 rounded-md font-normal border border-neutral-200 pl-3.5 text-base text-neutral-900 bg-[canvas] focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800" />
       </label>
 
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
-          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(22rem,var(--available-height))] max-w-[var(--available-width)] rounded-md bg-[canvas] text-gray-900 outline-1 outline-gray-200 shadow-lg shadow-gray-200 dark:-outline-offset-1 dark:outline-gray-300">
+          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(22rem,var(--available-height))] max-w-[var(--available-width)] rounded-md bg-[canvas] text-neutral-900 outline-1 outline-neutral-200 shadow-lg shadow-neutral-200 dark:-outline-offset-1 dark:outline-neutral-300">
             <Combobox.Empty>
-              <div className="px-4 py-4 text-[0.925rem] leading-4 text-gray-600">
+              <div className="px-4 py-4 text-[0.925rem] leading-4 text-neutral-600">
                 No items found.
               </div>
             </Combobox.Empty>
@@ -117,7 +117,7 @@ function VirtualizedList({
               data-index={virtualItem.index}
               ref={virtualizer.measureElement}
               value={item}
-              className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base 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-2 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-4 text-base leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900"
               aria-setsize={filteredItems.length}
               aria-posinset={virtualItem.index + 1}
               style={{
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
index 663747ee9d6..d3e882fa63c 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
@@ -6,11 +6,11 @@
   width: 15rem;
   height: 12rem;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-weight: 400;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   &:focus-visible {
@@ -27,10 +27,10 @@
   box-sizing: border-box;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
@@ -62,7 +62,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-gray-950));
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &[data-highlighted]::before {
@@ -71,16 +71,16 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: light-dark(var(--color-gray-950), white);
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 }
 
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
index 5ed26f2ab95..09a3dcd12f5 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
@@ -1,23 +1,23 @@
 import { ContextMenu } from '@base-ui/react/context-menu';
 
 const itemClass =
-  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[disabled]:text-gray-500 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-gray-400";
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400";
 
 export default function ExampleMenu() {
   return (
     <ContextMenu.Root>
-      <ContextMenu.Trigger className="flex h-[12rem] w-[15rem] items-center justify-center rounded-none border border-gray-950 bg-white text-gray-950 select-none font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-950 dark:text-white">
+      <ContextMenu.Trigger className="flex h-[12rem] w-[15rem] items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white">
         Right click here
       </ContextMenu.Trigger>
       <ContextMenu.Portal>
         <ContextMenu.Positioner className="outline-hidden">
-          <ContextMenu.Popup className="origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
+          <ContextMenu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
             <ContextMenu.Item className={itemClass}>Add to Library</ContextMenu.Item>
             <ContextMenu.Item className={itemClass}>Add to Playlist</ContextMenu.Item>
-            <ContextMenu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+            <ContextMenu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
             <ContextMenu.Item className={itemClass}>Play Next</ContextMenu.Item>
             <ContextMenu.Item className={itemClass}>Play Last</ContextMenu.Item>
-            <ContextMenu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+            <ContextMenu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
             <ContextMenu.Item className={itemClass}>Favorite</ContextMenu.Item>
             <ContextMenu.Item className={itemClass}>Share</ContextMenu.Item>
           </ContextMenu.Popup>
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
index 419863ce95c..e62082dbb28 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
@@ -6,11 +6,11 @@
   width: 15rem;
   height: 12rem;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-weight: 400;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   &:focus-visible {
@@ -28,10 +28,10 @@
   box-sizing: border-box;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
@@ -74,15 +74,15 @@
 }
 
 .ArrowFill {
-  fill: light-dark(white, var(--color-gray-950));
+  fill: light-dark(white, var(--color-neutral-950));
 }
 
 .ArrowOuterStroke {
-  fill: light-dark(var(--color-gray-950), white);
+  fill: light-dark(var(--color-neutral-950), white);
 }
 
 .ArrowInnerStroke {
-  fill: light-dark(white, var(--color-gray-950));
+  fill: light-dark(white, var(--color-neutral-950));
 }
 
 .Item,
@@ -108,13 +108,13 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-gray-950));
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &[data-highlighted]::before {
@@ -123,15 +123,15 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: light-dark(var(--color-gray-950), white);
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 
   &[data-highlighted][data-popup-open]::before {
-    background-color: light-dark(var(--color-gray-950), white);
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 }
 
@@ -145,5 +145,5 @@
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
index 39ae3de6bcc..e35da42e8fa 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
@@ -2,16 +2,16 @@ import * as React from 'react';
 import { ContextMenu } from '@base-ui/react/context-menu';
 
 const popupClass =
-  'origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]';
+  'origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
 const itemClass =
-  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 data-[disabled]:text-gray-500 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-gray-400";
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 data-[disabled]:text-neutral-500 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-neutral-400";
 const submenuTriggerClass =
-  "flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 data-[disabled]:text-gray-500 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-gray-400";
+  "flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 data-[disabled]:text-neutral-500 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-neutral-400";
 
 export default function ExampleContextMenu() {
   return (
     <ContextMenu.Root>
-      <ContextMenu.Trigger className="flex h-[12rem] w-[15rem] items-center justify-center rounded-none border border-gray-950 bg-white text-gray-950 select-none font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-950 dark:text-white">
+      <ContextMenu.Trigger className="flex h-[12rem] w-[15rem] items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white">
         Right click here
       </ContextMenu.Trigger>
       <ContextMenu.Portal>
@@ -29,18 +29,18 @@ export default function ExampleContextMenu() {
                     <ContextMenu.Item className={itemClass}>Get Up!</ContextMenu.Item>
                     <ContextMenu.Item className={itemClass}>Inside Out</ContextMenu.Item>
                     <ContextMenu.Item className={itemClass}>Night Beats</ContextMenu.Item>
-                    <ContextMenu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+                    <ContextMenu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
                     <ContextMenu.Item className={itemClass}>New playlist…</ContextMenu.Item>
                   </ContextMenu.Popup>
                 </ContextMenu.Positioner>
               </ContextMenu.Portal>
             </ContextMenu.SubmenuRoot>
 
-            <ContextMenu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+            <ContextMenu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
 
             <ContextMenu.Item className={itemClass}>Play Next</ContextMenu.Item>
             <ContextMenu.Item className={itemClass}>Play Last</ContextMenu.Item>
-            <ContextMenu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+            <ContextMenu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
             <ContextMenu.Item className={itemClass}>Favorite</ContextMenu.Item>
             <ContextMenu.Item className={itemClass}>Share</ContextMenu.Item>
           </ContextMenu.Popup>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
index 63c9c91b8a8..16b030d2001 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
@@ -6,28 +6,28 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -69,9 +69,9 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 0.75rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 100ms ease-out,
@@ -99,7 +99,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
index e75012fa02c..50a3293cbea 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
@@ -6,28 +6,28 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -68,9 +68,9 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 0.75rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 100ms ease-out,
@@ -110,7 +110,7 @@
   margin: 0 0 1rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .Actions {
@@ -131,7 +131,7 @@
   padding-block: 0.5rem;
   padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 100%;
   min-height: 8rem;
   font-family: inherit;
@@ -139,10 +139,10 @@
   font-weight: 400;
   line-height: 1.25rem;
   background-color: transparent;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 
   &::placeholder {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
index e7049e042c3..ac9b96a30d7 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
@@ -24,12 +24,12 @@ export default function ExampleDialog() {
         }
       }}
     >
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Tweet
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-[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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-[0.98] data-[starting-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))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
           <Dialog.Title id={titleId} className="text-sm font-bold">
             New tweet
           </Dialog.Title>
@@ -44,18 +44,18 @@ export default function ExampleDialog() {
             <textarea
               aria-labelledby={titleId}
               required
-              className="min-h-32 w-full border border-gray-950 dark:border-white bg-transparent px-2 py-2 text-sm font-normal leading-5 text-gray-950 dark:text-white placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800"
+              className="min-h-32 w-full border border-neutral-950 dark:border-white bg-transparent px-2 py-2 text-sm font-normal leading-5 text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800"
               placeholder="What’s on your mind?"
               value={textareaValue}
               onChange={(event) => setTextareaValue(event.target.value)}
             />
             <div className="flex justify-end gap-3">
-              <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Cancel
               </Dialog.Close>
               <button
                 type="submit"
-                className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-700 disabled:border-gray-500 disabled:text-gray-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+                className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
               >
                 Tweet
               </button>
@@ -67,18 +67,18 @@ 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))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-[0.98] data-[starting-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))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
             <AlertDialog.Title className="text-sm font-bold">Discard tweet?</AlertDialog.Title>
-            <AlertDialog.Description className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+            <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
               Your tweet will be lost.
             </AlertDialog.Description>
             <div className="flex justify-end gap-3">
-              <AlertDialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <AlertDialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Go back
               </AlertDialog.Close>
               <button
                 type="button"
-                className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-700 disabled:border-gray-500 disabled:text-gray-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+                className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
                 onClick={() => {
                   setConfirmationOpen(false);
                   setDialogOpen(false);
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 0c7f68ad4e5..4d4fee5375b 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -17,7 +17,7 @@ export default function DialogDetachedTriggersControlledDemo() {
     <React.Fragment>
       <div className="flex flex-wrap gap-2 justify-center">
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoDialog}
           id="trigger-1"
           payload={1}
@@ -26,7 +26,7 @@ export default function DialogDetachedTriggersControlledDemo() {
         </Dialog.Trigger>
 
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoDialog}
           id="trigger-2"
           payload={2}
@@ -35,7 +35,7 @@ export default function DialogDetachedTriggersControlledDemo() {
         </Dialog.Trigger>
 
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoDialog}
           id="trigger-3"
           payload={3}
@@ -45,7 +45,7 @@ export default function DialogDetachedTriggersControlledDemo() {
 
         <button
           type="button"
-          className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-700 disabled:border-gray-500 disabled:text-gray-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
@@ -64,13 +64,13 @@ export default function DialogDetachedTriggersControlledDemo() {
         {({ payload }) => (
           <Dialog.Portal>
             <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-            <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+            <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
               {payload !== undefined && (
                 <Dialog.Title className="text-sm font-bold">Dialog {payload}</Dialog.Title>
               )}
 
               <div className="flex justify-end gap-3 mt-4">
-                <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                   Close
                 </Dialog.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
index 83d9bb2b7c3..f94c39c7311 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function DialogDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
       <Dialog.Trigger
-        className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoDialog}
       >
         View notifications
@@ -17,13 +17,13 @@ export default function DialogDetachedTriggersSimpleDemo() {
       <Dialog.Root handle={demoDialog}>
         <Dialog.Portal>
           <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-          <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+          <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
             <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
-            <Dialog.Description className="text-sm text-gray-600 dark:text-gray-400">
+            <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
               You are all caught up. Good job!
             </Dialog.Description>
             <div className="flex justify-end gap-3 mt-4">
-              <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Close
               </Dialog.Close>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
index 48705ca0965..4753923a3ed 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
@@ -6,28 +6,28 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -69,9 +69,9 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 0.75rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 100ms ease-out,
@@ -99,7 +99,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
index 4f471b85ba3..52b08bb3bb2 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
@@ -3,18 +3,18 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+        <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
           <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
-          <Dialog.Description className="text-sm text-gray-600 dark:text-gray-400">
+          <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
             You are all caught up. Good job!
           </Dialog.Description>
           <div className="flex justify-end gap-3 mt-4">
-            <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+            <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
               Close
             </Dialog.Close>
           </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
index be64cac05e0..31334d54472 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
@@ -6,28 +6,28 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -113,7 +113,7 @@
 
 .ScrollbarThumb {
   width: 100%;
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
 }
 
 .Popup {
@@ -124,9 +124,9 @@
   width: min(40rem, calc(100vw - 2rem));
   max-height: 100%;
   max-width: 100%;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 100ms ease-out,
@@ -160,7 +160,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .Body {
@@ -169,7 +169,7 @@
   display: flex;
   min-height: 0;
   overflow: hidden;
-  border-block: 1px solid light-dark(var(--color-gray-950), white);
+  border-block: 1px solid light-dark(var(--color-neutral-950), white);
 }
 
 .BodyViewport {
@@ -204,7 +204,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-700), var(--color-gray-300));
+  color: light-dark(var(--color-neutral-700), var(--color-neutral-300));
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
index dc004b59167..4f4942ad887 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
@@ -5,26 +5,26 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function InsideScrollDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="fixed inset-0 flex items-center justify-center overflow-hidden py-6 [@media(min-height:600px)]:pb-12 [@media(min-height:600px)]:pt-8">
-          <Dialog.Popup className="relative flex w-[min(40rem,calc(100vw-2rem))] max-h-full max-w-full min-h-0 flex-col overflow-hidden bg-white dark:bg-gray-950 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0">
+          <Dialog.Popup className="relative flex w-[min(40rem,calc(100vw-2rem))] max-h-full max-w-full min-h-0 flex-col overflow-hidden bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0">
             <div className="px-4 pt-4 pb-3">
               <Dialog.Title className="m-0 mb-1 text-base font-bold leading-6">Dialog</Dialog.Title>
-              <Dialog.Description className="m-0 text-sm leading-5 text-gray-600 dark:text-gray-400">
+              <Dialog.Description className="m-0 text-sm leading-5 text-neutral-600 dark:text-neutral-400">
                 This layout keeps the popup fully on screen while allowing its content to scroll.
               </Dialog.Description>
             </div>
-            <ScrollArea.Root className="relative flex min-h-0 flex-auto overflow-hidden border-y border-gray-950 dark:border-white">
+            <ScrollArea.Root className="relative flex min-h-0 flex-auto overflow-hidden border-y border-neutral-950 dark:border-white">
               <ScrollArea.Viewport className="flex-auto min-h-0 overflow-y-auto overscroll-contain focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 <ScrollArea.Content className="flex flex-col">
                   {CONTENT_SECTIONS.map((item) => (
                     <section className="p-4" key={item.title}>
                       <h3 className="mb-1 text-sm font-bold leading-5">{item.title}</h3>
-                      <p className="m-0 text-sm leading-5 text-gray-700 dark:text-gray-300">
+                      <p className="m-0 text-sm leading-5 text-neutral-700 dark:text-neutral-300">
                         {item.body}
                       </p>
                     </section>
@@ -32,11 +32,11 @@ export default function InsideScrollDialog() {
                 </ScrollArea.Content>
               </ScrollArea.Viewport>
               <ScrollArea.Scrollbar className="pointer-events-none flex w-3 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity duration-150 before:absolute before:h-full before:w-4 before:content-[''] data-[hovering]:pointer-events-auto data-[hovering]:opacity-100 data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0">
-                <ScrollArea.Thumb className="w-full bg-gray-950 dark:bg-white" />
+                <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
               </ScrollArea.Scrollbar>
             </ScrollArea.Root>
             <div className="flex justify-end gap-3 p-4">
-              <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Close
               </Dialog.Close>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
index baeec5deded..ab8948c4565 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
@@ -6,28 +6,28 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -50,12 +50,12 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
     }
   }
 
@@ -97,9 +97,9 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 0.75rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   translate: -50% calc(-50% + 1.25rem * var(--nested-dialogs));
   scale: calc(1 - 0.1 * var(--nested-dialogs));
@@ -145,7 +145,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
index a6f24d2d798..e9930966c82 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
@@ -3,29 +3,29 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-[ending-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:opacity-100 data-[starting-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0">
+        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-[ending-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:opacity-100 data-[starting-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0">
           <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
-          <Dialog.Description className="text-sm text-gray-600 dark:text-gray-400">
+          <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
             You are all caught up. Good job!
           </Dialog.Description>
           <div className="flex items-center gap-3 mt-4">
             <Dialog.Root>
-              <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Customize
               </Dialog.Trigger>
               <Dialog.Portal>
-                <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-[ending-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:opacity-100 data-[starting-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0">
+                <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-[ending-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:opacity-100 data-[starting-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0">
                   <Dialog.Title className="text-sm font-bold">Customize notifications</Dialog.Title>
-                  <Dialog.Description className="text-sm text-gray-600 dark:text-gray-400">
+                  <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
                     Review your settings here.
                   </Dialog.Description>
                   <div className="flex items-center justify-end gap-3 mt-4">
-                    <Dialog.Close className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                    <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                       Close
                     </Dialog.Close>
                   </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
index 4fb2c62c39a..ccae7767776 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
@@ -6,28 +6,28 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -107,7 +107,7 @@
 
 .ScrollbarThumb {
   width: 100%;
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
 }
 
 .Popup {
@@ -116,9 +116,9 @@
   width: min(40rem, calc(100vw - 2rem));
   padding: 1rem;
   margin: 4rem auto;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition: transform 350ms cubic-bezier(0.45, 1.005, 0, 1.005);
   outline: 0;
@@ -161,7 +161,7 @@
   margin: 0 0 1rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .Close {
@@ -177,12 +177,12 @@
   padding: 0;
   border: none;
   background-color: transparent;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
-      color: light-dark(var(--color-gray-950), white);
+      background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+      color: light-dark(var(--color-neutral-950), white);
     }
   }
 
@@ -215,18 +215,18 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-700), var(--color-gray-300));
+  color: light-dark(var(--color-neutral-700), var(--color-neutral-300));
 }
 
 .FooterNote {
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .FooterLink {
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   text-decoration: underline;
   text-decoration-thickness: 1px;
   text-underline-offset: 0.16em;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index f3cc13437d7..d37e094d26d 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function OutsideScrollDialog() {
   const popupRef = React.useRef<HTMLDivElement>(null);
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -22,7 +22,7 @@ export default function OutsideScrollDialog() {
                 <Dialog.Popup
                   ref={popupRef}
                   initialFocus={popupRef}
-                  className="outline-0 relative mx-auto my-16 w-[min(40rem,calc(100vw-2rem))] bg-white dark:bg-gray-950 p-4 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[translate] duration-[350ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-[starting-style]:translate-y-[100dvh] data-[ending-style]:translate-y-[max(100dvh,100%)] data-[ending-style]:duration-[220ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] motion-reduce:transition-none"
+                  className="outline-0 relative mx-auto my-16 w-[min(40rem,calc(100vw-2rem))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[translate] duration-[350ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-[starting-style]:translate-y-[100dvh] data-[ending-style]:translate-y-[max(100dvh,100%)] data-[ending-style]:duration-[220ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] motion-reduce:transition-none"
                 >
                   <div className="mb-1 flex items-start justify-between gap-3">
                     <Dialog.Title className="m-0 text-base font-bold leading-6">
@@ -30,13 +30,13 @@ export default function OutsideScrollDialog() {
                     </Dialog.Title>
                     <Dialog.Close
                       aria-label="Close"
-                      className="relative top-[-0.25rem] right-[-0.25rem] inline-flex items-center justify-center w-8 h-8 bg-transparent text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-950 dark:hover:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+                      className="relative top-[-0.25rem] right-[-0.25rem] inline-flex items-center justify-center w-8 h-8 bg-transparent text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-800 hover:text-neutral-950 dark:hover:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
                     >
                       <XIcon className="h-4 w-4" />
                     </Dialog.Close>
                   </div>
 
-                  <Dialog.Description className="m-0 mb-4 text-sm leading-5 text-gray-600 dark:text-gray-400">
+                  <Dialog.Description className="m-0 mb-4 text-sm leading-5 text-neutral-600 dark:text-neutral-400">
                     This layout keeps an outer container scrollable while the dialog can extend past
                     the bottom edge.
                   </Dialog.Description>
@@ -45,20 +45,20 @@ export default function OutsideScrollDialog() {
                     {CONTENT_SECTIONS.map((item) => (
                       <section key={item.title}>
                         <h3 className="m-0 mb-1 text-sm font-bold leading-5">{item.title}</h3>
-                        <p className="m-0 text-sm leading-5 text-gray-700 dark:text-gray-300">
+                        <p className="m-0 text-sm leading-5 text-neutral-700 dark:text-neutral-300">
                           {item.body}
                         </p>
                       </section>
                     ))}
                   </div>
 
-                  <p className="m-0 text-sm leading-5 text-gray-600 dark:text-gray-400">
+                  <p className="m-0 text-sm leading-5 text-neutral-600 dark:text-neutral-400">
                     Related docs:{' '}
                     {RELATED_LINKS.map((item, index) => (
                       <React.Fragment key={item.href}>
                         {index > 0 ? ', ' : null}
                         <a
-                          className="text-gray-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:outline-offset-2"
+                          className="text-neutral-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:outline-offset-2"
                           href={item.href}
                         >
                           {item.label}
@@ -71,7 +71,7 @@ export default function OutsideScrollDialog() {
               </ScrollArea.Content>
             </ScrollArea.Viewport>
             <ScrollArea.Scrollbar className="pointer-events-none flex w-3 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity duration-[250ms] data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-[75ms] data-[scrolling]:delay-[0ms] hover:pointer-events-auto hover:opacity-100 hover:duration-[75ms] hover:delay-[0ms] group-data-[ending-style]/dialog:opacity-0 group-data-[ending-style]/dialog:duration-[250ms]">
-              <ScrollArea.Thumb className="w-full bg-gray-950 dark:bg-white" />
+              <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
             </ScrollArea.Scrollbar>
           </ScrollArea.Root>
         </Dialog.Viewport>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
index e780a01ca01..683c3ab0099 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
@@ -6,28 +6,28 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -93,9 +93,9 @@
   max-width: 70rem;
   padding: 1rem;
   pointer-events: auto;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
 
@@ -120,9 +120,9 @@
   width: 2rem;
   height: 2rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
@@ -137,17 +137,17 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
index 86f5621634f..9b1cbbb0f9d 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleUncontainedDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -11,12 +11,12 @@ export default function ExampleUncontainedDialog() {
         <Dialog.Viewport className="fixed inset-0 grid place-items-center px-4 py-12 xl:py-6">
           <Dialog.Popup className="group/popup relative flex h-full w-full max-w-[70rem] xl:max-w-none justify-center pointer-events-none transition-opacity duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0">
             <Dialog.Close
-              className="absolute right-0 -top-10 flex h-8 w-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none hover:bg-gray-100 dark:hover:bg-gray-800 xl:top-0 xl:h-10 xl:w-10 pointer-events-auto focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+              className="absolute right-0 -top-10 flex h-8 w-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none hover:bg-neutral-100 dark:hover:bg-neutral-800 xl:top-0 xl:h-10 xl:w-10 pointer-events-auto focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
               aria-label="Close"
             >
               <XIcon className="h-6 w-6" />
             </Dialog.Close>
-            <div className="pointer-events-auto box-border h-full w-full max-w-[70rem] bg-white dark:bg-gray-950 p-4 text-gray-950 dark:text-white border border-gray-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[starting-style]/popup:scale-105" />
+            <div className="pointer-events-auto box-border h-full w-full max-w-[70rem] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[starting-style]/popup:scale-105" />
           </Dialog.Popup>
         </Dialog.Viewport>
       </Dialog.Portal>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
index 6b089d85d70..1bdf27f86c3 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
@@ -7,24 +7,24 @@
   padding: 0 0.875rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  background-color: var(--color-neutral-50);
   font-family: inherit;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: var(--color-neutral-100);
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 
   &:focus-visible {
@@ -90,9 +90,9 @@
   padding: 1.5rem;
   padding-right: calc(1.5rem + var(--bleed));
   margin-right: calc(-1 * var(--bleed));
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  outline: 1px solid var(--color-neutral-200);
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-900);
   overflow-y: auto;
   overscroll-behavior: contain;
   touch-action: auto;
@@ -105,7 +105,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
   }
 
   &[data-starting-style],
@@ -142,7 +142,7 @@
   margin: 0 0 1.5rem;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
index 2343d513f34..7610998fc34 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
@@ -3,20 +3,20 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawer() {
   return (
     <Drawer.Root swipeDirection="right">
-      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal 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">
+      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
         Open drawer
       </Drawer.Trigger>
       <Drawer.Portal>
         <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
         <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] fixed inset-0 flex items-stretch justify-end p-[var(--viewport-padding)]">
-          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] bg-gray-50 p-6 pr-[calc(1.5rem+3rem)] text-gray-900 outline outline-1 outline-gray-200 overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[ending-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[starting-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-20px)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:pr-6 dark:outline-gray-300">
+          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] bg-neutral-50 p-6 pr-[calc(1.5rem+3rem)] text-neutral-900 outline outline-1 outline-neutral-200 overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[ending-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[starting-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-20px)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:pr-6 dark:outline-neutral-300">
             <Drawer.Content className="mx-auto w-full max-w-[32rem]">
               <Drawer.Title className="-mt-1.5 mb-1 text-lg font-bold">Drawer</Drawer.Title>
-              <Drawer.Description className="mb-6 text-base text-gray-600">
+              <Drawer.Description className="mb-6 text-base text-neutral-600">
                 This is a drawer that slides in from the side. You can swipe to dismiss it.
               </Drawer.Description>
               <div className="flex justify-end gap-4">
-                <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal 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">
+                <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
index 7d965c62fb0..3ebe871d7e8 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
@@ -16,11 +16,11 @@
     border-radius 0.25s cubic-bezier(0.32, 0.72, 0, 1);
   transform-origin: center top;
   will-change: transform;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   contain: layout;
   padding: 1rem;
-  color: var(--color-gray-900);
-  background-color: var(--color-gray-50);
+  color: var(--color-neutral-900);
+  background-color: var(--color-neutral-50);
   transition-duration:
     calc(400ms * var(--indent-transition)), calc(250ms * var(--indent-transition));
 
@@ -45,7 +45,7 @@
   background-color: black;
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-gray-300);
+    background-color: var(--color-neutral-300);
   }
 }
 
@@ -58,24 +58,24 @@
   padding: 0 0.875rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  background-color: var(--color-neutral-50);
   font-family: inherit;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: var(--color-neutral-100);
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 
   &:focus-visible {
@@ -130,9 +130,9 @@
   padding: 1rem 1.5rem 1.5rem;
   padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + var(--bleed));
   border-radius: 1rem 1rem 0 0;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  outline: 1px solid var(--color-neutral-200);
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-900);
   overflow-y: auto;
   overscroll-behavior: contain;
   transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
@@ -144,7 +144,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
   }
 
   &[data-starting-style],
@@ -168,7 +168,7 @@
   height: 0.25rem;
   margin: 0 auto 1rem;
   border-radius: 9999px;
-  background-color: var(--color-gray-300);
+  background-color: var(--color-neutral-300);
 }
 
 .Title {
@@ -184,7 +184,7 @@
   margin: 0 0 1.5rem;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
   text-align: center;
 }
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
index 10d003f6eff..bab76e61178 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
@@ -8,27 +8,27 @@ export default function ExampleDrawer() {
   return (
     <Drawer.Provider>
       <div ref={setPortalContainer} className="[--bleed:3rem] relative w-full overflow-hidden">
-        <Drawer.IndentBackground className="absolute inset-0 bg-black dark:bg-gray-300" />
-        <Drawer.Indent className="[--indent-progress:var(--drawer-swipe-progress)] [--indent-radius:calc(1rem*(1-var(--indent-progress)))] [--indent-transition:calc(1-clamp(0,calc(var(--drawer-swipe-progress)*100000),1))] relative min-h-[320px] bg-gray-50 border border-gray-200 p-4 text-gray-900 [transition:transform_0.4s_cubic-bezier(0.32,0.72,0,1),border-radius_0.25s_cubic-bezier(0.32,0.72,0,1)] origin-[center_top] will-change-transform [transform:scale(1)_translateY(0)] [transition-duration:calc(400ms*var(--indent-transition)),calc(250ms*var(--indent-transition))] data-[active]:[transform:scale(calc(0.98+(0.02*var(--indent-progress))))_translateY(calc(0.5rem*(1-var(--indent-progress))))] data-[active]:[border-top-left-radius:var(--indent-radius)] data-[active]:[border-top-right-radius:var(--indent-radius)]">
+        <Drawer.IndentBackground className="absolute inset-0 bg-black dark:bg-neutral-300" />
+        <Drawer.Indent className="[--indent-progress:var(--drawer-swipe-progress)] [--indent-radius:calc(1rem*(1-var(--indent-progress)))] [--indent-transition:calc(1-clamp(0,calc(var(--drawer-swipe-progress)*100000),1))] relative min-h-[320px] bg-neutral-50 border border-neutral-200 p-4 text-neutral-900 [transition:transform_0.4s_cubic-bezier(0.32,0.72,0,1),border-radius_0.25s_cubic-bezier(0.32,0.72,0,1)] origin-[center_top] will-change-transform [transform:scale(1)_translateY(0)] [transition-duration:calc(400ms*var(--indent-transition)),calc(250ms*var(--indent-transition))] data-[active]:[transform:scale(calc(0.98+(0.02*var(--indent-progress))))_translateY(calc(0.5rem*(1-var(--indent-progress))))] data-[active]:[border-top-left-radius:var(--indent-radius)] data-[active]:[border-top-right-radius:var(--indent-radius)]">
           <div className="flex min-h-[320px] items-center justify-center">
             <Drawer.Root modal={false}>
-              <Drawer.Trigger className="box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal leading-6 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">
+              <Drawer.Trigger className="box-border flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal leading-6 text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
                 Open drawer
               </Drawer.Trigger>
               <Drawer.Portal container={portalContainer}>
                 <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] absolute inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
                 <Drawer.Viewport className="absolute inset-0 flex items-end justify-center">
-                  <Drawer.Popup className="box-border w-full max-h-[calc(80vh+var(--bleed))] -mb-[var(--bleed)] rounded-t-2xl outline outline-1 outline-gray-200 bg-gray-50 px-6 py-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+var(--bleed))] text-gray-900 overflow-y-auto overscroll-contain transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] [transform:translateY(var(--drawer-swipe-movement-y))] data-[swiping]:select-none data-[ending-style]:[transform:translateY(calc(100%-var(--bleed)+2px))] data-[starting-style]:[transform:translateY(calc(100%-var(--bleed)+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:outline-gray-300">
-                    <div className="mx-auto mb-4 h-1 w-12 rounded-full bg-gray-300" />
+                  <Drawer.Popup className="box-border w-full max-h-[calc(80vh+var(--bleed))] -mb-[var(--bleed)] rounded-t-2xl outline outline-1 outline-neutral-200 bg-neutral-50 px-6 py-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+var(--bleed))] text-neutral-900 overflow-y-auto overscroll-contain transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] [transform:translateY(var(--drawer-swipe-movement-y))] data-[swiping]:select-none data-[ending-style]:[transform:translateY(calc(100%-var(--bleed)+2px))] data-[starting-style]:[transform:translateY(calc(100%-var(--bleed)+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:outline-neutral-300">
+                    <div className="mx-auto mb-4 h-1 w-12 rounded-full bg-neutral-300" />
                     <Drawer.Content className="mx-auto w-full max-w-[32rem]">
                       <Drawer.Title className="mt-0 mb-1 text-lg leading-7 font-bold tracking-[-0.0025em] text-center">
                         Notifications
                       </Drawer.Title>
-                      <Drawer.Description className="mb-6 text-base leading-6 text-gray-600 text-center">
+                      <Drawer.Description className="mb-6 text-base leading-6 text-neutral-600 text-center">
                         You are all caught up. Good job!
                       </Drawer.Description>
                       <div className="flex justify-center gap-4">
-                        <Drawer.Close className="box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal leading-6 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">
+                        <Drawer.Close className="box-border flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal leading-6 text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
                           Close
                         </Drawer.Close>
                       </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
index 531943ce478..8b7fe6852ec 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
@@ -7,24 +7,24 @@
   padding: 0 0.875rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  background-color: var(--color-neutral-50);
   font-family: inherit;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: var(--color-neutral-100);
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 
   &:focus-visible {
@@ -142,19 +142,19 @@
   padding: 1rem 1.5rem 1.5rem;
   border-top-left-radius: 1rem;
   border-top-right-radius: 1rem;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
+  outline: 1px solid var(--color-neutral-200);
+  background-color: var(--color-neutral-50);
   box-shadow:
     0 10px 64px -10px rgb(36 40 52 / 20%),
-    0 0.25px 0 1px var(--color-gray-200);
-  color: var(--color-gray-900);
+    0 0.25px 0 1px var(--color-neutral-200);
+  color: var(--color-neutral-900);
   transition: box-shadow 350ms cubic-bezier(0.375, 0.015, 0.545, 0.455);
 }
 
 @media (prefers-color-scheme: dark) {
   .Panel {
-    outline: 1px solid var(--color-gray-300);
-    box-shadow: 0 0 0 1px var(--color-gray-200);
+    outline: 1px solid var(--color-neutral-300);
+    box-shadow: 0 0 0 1px var(--color-neutral-200);
   }
 }
 
@@ -192,7 +192,7 @@
   width: 3rem;
   height: 0.25rem;
   border-radius: 9999px;
-  background-color: var(--color-gray-300);
+  background-color: var(--color-neutral-300);
   justify-self: center;
 }
 
@@ -203,19 +203,19 @@
   align-items: center;
   justify-content: center;
   border-radius: 9999px;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  border: 1px solid var(--color-neutral-200);
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-900);
   justify-self: end;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: var(--color-neutral-100);
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 
   &:focus-visible {
@@ -235,7 +235,7 @@
   margin: 0 0 1.25rem;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
 }
 
 .ScrollArea {
@@ -268,7 +268,7 @@
   border-radius: 0.75rem;
   color: inherit;
   text-decoration: none;
-  background-color: var(--color-gray-100);
+  background-color: var(--color-neutral-100);
 
   &:focus-visible {
     outline: 2px solid var(--color-blue);
@@ -308,7 +308,7 @@
 .ScrollbarThumb {
   width: 100%;
   border-radius: inherit;
-  background-color: var(--color-gray-500);
+  background-color: var(--color-neutral-500);
 
   &::before {
     content: '';
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
index 4b0921cccb4..c7fe7531436 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
@@ -53,7 +53,7 @@ const LONG_LIST = [
 export default function ExampleDrawerMobileNav() {
   return (
     <Drawer.Root>
-      <Drawer.Trigger className="box-border flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 m-0 outline-none text-base font-normal leading-6 text-gray-900 select-none hover:bg-gray-100 active:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1">
+      <Drawer.Trigger className="box-border flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 m-0 outline-none text-base font-normal leading-6 text-neutral-900 select-none hover:bg-neutral-100 active:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1">
         Open mobile menu
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -68,14 +68,14 @@ export default function ExampleDrawerMobileNav() {
                 <Drawer.Popup className="group box-border w-full max-w-[42rem] outline-none transition-transform duration-[800ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] [transform:translateY(var(--drawer-swipe-movement-y))] data-[swiping]:select-none data-[ending-style]:[transform:translateY(calc(max(100dvh,100%)+2px))] data-[ending-style]:duration-[350ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)]">
                   <nav
                     aria-label="Navigation"
-                    className="relative flex flex-col rounded-t-2xl bg-gray-50 px-6 pt-4 pb-6 text-gray-900 shadow-[0_10px_64px_-10px_rgb(36_40_52/20%),0_0.25px_0_1px_oklch(12%_9%_264deg/7%)] outline outline-1 outline-gray-200 transition-shadow duration-[350ms] ease-[cubic-bezier(0.375,0.015,0.545,0.455)] group-data-[ending-style]:shadow-[0_10px_64px_-10px_rgb(36_40_52/0%),0_0.25px_0_1px_rgb(0_0_0/0%)] dark:outline-gray-300 dark:shadow-[0_0_0_1px_oklch(29%_0.75%_264deg/80%)] dark:group-data-[ending-style]:shadow-[0_0_0_1px_rgb(0_0_0/0%)] md:rounded-xl"
+                    className="relative flex flex-col rounded-t-2xl bg-neutral-50 px-6 pt-4 pb-6 text-neutral-900 shadow-[0_10px_64px_-10px_rgb(36_40_52/20%),0_0.25px_0_1px_oklch(12%_9%_264deg/7%)] outline outline-1 outline-neutral-200 transition-shadow duration-[350ms] ease-[cubic-bezier(0.375,0.015,0.545,0.455)] group-data-[ending-style]:shadow-[0_10px_64px_-10px_rgb(36_40_52/0%),0_0.25px_0_1px_rgb(0_0_0/0%)] dark:outline-neutral-300 dark:shadow-[0_0_0_1px_oklch(29%_0.75%_264deg/80%)] dark:group-data-[ending-style]:shadow-[0_0_0_1px_rgb(0_0_0/0%)] md:rounded-xl"
                   >
                     <div className="mb-3 grid grid-cols-[1fr_auto_1fr] items-center">
                       <div aria-hidden className="h-9 w-9" />
-                      <div className="h-1 w-12 justify-self-center rounded-full bg-gray-300" />
+                      <div className="h-1 w-12 justify-self-center rounded-full bg-neutral-300" />
                       <Drawer.Close
                         aria-label="Close menu"
-                        className="flex h-9 w-9 items-center justify-center justify-self-end rounded-full border border-gray-200 bg-gray-50 text-gray-900 hover:bg-gray-100 active:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1"
+                        className="flex h-9 w-9 items-center justify-center justify-self-end rounded-full border border-neutral-200 bg-neutral-50 text-neutral-900 hover:bg-neutral-100 active:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1"
                       >
                         <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                           <path
@@ -93,7 +93,7 @@ export default function ExampleDrawerMobileNav() {
                       <Drawer.Title className="m-0 mb-1 text-lg font-bold leading-7 tracking-[-0.0025em]">
                         Menu
                       </Drawer.Title>
-                      <Drawer.Description className="m-0 mb-5 text-base leading-6 text-gray-600">
+                      <Drawer.Description className="m-0 mb-5 text-base leading-6 text-neutral-600">
                         Scroll the long list. Flick down from the top to dismiss.
                       </Drawer.Description>
 
@@ -102,7 +102,7 @@ export default function ExampleDrawerMobileNav() {
                           {ITEMS.map((item) => (
                             <li key={item.label} className="flex">
                               <a
-                                className="w-full rounded-xl bg-gray-100 px-4 py-3 text-gray-900 no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1"
+                                className="w-full rounded-xl bg-neutral-100 px-4 py-3 text-neutral-900 no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1"
                                 href={item.href}
                               >
                                 {item.label}
@@ -118,7 +118,7 @@ export default function ExampleDrawerMobileNav() {
                           {LONG_LIST.map((item) => (
                             <li key={item.label} className="flex">
                               <a
-                                className="w-full rounded-xl bg-gray-100 px-4 py-3 text-gray-900 no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1"
+                                className="w-full rounded-xl bg-neutral-100 px-4 py-3 text-neutral-900 no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1"
                                 href={item.href}
                               >
                                 {item.label}
@@ -133,7 +133,7 @@ export default function ExampleDrawerMobileNav() {
               </ScrollArea.Content>
             </ScrollArea.Viewport>
             <ScrollArea.Scrollbar className="pointer-events-none absolute m-[0.4rem] flex w-[0.25rem] justify-center rounded-[1rem] opacity-0 transition-opacity duration-[250ms] data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-[75ms] data-[scrolling]:delay-[0ms] hover:pointer-events-auto hover:opacity-100 hover:duration-[75ms] hover:delay-[0ms] md:w-[0.4375rem] data-[ending-style]:opacity-0 data-[ending-style]:duration-[250ms]">
-              <ScrollArea.Thumb className="w-full rounded-[inherit] bg-gray-500 before:absolute before:content-[''] before:top-1/2 before:left-1/2 before:h-[calc(100%+1rem)] before:w-[calc(100%+1rem)] before:-translate-x-1/2 before:-translate-y-1/2" />
+              <ScrollArea.Thumb className="w-full rounded-[inherit] bg-neutral-500 before:absolute before:content-[''] before:top-1/2 before:left-1/2 before:h-[calc(100%+1rem)] before:w-[calc(100%+1rem)] before:-translate-x-1/2 before:-translate-y-1/2" />
             </ScrollArea.Scrollbar>
           </ScrollArea.Root>
         </Drawer.Viewport>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
index a21b03b8ef7..839c780ce90 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
@@ -7,24 +7,24 @@
   padding: 0 0.875rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  background-color: var(--color-neutral-50);
   font-family: inherit;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: var(--color-neutral-100);
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 
   &:focus-visible {
@@ -146,9 +146,9 @@
   padding: 1rem 1.5rem 1.5rem;
   padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + var(--bleed));
   border-radius: 1rem 1rem 0 0;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  outline: 1px solid var(--color-neutral-200);
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-900);
   overflow-y: auto;
   overscroll-behavior: contain;
   transform-origin: 50% calc(100% - var(--bleed));
@@ -169,7 +169,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
   }
 
   &::after {
@@ -222,7 +222,7 @@
   height: 0.25rem;
   margin: 0 auto 1rem;
   border-radius: 9999px;
-  background-color: var(--color-gray-300);
+  background-color: var(--color-neutral-300);
   transition: opacity 0.2s;
 
   [data-nested-drawer-open] & {
@@ -247,7 +247,7 @@
   margin: 0 0 1.5rem;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
   text-align: center;
 }
 
@@ -265,7 +265,7 @@
 .List {
   margin: 0 0 1.5rem;
   padding-left: 1.25rem;
-  color: var(--color-gray-700);
+  color: var(--color-neutral-700);
 }
 
 .Field {
@@ -278,7 +278,7 @@
   font-size: 0.925rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-gray-700);
+  color: var(--color-neutral-700);
 }
 
 .Input,
@@ -286,9 +286,9 @@
   box-sizing: border-box;
   width: 100%;
   border-radius: 0.375rem;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  border: 1px solid var(--color-neutral-200);
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-900);
   padding: 0.5rem 0.625rem;
   font: inherit;
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
index 2da5b0ee11d..7a23725a97c 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawerNested() {
   return (
     <Drawer.Root>
-      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal 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">
+      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
         Open drawer stack
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -14,7 +14,7 @@ export default function ExampleDrawerNested() {
             <div className={handleClassName} />
             <Drawer.Content className={contentClassName}>
               <Drawer.Title className="mb-1 text-lg font-bold text-center">Account</Drawer.Title>
-              <Drawer.Description className="mb-6 text-base text-gray-600 text-center">
+              <Drawer.Description className="mb-6 text-base text-neutral-600 text-center">
                 Nested drawers can be styled to stack, while each drawer remains independently focus
                 managed.
               </Drawer.Description>
@@ -33,11 +33,11 @@ export default function ExampleDrawerNested() {
                             <Drawer.Title className="mb-1 text-lg font-bold text-center">
                               Security
                             </Drawer.Title>
-                            <Drawer.Description className="mb-6 text-base text-gray-600 text-center">
+                            <Drawer.Description className="mb-6 text-base text-neutral-600 text-center">
                               Review sign-in activity and update your security preferences.
                             </Drawer.Description>
 
-                            <ul className="mb-6 list-disc pl-5 text-gray-700">
+                            <ul className="mb-6 list-disc pl-5 text-neutral-700">
                               <li>Passkeys enabled</li>
                               <li>2FA via authenticator app</li>
                               <li>3 signed-in devices</li>
@@ -57,42 +57,42 @@ export default function ExampleDrawerNested() {
                                           <Drawer.Title className="mb-1 text-lg font-bold text-center">
                                             Advanced
                                           </Drawer.Title>
-                                          <Drawer.Description className="mb-6 text-base text-gray-600 text-center">
+                                          <Drawer.Description className="mb-6 text-base text-neutral-600 text-center">
                                             This drawer is taller to demonstrate variable-height
                                             stacking.
                                           </Drawer.Description>
 
                                           <div className="grid gap-1.5 mb-4">
                                             <label
-                                              className="text-sm font-bold text-gray-700"
+                                              className="text-sm font-bold text-neutral-700"
                                               htmlFor="device-name-tw"
                                             >
                                               Device name
                                             </label>
                                             <input
                                               id="device-name-tw"
-                                              className="w-full rounded-md border border-gray-200 bg-gray-50 px-2.5 py-2 text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 font-normal"
+                                              className="w-full rounded-md border border-neutral-200 bg-neutral-50 px-2.5 py-2 text-neutral-900 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 font-normal"
                                               defaultValue="Personal laptop"
                                             />
                                           </div>
 
                                           <div className="grid gap-1.5 mb-4">
                                             <label
-                                              className="text-sm font-bold text-gray-700"
+                                              className="text-sm font-bold text-neutral-700"
                                               htmlFor="notes-tw"
                                             >
                                               Notes
                                             </label>
                                             <textarea
                                               id="notes-tw"
-                                              className="w-full rounded-md border border-gray-200 bg-gray-50 px-2.5 py-2 text-gray-900 resize-y focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 font-normal"
+                                              className="w-full rounded-md border border-neutral-200 bg-neutral-50 px-2.5 py-2 text-neutral-900 resize-y focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 font-normal"
                                               defaultValue="Rotate recovery codes and revoke older sessions."
                                               rows={3}
                                             />
                                           </div>
 
                                           <div className="flex justify-end">
-                                            <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal 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">
+                                            <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
                                               Done
                                             </Drawer.Close>
                                           </div>
@@ -103,7 +103,7 @@ export default function ExampleDrawerNested() {
                                 </Drawer.Root>
                               </div>
 
-                              <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal 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">
+                              <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
                                 Close
                               </Drawer.Close>
                             </div>
@@ -114,7 +114,7 @@ export default function ExampleDrawerNested() {
                   </Drawer.Root>
                 </div>
 
-                <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal 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">
+                <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
                   Close
                 </Drawer.Close>
               </div>
@@ -127,10 +127,10 @@ export default function ExampleDrawerNested() {
 }
 
 const popupClassName =
-  "[--bleed:3rem] [--peek:1rem] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))] group/popup relative -mb-[3rem] w-full max-h-[calc(80vh+3rem)] [height:var(--drawer-height,auto)] rounded-t-2xl bg-gray-50 px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] text-gray-900 outline outline-1 outline-gray-200 overflow-y-auto overscroll-contain touch-auto [transform-origin:50%_calc(100%-var(--bleed))] [transform:translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] after:absolute after:inset-0 after:rounded-[inherit] after:bg-transparent after:pointer-events-none after:content-[''] after:transition-[background-color] after:duration-[450ms] after:ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[swiping]:duration-0 data-[nested-drawer-swiping]:duration-0 data-[starting-style]:[transform:translateY(calc(100%-var(--bleed)+2px))] data-[ending-style]:[transform:translateY(calc(100%-var(--bleed)+2px))] data-[ending-style]:opacity-[0.9999] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[ending-style]:data-[swiping]:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[ending-style]:data-[nested-drawer-swiping]:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[nested-drawer-open]:h-[calc(var(--height)+var(--bleed))] data-[nested-drawer-open]:overflow-hidden data-[nested-drawer-open]:after:bg-black/5 dark:outline-gray-300 [transition:transform_450ms_cubic-bezier(0.32,0.72,0,1),height_450ms_cubic-bezier(0.32,0.72,0,1),opacity_450ms_cubic-bezier(0.32,0.72,0,1)]";
+  "[--bleed:3rem] [--peek:1rem] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))] group/popup relative -mb-[3rem] w-full max-h-[calc(80vh+3rem)] [height:var(--drawer-height,auto)] rounded-t-2xl bg-neutral-50 px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] text-neutral-900 outline outline-1 outline-neutral-200 overflow-y-auto overscroll-contain touch-auto [transform-origin:50%_calc(100%-var(--bleed))] [transform:translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] after:absolute after:inset-0 after:rounded-[inherit] after:bg-transparent after:pointer-events-none after:content-[''] after:transition-[background-color] after:duration-[450ms] after:ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[swiping]:duration-0 data-[nested-drawer-swiping]:duration-0 data-[starting-style]:[transform:translateY(calc(100%-var(--bleed)+2px))] data-[ending-style]:[transform:translateY(calc(100%-var(--bleed)+2px))] data-[ending-style]:opacity-[0.9999] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[ending-style]:data-[swiping]:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[ending-style]:data-[nested-drawer-swiping]:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[nested-drawer-open]:h-[calc(var(--height)+var(--bleed))] data-[nested-drawer-open]:overflow-hidden data-[nested-drawer-open]:after:bg-black/5 dark:outline-neutral-300 [transition:transform_450ms_cubic-bezier(0.32,0.72,0,1),height_450ms_cubic-bezier(0.32,0.72,0,1),opacity_450ms_cubic-bezier(0.32,0.72,0,1)]";
 
 const contentClassName =
   'mx-auto w-full max-w-[32rem] transition-opacity duration-[300ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] group-data-[nested-drawer-open]/popup:opacity-0 group-data-[nested-drawer-swiping]/popup:opacity-100';
 
 const handleClassName =
-  'mx-auto mb-4 h-1 w-12 rounded-full bg-gray-300 transition-opacity duration-[200ms] group-data-[nested-drawer-open]/popup:opacity-0 group-data-[nested-drawer-swiping]/popup:opacity-100';
+  'mx-auto mb-4 h-1 w-12 rounded-full bg-neutral-300 transition-opacity duration-[200ms] group-data-[nested-drawer-open]/popup:opacity-0 group-data-[nested-drawer-swiping]/popup:opacity-100';
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
index 2c532940f2e..d1d9e955a67 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
@@ -7,24 +7,24 @@
   padding: 0 0.875rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  background-color: var(--color-neutral-50);
   font-family: inherit;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: var(--color-neutral-100);
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 
   &:focus-visible {
@@ -91,9 +91,9 @@
   padding: 1.5rem;
   padding-right: calc(1.5rem + var(--bleed));
   margin-right: calc(-1 * var(--bleed));
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  outline: 1px solid var(--color-neutral-200);
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-900);
   overflow-y: auto;
   overscroll-behavior: contain;
   touch-action: auto;
@@ -112,7 +112,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
   }
 
   &[data-starting-style],
@@ -152,7 +152,7 @@
   margin: 0 0 1.5rem;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
index 7ca13738851..7586e77626c 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
@@ -3,22 +3,22 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawer() {
   return (
     <Drawer.Root swipeDirection="right" modal={false} disablePointerDismissal>
-      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal 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">
+      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
         Open non-modal drawer
       </Drawer.Trigger>
       <Drawer.Portal>
         <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] fixed inset-0 flex items-stretch justify-end p-[var(--viewport-padding)] pointer-events-none">
-          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] pointer-events-auto h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] bg-gray-50 p-6 pr-[calc(1.5rem+3rem)] text-gray-900 outline outline-1 outline-gray-200 overflow-y-auto overscroll-contain touch-auto shadow-[0_-16px_48px_rgb(0_0_0/0.12),0_6px_18px_rgb(0_0_0/0.06)] data-[starting-style]:shadow-[0_-16px_48px_rgb(0_0_0/0),0_6px_18px_rgb(0_0_0/0)] data-[ending-style]:shadow-[0_-16px_48px_rgb(0_0_0/0),0_6px_18px_rgb(0_0_0/0)] [transform:translateX(var(--drawer-swipe-movement-x))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[ending-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[starting-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-20px)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:pr-6 dark:outline-gray-300">
+          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] pointer-events-auto h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] bg-neutral-50 p-6 pr-[calc(1.5rem+3rem)] text-neutral-900 outline outline-1 outline-neutral-200 overflow-y-auto overscroll-contain touch-auto shadow-[0_-16px_48px_rgb(0_0_0/0.12),0_6px_18px_rgb(0_0_0/0.06)] data-[starting-style]:shadow-[0_-16px_48px_rgb(0_0_0/0),0_6px_18px_rgb(0_0_0/0)] data-[ending-style]:shadow-[0_-16px_48px_rgb(0_0_0/0),0_6px_18px_rgb(0_0_0/0)] [transform:translateX(var(--drawer-swipe-movement-x))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[ending-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[starting-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-20px)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:pr-6 dark:outline-neutral-300">
             <Drawer.Content className="mx-auto w-full max-w-[32rem]">
               <Drawer.Title className="-mt-1.5 mb-1 text-lg font-bold">
                 Non-modal drawer
               </Drawer.Title>
-              <Drawer.Description className="mb-6 text-base text-gray-600">
+              <Drawer.Description className="mb-6 text-base text-neutral-600">
                 This drawer does not trap focus and ignores outside clicks. Use the close button or
                 swipe to dismiss it.
               </Drawer.Description>
               <div className="flex justify-end gap-4">
-                <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal 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">
+                <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
index 1521aa7f0aa..f48c29f6fea 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
@@ -7,24 +7,24 @@
   padding: 0 0.875rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  background-color: var(--color-neutral-50);
   font-family: inherit;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: var(--color-neutral-100);
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 
   &:focus-visible {
@@ -80,9 +80,9 @@
   padding: 1rem 1.5rem 1.5rem;
   padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + var(--bleed));
   border-radius: 1rem 1rem 0 0;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  outline: 1px solid var(--color-neutral-200);
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-900);
   overflow-y: auto;
   overscroll-behavior: contain;
   transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
@@ -94,7 +94,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
   }
 
   &[data-starting-style],
@@ -118,7 +118,7 @@
   height: 0.25rem;
   margin: 0 auto 1rem;
   border-radius: 9999px;
-  background-color: var(--color-gray-300);
+  background-color: var(--color-neutral-300);
 }
 
 .Title {
@@ -134,7 +134,7 @@
   margin: 0 0 1.5rem;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
   text-align: center;
 }
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
index 899e284c3e4..f7f686c0744 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
@@ -3,23 +3,23 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawer() {
   return (
     <Drawer.Root>
-      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal 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">
+      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
         Open bottom drawer
       </Drawer.Trigger>
       <Drawer.Portal>
         <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
         <Drawer.Viewport className="fixed inset-0 flex items-end justify-center">
-          <Drawer.Popup className="-mb-[3rem] w-full max-h-[calc(80vh+3rem)] rounded-t-2xl bg-gray-50 px-6 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] pt-4 text-gray-900 outline outline-1 outline-gray-200 overflow-y-auto overscroll-contain touch-auto [transform:translateY(var(--drawer-swipe-movement-y))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[ending-style]:[transform:translateY(calc(100%-3rem+2px))] data-[starting-style]:[transform:translateY(calc(100%-3rem+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:outline-gray-300">
-            <div className="w-12 h-1 mx-auto mb-4 rounded-full bg-gray-300" />
+          <Drawer.Popup className="-mb-[3rem] w-full max-h-[calc(80vh+3rem)] rounded-t-2xl bg-neutral-50 px-6 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] pt-4 text-neutral-900 outline outline-1 outline-neutral-200 overflow-y-auto overscroll-contain touch-auto [transform:translateY(var(--drawer-swipe-movement-y))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[ending-style]:[transform:translateY(calc(100%-3rem+2px))] data-[starting-style]:[transform:translateY(calc(100%-3rem+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:outline-neutral-300">
+            <div className="w-12 h-1 mx-auto mb-4 rounded-full bg-neutral-300" />
             <Drawer.Content className="mx-auto w-full max-w-[32rem]">
               <Drawer.Title className="mb-1 text-lg font-bold text-center">
                 Notifications
               </Drawer.Title>
-              <Drawer.Description className="mb-6 text-base text-gray-600 text-center">
+              <Drawer.Description className="mb-6 text-base text-neutral-600 text-center">
                 You are all caught up. Good job!
               </Drawer.Description>
               <div className="flex justify-center gap-4">
-                <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal 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">
+                <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
index 18228a3458b..86fdb6ce0b0 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
@@ -7,24 +7,24 @@
   padding: 0 0.875rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  background-color: var(--color-neutral-50);
   font-family: inherit;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: var(--color-neutral-100);
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 
   &:focus-visible {
@@ -88,9 +88,9 @@
   max-height: calc(100dvh - var(--top-margin));
   padding-bottom: max(0px, calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y)));
   border-radius: 1rem 1rem 0 0;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  outline: 1px solid var(--color-neutral-200);
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-900);
   overflow: visible;
   touch-action: none;
   box-shadow:
@@ -117,7 +117,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
   }
 
   &[data-starting-style],
@@ -137,11 +137,11 @@
 .DragArea {
   flex-shrink: 0;
   padding: 0.875rem 1.5rem 0.75rem;
-  border-bottom: 1px solid var(--color-gray-200);
+  border-bottom: 1px solid var(--color-neutral-200);
   touch-action: none;
 
   @media (prefers-color-scheme: dark) {
-    border-bottom-color: var(--color-gray-300);
+    border-bottom-color: var(--color-neutral-300);
   }
 }
 
@@ -160,7 +160,7 @@
   margin: 0 auto 0.625rem;
   flex-shrink: 0;
   border-radius: 9999px;
-  background-color: var(--color-gray-300);
+  background-color: var(--color-neutral-300);
 }
 
 .Title {
@@ -176,7 +176,7 @@
   margin: 0 0 1.5rem;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
   text-align: center;
 }
 
@@ -197,8 +197,8 @@
 .Card {
   height: 3rem;
   border-radius: 0.75rem;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-100);
+  border: 1px solid var(--color-neutral-200);
+  background-color: var(--color-neutral-100);
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
index 598057b5ef1..398d969e9c4 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
@@ -14,37 +14,37 @@ const snapPoints = [...VISIBLE_SNAP_POINTS_REM.map(toViewportSnapPoint), 1];
 export default function ExampleDrawerSnapPoints() {
   return (
     <Drawer.Root snapPoints={snapPoints}>
-      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal 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">
+      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
         Open snap drawer
       </Drawer.Trigger>
       <Drawer.Portal>
         <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
         <Drawer.Viewport className="fixed inset-0 flex items-end justify-center touch-none">
           <Drawer.Popup
-            className="relative flex w-full max-h-[calc(100dvh-var(--top-margin))] min-h-0 flex-col overflow-visible rounded-t-2xl bg-gray-50 text-gray-900 outline outline-1 outline-gray-200 touch-none shadow-[0_-16px_48px_rgb(0_0_0/0.12),0_6px_18px_rgb(0_0_0/0.06)] [--bleed:3rem] [padding-bottom:max(0px,calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] [transform:translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-[var(--bleed)] after:bg-gray-50 after:content-[''] data-[swiping]:select-none data-[ending-style]:[transform:translateY(calc(100%+2px))] data-[starting-style]:[transform:translateY(calc(100%+2px))] data-[starting-style]:[padding-bottom:0] data-[ending-style]:[padding-bottom:0] data-[starting-style]:shadow-[0_-16px_48px_rgb(0_0_0/0),0_6px_18px_rgb(0_0_0/0)] data-[ending-style]:shadow-[0_-16px_48px_rgb(0_0_0/0),0_6px_18px_rgb(0_0_0/0)] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:outline-gray-300"
+            className="relative flex w-full max-h-[calc(100dvh-var(--top-margin))] min-h-0 flex-col overflow-visible rounded-t-2xl bg-neutral-50 text-neutral-900 outline outline-1 outline-neutral-200 touch-none shadow-[0_-16px_48px_rgb(0_0_0/0.12),0_6px_18px_rgb(0_0_0/0.06)] [--bleed:3rem] [padding-bottom:max(0px,calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] [transform:translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-[var(--bleed)] after:bg-neutral-50 after:content-[''] data-[swiping]:select-none data-[ending-style]:[transform:translateY(calc(100%+2px))] data-[starting-style]:[transform:translateY(calc(100%+2px))] data-[starting-style]:[padding-bottom:0] data-[ending-style]:[padding-bottom:0] data-[starting-style]:shadow-[0_-16px_48px_rgb(0_0_0/0),0_6px_18px_rgb(0_0_0/0)] data-[ending-style]:shadow-[0_-16px_48px_rgb(0_0_0/0),0_6px_18px_rgb(0_0_0/0)] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:outline-neutral-300"
             style={{ '--top-margin': `${TOP_MARGIN_REM}rem` } as React.CSSProperties}
           >
-            <div className="shrink-0 border-b border-gray-200 px-6 pt-3.5 pb-3 touch-none dark:border-gray-300">
-              <div className="mx-auto h-1 w-12 rounded-full bg-gray-300" />
+            <div className="shrink-0 border-b border-neutral-200 px-6 pt-3.5 pb-3 touch-none dark:border-neutral-300">
+              <div className="mx-auto h-1 w-12 rounded-full bg-neutral-300" />
               <Drawer.Title className="mt-2.5 cursor-default text-center text-lg font-bold">
                 Snap points
               </Drawer.Title>
             </div>
             <Drawer.Content className="min-h-0 flex-1 overflow-y-auto overscroll-contain touch-auto px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px))]">
               <div className="mx-auto w-full max-w-[350px]">
-                <Drawer.Description className="mb-4 text-base text-gray-600 text-center">
+                <Drawer.Description className="mb-4 text-base text-neutral-600 text-center">
                   Drag the sheet to snap between a compact peek and a near full-height view.
                 </Drawer.Description>
                 <div className="grid gap-3 mb-6" aria-hidden>
                   {Array.from({ length: 20 }, (_, index) => (
                     <div
                       key={index}
-                      className="h-12 rounded-xl border border-gray-200 bg-gray-100"
+                      className="h-12 rounded-xl border border-neutral-200 bg-neutral-100"
                     />
                   ))}
                 </div>
                 <div className="flex items-center justify-end gap-4">
-                  <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal 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">
+                  <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
                     Close
                   </Drawer.Close>
                 </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
index 1ffd125dedd..a308732d5d3 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
@@ -3,9 +3,9 @@
   width: 100%;
   min-height: 320px;
   overflow: hidden;
-  border: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  border: 1px solid var(--color-neutral-200);
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-900);
 }
 
 .Center {
@@ -28,7 +28,7 @@
   margin: 0;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
   text-align: center;
   padding-right: 3rem;
 }
@@ -71,24 +71,24 @@
   padding: 0 0.875rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  background-color: var(--color-neutral-50);
   font-family: inherit;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: var(--color-neutral-100);
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 
   &:focus-visible {
@@ -150,9 +150,9 @@
   padding: 1.5rem;
   padding-right: calc(1.5rem + var(--bleed));
   margin-right: calc(-1 * var(--bleed));
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  outline: 1px solid var(--color-neutral-200);
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-900);
   overflow-y: auto;
   touch-action: auto;
   transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
@@ -164,7 +164,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
   }
 
   &[data-starting-style],
@@ -201,7 +201,7 @@
   margin: 0 0 1.5rem;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--color-gray-600);
+  color: var(--color-neutral-600);
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
index b572d067f04..9683c13efb2 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleDrawerSwipeArea() {
   return (
     <div
       ref={setPortalContainer}
-      className="relative min-h-[320px] w-full overflow-hidden border border-gray-200 bg-gray-50 text-gray-900"
+      className="relative min-h-[320px] w-full overflow-hidden border border-neutral-200 bg-neutral-50 text-neutral-900"
     >
       <Drawer.Root swipeDirection="right" modal={false}>
         <Drawer.SwipeArea className="absolute inset-y-0 right-0 z-10 box-border w-10 border-l-2 border-dashed border-blue-800 bg-blue-800/10">
@@ -17,21 +17,21 @@ export default function ExampleDrawerSwipeArea() {
           </span>
         </Drawer.SwipeArea>
         <div className="flex min-h-[320px] flex-col items-center justify-center gap-3 px-4 text-center">
-          <p className="text-base text-gray-600 text-center pr-12">
+          <p className="text-base text-neutral-600 text-center pr-12">
             Swipe from the right edge to open the drawer.
           </p>
         </div>
         <Drawer.Portal container={portalContainer}>
           <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] absolute inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
           <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] absolute inset-0 z-20 flex items-stretch justify-end p-[var(--viewport-padding)]">
-            <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] bg-gray-50 p-6 pr-[calc(1.5rem+3rem)] text-gray-900 outline outline-1 outline-gray-200 overflow-y-auto touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[ending-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[starting-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-20px)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:pr-6 dark:outline-gray-300">
+            <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] bg-neutral-50 p-6 pr-[calc(1.5rem+3rem)] text-neutral-900 outline outline-1 outline-neutral-200 overflow-y-auto touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[ending-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[starting-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-20px)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:pr-6 dark:outline-neutral-300">
               <Drawer.Content className="mx-auto w-full max-w-[32rem]">
                 <Drawer.Title className="-mt-1.5 mb-1 text-lg font-bold">Library</Drawer.Title>
-                <Drawer.Description className="mb-6 text-base text-gray-600">
+                <Drawer.Description className="mb-6 text-base text-neutral-600">
                   Swipe from the edge whenever you want to jump back into your playlists.
                 </Drawer.Description>
                 <div className="flex justify-end gap-4">
-                  <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal 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">
+                  <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
                     Close
                   </Drawer.Close>
                 </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
index 74657341411..d1fbd20f27e 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
@@ -7,19 +7,19 @@
   padding: 0 0.875rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  background-color: var(--color-neutral-50);
   font-family: inherit;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: var(--color-neutral-100);
     }
   }
 
@@ -102,13 +102,13 @@
 .Surface {
   pointer-events: auto;
   border-radius: 1rem;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-900);
+  outline: 1px solid var(--color-neutral-200);
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-900);
   overflow: hidden;
 
   @media (prefers-color-scheme: dark) {
-    outline-color: var(--color-gray-300);
+    outline-color: var(--color-neutral-300);
   }
 }
 
@@ -119,7 +119,7 @@
 }
 
 .Action:not(:first-child) {
-  border-top: 1px solid var(--color-gray-200);
+  border-top: 1px solid var(--color-neutral-200);
 }
 
 .ActionButton {
@@ -138,25 +138,25 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: var(--color-neutral-100);
     }
   }
 
   &:focus-visible {
     outline: 0;
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 }
 
 .DangerSurface {
   pointer-events: auto;
   border-radius: 1rem;
-  outline: 1px solid var(--color-gray-200);
-  background-color: var(--color-gray-50);
+  outline: 1px solid var(--color-neutral-200);
+  background-color: var(--color-neutral-50);
   overflow: hidden;
 
   @media (prefers-color-scheme: dark) {
-    outline-color: var(--color-gray-300);
+    outline-color: var(--color-neutral-300);
   }
 }
 
@@ -176,13 +176,13 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: var(--color-neutral-100);
     }
   }
 
   &:focus-visible {
     outline: 0;
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
index 699d8118f7b..4e8337e48a5 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
@@ -9,21 +9,21 @@ export default function ExampleDrawerUncontained() {
 
   return (
     <Drawer.Root open={open} onOpenChange={setOpen}>
-      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-normal 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">
+      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800">
         Open action sheet
       </Drawer.Trigger>
       <Drawer.Portal>
         <Drawer.Backdrop className="[--backdrop-opacity:0.4] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute dark:[--backdrop-opacity:0.7]" />
         <Drawer.Viewport className="fixed inset-0 flex items-end justify-center">
           <Drawer.Popup className="box-border pointer-events-none flex w-full max-w-[28rem] flex-col gap-3 px-4 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] outline-none focus-visible:outline-none [transform:translateY(var(--drawer-swipe-movement-y))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[starting-style]:[transform:translateY(calc(100%+1rem+2px))] data-[ending-style]:[transform:translateY(calc(100%+1rem+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)]">
-            <Drawer.Content className="pointer-events-auto overflow-hidden rounded-2xl bg-gray-50 text-gray-900 outline outline-1 outline-gray-200 dark:outline-gray-300">
+            <Drawer.Content className="pointer-events-auto overflow-hidden rounded-2xl bg-neutral-50 text-neutral-900 outline outline-1 outline-neutral-200 dark:outline-neutral-300">
               <Drawer.Title className="sr-only">Profile actions</Drawer.Title>
               <Drawer.Description className="sr-only">
                 Choose an action for this user.
               </Drawer.Description>
 
               <ul
-                className="m-0 list-none divide-y divide-gray-200 p-0"
+                className="m-0 list-none divide-y divide-neutral-200 p-0"
                 aria-label="Profile actions"
               >
                 {ACTIONS.map((action, index) => (
@@ -33,7 +33,7 @@ export default function ExampleDrawerUncontained() {
                     )}
                     <button
                       type="button"
-                      className="block w-full border-0 bg-transparent px-5 py-4 text-center text-base text-gray-900 select-none hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none"
+                      className="block w-full border-0 bg-transparent px-5 py-4 text-center text-base text-neutral-900 select-none hover:bg-neutral-100 focus-visible:bg-neutral-100 focus-visible:outline-none"
                       onClick={() => setOpen(false)}
                     >
                       {action}
@@ -42,10 +42,10 @@ export default function ExampleDrawerUncontained() {
                 ))}
               </ul>
             </Drawer.Content>
-            <div className="pointer-events-auto overflow-hidden rounded-2xl bg-gray-50 outline outline-1 outline-gray-200 dark:outline-gray-300">
+            <div className="pointer-events-auto overflow-hidden rounded-2xl bg-neutral-50 outline outline-1 outline-neutral-200 dark:outline-neutral-300">
               <button
                 type="button"
-                className="block w-full border-0 bg-transparent px-5 py-4 text-center text-base text-red-700 select-none hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none"
+                className="block w-full border-0 bg-transparent px-5 py-4 text-center text-base text-red-700 select-none hover:bg-neutral-100 focus-visible:bg-neutral-100 focus-visible:outline-none"
                 onClick={() => setOpen(false)}
               >
                 Block User
diff --git a/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
index f0c28acc0db..113000982e9 100644
--- a/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
@@ -11,24 +11,24 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Input {
   box-sizing: border-box;
   padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 100%;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   background-color: transparent;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 
   &::placeholder {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus {
@@ -47,5 +47,5 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
diff --git a/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
index e805441b698..c2f0f7d7922 100644
--- a/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
@@ -3,17 +3,17 @@ import { Field } from '@base-ui/react/field';
 export default function ExampleField() {
   return (
     <Field.Root className="flex w-full max-w-64 flex-col items-start gap-1">
-      <Field.Label className="text-sm font-bold text-gray-950 dark:text-white">Name</Field.Label>
+      <Field.Label className="text-sm font-bold text-neutral-950 dark:text-white">Name</Field.Label>
       <Field.Control
         required
         placeholder="Required"
-        className="h-8 self-stretch border border-gray-950 bg-transparent px-2 text-sm font-normal text-gray-950 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-gray-400"
+        className="h-8 self-stretch border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
       />
       <Field.Error className="text-sm text-red-700 dark:text-red-400" match="valueMissing">
         Please enter your name
       </Field.Error>
 
-      <Field.Description className="text-sm text-gray-500 dark:text-gray-400">
+      <Field.Description className="text-sm text-neutral-500 dark:text-neutral-400">
         Visible on your profile
       </Field.Description>
     </Field.Root>
diff --git a/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
index e36b1074481..e5647f0a9b8 100644
--- a/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
@@ -10,11 +10,11 @@
 }
 
 .Legend {
-  border-bottom: 1px solid light-dark(var(--color-gray-950), var(--color-white));
+  border-bottom: 1px solid light-dark(var(--color-neutral-950), var(--color-white));
   font-weight: 700;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Field {
@@ -28,24 +28,24 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Input {
   box-sizing: border-box;
   padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 100%;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   background-color: transparent;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 
   &::placeholder {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus {
@@ -64,5 +64,5 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
diff --git a/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx
index 1880ffc2c3d..0836a04fd61 100644
--- a/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx
@@ -4,27 +4,27 @@ import { Fieldset } from '@base-ui/react/fieldset';
 export default function ExampleField() {
   return (
     <Fieldset.Root className="flex w-full max-w-64 flex-col gap-4">
-      <Fieldset.Legend className="border-b border-gray-950 text-base font-bold text-gray-950 dark:border-white dark:text-white">
+      <Fieldset.Legend className="border-b border-neutral-950 text-base font-bold text-neutral-950 dark:border-white dark:text-white">
         Billing details
       </Fieldset.Legend>
 
       <Field.Root className="flex flex-col items-start gap-1">
-        <Field.Label className="text-sm font-bold text-gray-950 dark:text-white">
+        <Field.Label className="text-sm font-bold text-neutral-950 dark:text-white">
           Company
         </Field.Label>
         <Field.Control
           placeholder="Enter company name"
-          className="h-8 w-full border border-gray-950 bg-transparent px-2 text-sm font-normal text-gray-950 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-gray-400"
+          className="h-8 w-full border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
       </Field.Root>
 
       <Field.Root className="flex flex-col items-start gap-1">
-        <Field.Label className="text-sm font-bold text-gray-950 dark:text-white">
+        <Field.Label className="text-sm font-bold text-neutral-950 dark:text-white">
           Tax ID
         </Field.Label>
         <Field.Control
           placeholder="Enter fiscal number"
-          className="h-8 w-full border border-gray-950 bg-transparent px-2 text-sm font-normal text-gray-950 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-gray-400"
+          className="h-8 w-full border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
       </Field.Root>
     </Fieldset.Root>
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
index 796ccd67042..c8b8001b8c5 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
@@ -17,24 +17,24 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Input {
   box-sizing: border-box;
   padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 100%;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   background-color: transparent;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 
   &::placeholder {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus {
@@ -58,29 +58,29 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
index e36b8806aa6..22a017d58f5 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function ActionStateForm() {
       className="flex w-full max-w-64 flex-col gap-4"
     >
       <Field.Root name="username" className="flex flex-col items-start gap-1">
-        <Field.Label className="text-sm font-bold text-gray-950 dark:text-white">
+        <Field.Label className="text-sm font-bold text-neutral-950 dark:text-white">
           Username
         </Field.Label>
         <Field.Control
@@ -26,7 +26,7 @@ export default function ActionStateForm() {
           required
           defaultValue="admin"
           placeholder="e.g. alice132"
-          className="h-8 w-full border border-gray-950 bg-transparent px-2 text-sm font-normal text-gray-950 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-gray-400"
+          className="h-8 w-full border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
@@ -34,7 +34,7 @@ export default function ActionStateForm() {
         type="submit"
         disabled={loading}
         focusableWhenDisabled
-        className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-50 active:not-data-disabled:bg-gray-100 data-disabled:text-gray-500 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-900 dark:active:not-data-disabled:bg-gray-800 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
index 796ccd67042..c8b8001b8c5 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
@@ -17,24 +17,24 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Input {
   box-sizing: border-box;
   padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 100%;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   background-color: transparent;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 
   &::placeholder {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus {
@@ -58,29 +58,29 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
index afee8871897..e59fcf0144e 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
@@ -28,7 +28,7 @@ export default function ExampleForm() {
       }}
     >
       <Field.Root name="url" className="flex flex-col items-start gap-1">
-        <Field.Label className="text-sm font-bold text-gray-950 dark:text-white">
+        <Field.Label className="text-sm font-bold text-neutral-950 dark:text-white">
           Homepage
         </Field.Label>
         <Field.Control
@@ -37,7 +37,7 @@ export default function ExampleForm() {
           defaultValue="https://example.com"
           placeholder="https://example.com"
           pattern="https?://.*"
-          className="h-8 w-full border border-gray-950 bg-transparent px-2 text-sm font-normal text-gray-950 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-gray-400"
+          className="h-8 w-full border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
@@ -45,7 +45,7 @@ export default function ExampleForm() {
         disabled={loading}
         focusableWhenDisabled
         type="submit"
-        className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-50 active:not-data-disabled:bg-gray-100 data-disabled:text-gray-500 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-900 dark:active:not-data-disabled:bg-gray-800 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
index 796ccd67042..c8b8001b8c5 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
@@ -17,24 +17,24 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Input {
   box-sizing: border-box;
   padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 100%;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   background-color: transparent;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 
   &::placeholder {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus {
@@ -58,29 +58,29 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
index 76613940d82..197cd396a89 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
@@ -37,24 +37,28 @@ export default function Page() {
       }}
     >
       <Field.Root name="name" className="flex flex-col items-start gap-1">
-        <Field.Label className="text-sm font-bold text-gray-950 dark:text-white">Name</Field.Label>
+        <Field.Label className="text-sm font-bold text-neutral-950 dark:text-white">
+          Name
+        </Field.Label>
         <Field.Control
           placeholder="Enter name"
-          className="h-8 w-full border border-gray-950 bg-transparent px-2 text-sm font-normal text-gray-950 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-gray-400"
+          className="h-8 w-full border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
       <Field.Root name="age" className="flex flex-col items-start gap-1">
-        <Field.Label className="text-sm font-bold text-gray-950 dark:text-white">Age</Field.Label>
+        <Field.Label className="text-sm font-bold text-neutral-950 dark:text-white">
+          Age
+        </Field.Label>
         <Field.Control
           placeholder="Enter age"
-          className="h-8 w-full border border-gray-950 bg-transparent px-2 text-sm font-normal text-gray-950 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-gray-400"
+          className="h-8 w-full border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
       <Button
         type="submit"
-        className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-50 active:not-data-disabled:bg-gray-100 data-disabled:text-gray-500 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-900 dark:active:not-data-disabled:bg-gray-800 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
index 49e80c39902..b3eba31605b 100644
--- a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
@@ -6,24 +6,24 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Input {
   box-sizing: border-box;
   padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 10rem;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   background-color: transparent;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 
   &::placeholder {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus {
diff --git a/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
index 6c5a1943573..c8156e7ca14 100644
--- a/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
@@ -2,11 +2,11 @@ import { Input } from '@base-ui/react/input';
 
 export default function ExampleInput() {
   return (
-    <label className="flex flex-col items-start gap-1 text-sm font-bold text-gray-950 dark:text-white">
+    <label className="flex flex-col items-start gap-1 text-sm font-bold text-neutral-950 dark:text-white">
       Name
       <Input
         placeholder="e.g. Colm Tuite"
-        className="h-8 w-40 border border-gray-950 dark:border-white bg-transparent px-2 text-sm font-normal text-gray-950 dark:text-white placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800"
+        className="h-8 w-40 border border-neutral-950 dark:border-white bg-transparent px-2 text-sm font-normal text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800"
       />
     </label>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
index 2a58b2d42cc..555637f97d3 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
@@ -8,29 +8,29 @@
   padding: 0;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -61,33 +61,33 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -105,10 +105,10 @@
   position: relative;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
@@ -162,8 +162,8 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-gray-950));
-    border: 1px solid light-dark(var(--color-gray-950), white);
+    background-color: light-dark(white, var(--color-neutral-950));
+    border: 1px solid light-dark(var(--color-neutral-950), white);
     transform: translate(-50%, 50%) rotate(45deg);
   }
 }
@@ -183,7 +183,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-gray-950));
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &[data-highlighted]::before {
@@ -192,11 +192,11 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: light-dark(var(--color-gray-950), white);
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 }
 
@@ -204,12 +204,12 @@
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
   padding: 0.5rem 1rem;
 }
 
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
index 13b4c2a032d..646fa333435 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
@@ -8,33 +8,33 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -56,10 +56,10 @@
   position: relative;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
@@ -113,8 +113,8 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-gray-950));
-    border: 1px solid light-dark(var(--color-gray-950), white);
+    background-color: light-dark(white, var(--color-neutral-950));
+    border: 1px solid light-dark(var(--color-neutral-950), white);
     transform: translate(-50%, 50%) rotate(45deg);
   }
 }
@@ -137,7 +137,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-gray-950));
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &[data-highlighted]::before {
@@ -146,11 +146,11 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: light-dark(var(--color-gray-950), white);
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 }
 
@@ -171,5 +171,5 @@
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index 41bb3092496..4be204ad267 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const checkboxItemClass =
-  "grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[disabled]:text-gray-500 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-gray-400";
+  "grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400";
 
 export default function ExampleMenu() {
   const [showMinimap, setShowMinimap] = React.useState(true);
@@ -12,13 +12,13 @@ export default function ExampleMenu() {
 
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Workspace <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
-            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.CheckboxItem
               checked={showMinimap}
               onCheckedChange={setShowMinimap}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
index 832c81586fe..a066e4c8fde 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -3,11 +3,11 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const itemClass =
-  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[disabled]:text-gray-500 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-gray-400";
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400";
 const triggerClass =
-  'flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:bg-gray-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-gray-100 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-[popup-open]:bg-gray-800';
+  'flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-neutral-100 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
 const popupClass =
-  'relative origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]';
+  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
 
 interface MenuItemDefinition {
   label: string;
@@ -96,7 +96,7 @@ export default function MenuDetachedTriggersControlledDemo() {
           <Menu.Portal>
             <Menu.Positioner sideOffset={8} className="outline-hidden">
               <Menu.Popup className={popupClass}>
-                <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+                <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
 
                 {payload &&
                   MENUS[payload].map((item, index) => (
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
index 795a88a4d20..2726870850a 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
@@ -37,12 +37,12 @@ const demoMenu = Menu.createHandle<MenuKey>();
 
 const triggerClass = `
   flex h-8 items-center justify-center
-  rounded-none border border-gray-950 bg-white
-  px-3 text-sm leading-5 font-normal text-gray-950
+  rounded-none border border-neutral-950 bg-white
+  px-3 text-sm leading-5 font-normal text-neutral-950
   select-none
-  hover:bg-gray-50 active:bg-gray-100 data-[popup-open]:bg-gray-100
-  dark:border-white dark:bg-gray-950 dark:text-white
-  dark:hover:bg-gray-900 dark:active:bg-gray-800 dark:data-[popup-open]:bg-gray-800
+  hover:bg-neutral-50 active:bg-neutral-100 data-[popup-open]:bg-neutral-100
+  dark:border-white dark:bg-neutral-950 dark:text-white
+  dark:hover:bg-neutral-900 dark:active:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800
   focus-visible:outline focus-visible:outline-2
   focus-visible:-outline-offset-2 focus-visible:outline-blue-800
 `;
@@ -53,8 +53,8 @@ const itemClass = `
   data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white
   data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1
   data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1]
-  data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-['']
-  dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white
+  data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-['']
+  dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white
 `;
 
 export default function MenuDetachedTriggersFullDemo() {
@@ -86,14 +86,14 @@ export default function MenuDetachedTriggersFullDemo() {
               <Menu.Popup
                 className={`
                   relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] py-1
-                  origin-[var(--transform-origin)] border border-gray-950
-                  bg-white text-gray-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))]
+                  origin-[var(--transform-origin)] border border-neutral-950
+                  bg-white text-neutral-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))]
                   transition-[width,height,opacity,scale]
                   duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]
                   data-[starting-style]:scale-90 data-[starting-style]:opacity-0
                   data-[ending-style]:scale-90 data-[ending-style]:opacity-0
                   data-instant:transition-none
-                  dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]
+                  dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]
                 `}
               >
                 <Menu.Arrow
@@ -107,7 +107,7 @@ export default function MenuDetachedTriggersFullDemo() {
                     data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180
                     before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border
                     before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))]
-                    before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white
+                    before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white
                     before:[transform:translate(-50%,50%)_rotate(45deg)]
                   `}
                 />
@@ -141,7 +141,7 @@ export default function MenuDetachedTriggersFullDemo() {
                       <React.Fragment key={groupIndex}>
                         <Menu.Group>
                           {groupIndex === 0 && (
-                            <Menu.GroupLabel className="px-4 py-2 text-xs tracking-[0.05em] text-gray-600 uppercase dark:text-gray-400">
+                            <Menu.GroupLabel className="px-4 py-2 text-xs tracking-[0.05em] text-neutral-600 uppercase dark:text-neutral-400">
                               {MENUS[payload].heading}
                             </Menu.GroupLabel>
                           )}
@@ -152,7 +152,7 @@ export default function MenuDetachedTriggersFullDemo() {
                           ))}
                         </Menu.Group>
                         {groupIndex < MENUS[payload].groups.length - 1 && (
-                          <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+                          <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
                         )}
                       </React.Fragment>
                     ))}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
index d1d0c4a9d65..a6c56b8c51b 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
@@ -4,9 +4,9 @@ import { Menu } from '@base-ui/react/menu';
 
 const demoMenu = Menu.createHandle();
 const popupClass =
-  'relative origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]';
+  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
 const itemClass =
-  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[disabled]:text-gray-500 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-gray-400";
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400";
 
 export default function MenuDetachedTriggersSimpleDemo() {
   return (
@@ -14,7 +14,7 @@ export default function MenuDetachedTriggersSimpleDemo() {
       <Menu.Trigger
         handle={demoMenu}
         aria-label="Project actions"
-        className="flex size-8 items-center justify-center rounded-none border border-gray-950 bg-white text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         <DotsIcon />
       </Menu.Trigger>
@@ -23,11 +23,11 @@ export default function MenuDetachedTriggersSimpleDemo() {
         <Menu.Portal>
           <Menu.Positioner sideOffset={8} className="outline-hidden">
             <Menu.Popup className={popupClass}>
-              <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+              <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Menu.Item className={itemClass}>Rename</Menu.Item>
               <Menu.Item className={itemClass}>Duplicate</Menu.Item>
               <Menu.Item className={itemClass}>Move to folder</Menu.Item>
-              <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+              <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
               <Menu.Item className={itemClass}>Archive</Menu.Item>
               <Menu.Item className={`${itemClass} text-red-600`}>Delete</Menu.Item>
             </Menu.Popup>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
index 0eeccc042c9..0da862a2aec 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
@@ -8,33 +8,33 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -56,10 +56,10 @@
   position: relative;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
@@ -113,8 +113,8 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-gray-950));
-    border: 1px solid light-dark(var(--color-gray-950), white);
+    background-color: light-dark(white, var(--color-neutral-950));
+    border: 1px solid light-dark(var(--color-neutral-950), white);
     transform: translate(-50%, 50%) rotate(45deg);
   }
 }
@@ -137,7 +137,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-gray-950));
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &[data-highlighted]::before {
@@ -146,11 +146,11 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: light-dark(var(--color-gray-950), white);
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 }
 
@@ -175,7 +175,7 @@
   margin-block: 0.25rem;
   margin-inline: 0.25rem;
   height: 1px;
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
 }
 
 .GroupLabel {
@@ -189,5 +189,5 @@
   line-height: 1rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index 0aab7a86777..e8dcc25ee37 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const itemClass =
-  "grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[disabled]:text-gray-500 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-gray-400";
+  "grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400";
 
 export default function ExampleMenu() {
   const [value, setValue] = React.useState('date');
@@ -13,16 +13,16 @@ export default function ExampleMenu() {
 
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         View <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
-            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
 
             <Menu.Group>
-              <Menu.GroupLabel className="cursor-default py-2 pr-8 pl-7.5 text-xs font-bold tracking-wider text-gray-500 uppercase select-none dark:text-gray-400">
+              <Menu.GroupLabel className="cursor-default py-2 pr-8 pl-7.5 text-xs font-bold tracking-wider text-neutral-500 uppercase select-none dark:text-neutral-400">
                 Sort
               </Menu.GroupLabel>
               <Menu.RadioGroup value={value} onValueChange={setValue}>
@@ -47,10 +47,10 @@ export default function ExampleMenu() {
               </Menu.RadioGroup>
             </Menu.Group>
 
-            <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+            <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
 
             <Menu.Group>
-              <Menu.GroupLabel className="cursor-default py-2 pr-8 pl-7.5 text-xs font-bold tracking-wider text-gray-500 uppercase select-none dark:text-gray-400">
+              <Menu.GroupLabel className="cursor-default py-2 pr-8 pl-7.5 text-xs font-bold tracking-wider text-neutral-500 uppercase select-none dark:text-neutral-400">
                 Workspace
               </Menu.GroupLabel>
               <Menu.CheckboxItem
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
index 84b99880519..c7c54e97d10 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
@@ -8,33 +8,33 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -56,10 +56,10 @@
   position: relative;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
@@ -113,8 +113,8 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-gray-950));
-    border: 1px solid light-dark(var(--color-gray-950), white);
+    background-color: light-dark(white, var(--color-neutral-950));
+    border: 1px solid light-dark(var(--color-neutral-950), white);
     transform: translate(-50%, 50%) rotate(45deg);
   }
 }
@@ -133,7 +133,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-gray-950));
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &[data-highlighted]::before {
@@ -142,16 +142,16 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: light-dark(var(--color-gray-950), white);
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 }
 
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
index 46965cc7f7c..5151c920295 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
@@ -2,24 +2,24 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const itemClass =
-  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[disabled]:text-gray-500 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-gray-400";
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400";
 
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Song <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
-            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.Item className={itemClass}>Add to Library</Menu.Item>
             <Menu.Item className={itemClass}>Add to Playlist</Menu.Item>
-            <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+            <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
             <Menu.Item className={itemClass}>Play Next</Menu.Item>
             <Menu.Item className={itemClass}>Play Last</Menu.Item>
-            <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+            <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
             <Menu.Item className={itemClass}>Favorite</Menu.Item>
             <Menu.Item className={itemClass}>Share</Menu.Item>
           </Menu.Popup>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
index 84b99880519..c7c54e97d10 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
@@ -8,33 +8,33 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -56,10 +56,10 @@
   position: relative;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
@@ -113,8 +113,8 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-gray-950));
-    border: 1px solid light-dark(var(--color-gray-950), white);
+    background-color: light-dark(white, var(--color-neutral-950));
+    border: 1px solid light-dark(var(--color-neutral-950), white);
     transform: translate(-50%, 50%) rotate(45deg);
   }
 }
@@ -133,7 +133,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-gray-950));
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &[data-highlighted]::before {
@@ -142,16 +142,16 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: light-dark(var(--color-gray-950), white);
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 }
 
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
index ec9a378c0ff..945c4a7e1d9 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
@@ -2,25 +2,25 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const itemClass =
-  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[disabled]:text-gray-500 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-gray-400";
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400";
 
 export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger
         openOnHover
-        className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         Add to playlist <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
-            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.Item className={itemClass}>Get Up!</Menu.Item>
             <Menu.Item className={itemClass}>Inside Out</Menu.Item>
             <Menu.Item className={itemClass}>Night Beats</Menu.Item>
-            <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+            <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
             <Menu.Item className={itemClass}>New playlist…</Menu.Item>
           </Menu.Popup>
         </Menu.Positioner>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
index ab39779d3b4..ea00ae8ee6a 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
@@ -8,33 +8,33 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -56,10 +56,10 @@
   position: relative;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
@@ -113,8 +113,8 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-gray-950));
-    border: 1px solid light-dark(var(--color-gray-950), white);
+    background-color: light-dark(white, var(--color-neutral-950));
+    border: 1px solid light-dark(var(--color-neutral-950), white);
     transform: translate(-50%, 50%) rotate(45deg);
   }
 }
@@ -136,7 +136,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-gray-950));
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &[data-highlighted]::before {
@@ -145,11 +145,11 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: light-dark(var(--color-gray-950), white);
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 }
 
@@ -170,5 +170,5 @@
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index 2e4bad8d91f..936685f1462 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -3,19 +3,19 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const radioItemClass =
-  "grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[disabled]:text-gray-500 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-gray-400";
+  "grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400";
 
 export default function ExampleMenu() {
   const [value, setValue] = React.useState('date');
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Sort <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
-            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.RadioGroup value={value} onValueChange={setValue}>
               <Menu.RadioItem value="date" className={radioItemClass}>
                 <Menu.RadioItemIndicator className="col-start-1">
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
index d22ab1782dc..61b26910d68 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
@@ -8,33 +8,33 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -56,10 +56,10 @@
   position: relative;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
@@ -113,8 +113,8 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-gray-950));
-    border: 1px solid light-dark(var(--color-gray-950), white);
+    background-color: light-dark(white, var(--color-neutral-950));
+    border: 1px solid light-dark(var(--color-neutral-950), white);
     transform: translate(-50%, 50%) rotate(45deg);
   }
 }
@@ -139,7 +139,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-gray-950));
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &[data-popup-open]::before,
@@ -152,19 +152,19 @@
   }
 
   &[data-popup-open]::before {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &[data-highlighted]::before {
-    background-color: light-dark(var(--color-gray-950), white);
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 
   &[data-highlighted][data-popup-open]::before {
-    background-color: light-dark(var(--color-gray-950), white);
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 }
 
@@ -178,5 +178,5 @@
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
index b7f843d098e..1a4a975bacd 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
@@ -3,22 +3,22 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const popupClass =
-  'relative origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]';
+  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
 const itemClass =
-  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 data-[disabled]:text-gray-500 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-gray-400";
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 data-[disabled]:text-neutral-500 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-neutral-400";
 const submenuTriggerClass =
-  "flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 data-[disabled]:text-gray-500 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-gray-400";
+  "flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 data-[disabled]:text-neutral-500 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-neutral-400";
 
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 data-[popup-open]:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Song <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
           <Menu.Popup className={popupClass}>
-            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.Item className={itemClass}>Add to Library</Menu.Item>
 
             <Menu.SubmenuRoot>
@@ -34,10 +34,10 @@ export default function ExampleMenu() {
                   <Menu.Popup className={popupClass}>
                     <Menu.Item className={itemClass}>Add to Library</Menu.Item>
                     <Menu.Item className={itemClass}>Add to Playlist</Menu.Item>
-                    <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+                    <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
                     <Menu.Item className={itemClass}>Play Next</Menu.Item>
                     <Menu.Item className={itemClass}>Play Last</Menu.Item>
-                    <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+                    <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
                     <Menu.Item className={itemClass}>Favorite</Menu.Item>
                     <Menu.Item className={itemClass}>Share</Menu.Item>
                   </Menu.Popup>
@@ -45,11 +45,11 @@ export default function ExampleMenu() {
               </Menu.Portal>
             </Menu.SubmenuRoot>
 
-            <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+            <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
 
             <Menu.Item className={itemClass}>Play Next</Menu.Item>
             <Menu.Item className={itemClass}>Play Last</Menu.Item>
-            <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+            <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
             <Menu.Item className={itemClass}>Favorite</Menu.Item>
             <Menu.Item className={itemClass}>Share</Menu.Item>
           </Menu.Popup>
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
index 1ecf0adea88..93a7d60215f 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
@@ -10,7 +10,7 @@
   margin: 0;
   border: 0;
   background-color: transparent;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -19,25 +19,25 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-pressed],
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
   }
@@ -51,9 +51,9 @@
   box-sizing: border-box;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
@@ -98,7 +98,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-gray-950));
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &[data-popup-open]::before,
@@ -111,20 +111,20 @@
   }
 
   &[data-popup-open]::before {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &[data-highlighted]::before {
-    background-color: light-dark(var(--color-gray-950), white);
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 
   &[data-highlighted][data-popup-open]::before {
-    background-color: light-dark(var(--color-gray-950), white);
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 }
 
 .MenuSeparator {
   margin: 0.25rem;
   height: 1px;
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
index e6853806407..b16a8fd4e66 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
@@ -7,54 +7,54 @@ export default function ExampleMenubar() {
   return (
     <Menubar className="flex items-center">
       <Menu.Root>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none data-popup-open:bg-gray-100 data-pressed:bg-gray-100 data-disabled:text-gray-500 dark:text-white dark:focus-visible:bg-gray-800 dark:data-popup-open:bg-gray-800 dark:data-pressed:bg-gray-800 dark:data-disabled:text-gray-400 focus-visible:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           File
         </Menu.Trigger>
         <Menu.Portal>
           <Menu.Positioner className="outline-none" sideOffset={4}>
-            <Menu.Popup className="origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
+            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
               >
                 New
               </Menu.Item>
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
               >
                 Open
               </Menu.Item>
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
               >
                 Save
               </Menu.Item>
 
               <Menu.SubmenuRoot>
-                <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white">
+                <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white">
                   Export
                   <ChevronRightIcon />
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
                   <Menu.Positioner className="outline-none" sideOffset={-4} alignOffset={-4}>
-                    <Menu.Popup className="origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
+                    <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
                       >
                         PDF
                       </Menu.Item>
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
                       >
                         PNG
                       </Menu.Item>
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
                       >
                         SVG
                       </Menu.Item>
@@ -63,10 +63,10 @@ export default function ExampleMenubar() {
                 </Menu.Portal>
               </Menu.SubmenuRoot>
 
-              <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+              <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
               >
                 Print
               </Menu.Item>
@@ -76,27 +76,27 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none data-popup-open:bg-gray-100 data-pressed:bg-gray-100 data-disabled:text-gray-500 dark:text-white dark:focus-visible:bg-gray-800 dark:data-popup-open:bg-gray-800 dark:data-pressed:bg-gray-800 dark:data-disabled:text-gray-400 focus-visible:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           Edit
         </Menu.Trigger>
         <Menu.Portal>
           <Menu.Positioner className="outline-none" sideOffset={6}>
-            <Menu.Popup className="origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
+            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
               >
                 Cut
               </Menu.Item>
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
               >
                 Copy
               </Menu.Item>
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
               >
                 Paste
               </Menu.Item>
@@ -106,48 +106,48 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none data-popup-open:bg-gray-100 data-pressed:bg-gray-100 data-disabled:text-gray-500 dark:text-white dark:focus-visible:bg-gray-800 dark:data-popup-open:bg-gray-800 dark:data-pressed:bg-gray-800 dark:data-disabled:text-gray-400 focus-visible:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           View
         </Menu.Trigger>
         <Menu.Portal>
           <Menu.Positioner className="outline-none" sideOffset={6}>
-            <Menu.Popup className="origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
+            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
               >
                 Zoom In
               </Menu.Item>
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
               >
                 Zoom Out
               </Menu.Item>
 
               <Menu.SubmenuRoot>
-                <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white">
+                <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white">
                   Layout
                   <ChevronRightIcon />
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
                   <Menu.Positioner className="outline-none" sideOffset={-4} alignOffset={-4}>
-                    <Menu.Popup className="origin-[var(--transform-origin)] border border-gray-950 bg-white py-1 text-gray-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
+                    <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
                       >
                         Single Page
                       </Menu.Item>
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
                       >
                         Two Pages
                       </Menu.Item>
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
                       >
                         Continuous
                       </Menu.Item>
@@ -156,10 +156,10 @@ export default function ExampleMenubar() {
                 </Menu.Portal>
               </Menu.SubmenuRoot>
 
-              <Menu.Separator className="mx-1 my-1 h-px bg-gray-950 dark:bg-white" />
+              <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-gray-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-gray-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-gray-950 dark:data-[popup-open]:before:bg-gray-800 dark:data-[highlighted]:text-gray-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
               >
                 Full Screen
               </Menu.Item>
@@ -169,7 +169,7 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root disabled>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none data-popup-open:bg-gray-100 data-pressed:bg-gray-100 data-disabled:text-gray-500 dark:text-white dark:focus-visible:bg-gray-800 dark:data-popup-open:bg-gray-800 dark:data-pressed:bg-gray-800 dark:data-disabled:text-gray-400 focus-visible:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           Help
         </Menu.Trigger>
       </Menu.Root>
diff --git a/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
index 52c4ea3c100..e447a454256 100644
--- a/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
@@ -10,13 +10,13 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Value {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   text-align: right;
 }
 
@@ -24,10 +24,10 @@
   grid-column: 1 / 3;
   overflow: hidden;
   height: 0.75rem;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
 }
 
 .Indicator {
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
   transition: width 500ms;
 }
diff --git a/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx
index 3ada91e713a..c2a83051ad6 100644
--- a/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx
@@ -3,12 +3,12 @@ import { Meter } from '@base-ui/react/meter';
 export default function ExampleMeter() {
   return (
     <Meter.Root className="grid max-w-full w-60 grid-cols-2 gap-y-2" value={24}>
-      <Meter.Label className="text-sm leading-5 font-normal text-gray-950 dark:text-white">
+      <Meter.Label className="text-sm leading-5 font-normal text-neutral-950 dark:text-white">
         Storage Used
       </Meter.Label>
-      <Meter.Value className="text-right text-sm leading-5 text-gray-950 dark:text-white" />
-      <Meter.Track className="col-span-2 h-3 overflow-hidden bg-gray-200 dark:bg-gray-800">
-        <Meter.Indicator className="bg-gray-950 transition-[width] duration-500 dark:bg-white" />
+      <Meter.Value className="text-right text-sm leading-5 text-neutral-950 dark:text-white" />
+      <Meter.Track className="col-span-2 h-3 overflow-hidden bg-neutral-200 dark:bg-neutral-800">
+        <Meter.Indicator className="bg-neutral-950 transition-[width] duration-500 dark:bg-white" />
       </Meter.Track>
     </Meter.Root>
   );
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
index 28743c2ea5f..8a016bdef41 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
@@ -1,6 +1,6 @@
 .Root {
   box-sizing: border-box;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   min-width: max-content;
 }
 
@@ -29,7 +29,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
   text-decoration: none;
 
@@ -39,12 +39,12 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &:focus-visible {
@@ -115,9 +115,9 @@
   overflow: visible;
   box-sizing: border-box;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition-property: opacity, transform, width, height;
@@ -223,12 +223,12 @@
   background-color: transparent;
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
@@ -249,7 +249,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
 
 .Arrow {
@@ -291,8 +291,8 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    border: 1px solid light-dark(var(--color-gray-950), white);
-    background-color: light-dark(white, var(--color-gray-950));
+    border: 1px solid light-dark(var(--color-neutral-950), white);
+    background-color: light-dark(white, var(--color-neutral-950));
     transform: translate(-50%, 50%) rotate(45deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
index a20a3dff360..931af1def8f 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { NavigationMenu } from '@base-ui/react/navigation-menu';
 
 export default function ExampleNavigationMenu() {
   return (
-    <NavigationMenu.Root className="min-w-max text-gray-950 dark:text-white">
+    <NavigationMenu.Root className="min-w-max text-neutral-950 dark:text-white">
       <NavigationMenu.List className="relative flex gap-px">
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
@@ -19,7 +19,7 @@ export default function ExampleNavigationMenu() {
                 <li key={item.href}>
                   <Link href={item.href} className={linkCardClassName}>
                     <h3 className="m-0 mb-1 text-sm leading-4 font-normal">{item.title}</h3>
-                    <p className="m-0 text-sm leading-5 text-gray-500 dark:text-gray-400">
+                    <p className="m-0 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
                       {item.description}
                     </p>
                   </Link>
@@ -43,7 +43,7 @@ export default function ExampleNavigationMenu() {
                 <li key={item.href}>
                   <Link href={item.href} className={linkCardClassName}>
                     <h3 className="m-0 mb-1 text-sm leading-4 font-normal">{item.title}</h3>
-                    <p className="m-0 text-sm leading-5 text-gray-500 dark:text-gray-400">
+                    <p className="m-0 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
                       {item.description}
                     </p>
                   </Link>
@@ -71,8 +71,8 @@ export default function ExampleNavigationMenu() {
             ['--easing' as string]: 'ease-out',
           }}
         >
-          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-gray-950 bg-white text-gray-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
-            <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-gray-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-gray-950" />
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+            <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
         </NavigationMenu.Positioner>
@@ -104,7 +104,7 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 }
 
 const triggerClassName =
-  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm leading-5 font-normal text-gray-950 no-underline select-none min-[501px]:px-3 hover:bg-gray-100 data-[popup-open]:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-gray-800 dark:data-[popup-open]:bg-gray-800';
+  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm leading-5 font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-[popup-open]:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
 
 const contentClassName =
   'h-full p-2 min-[500px]:w-max min-[500px]:max-w-[400px] ' +
@@ -116,7 +116,7 @@ const contentClassName =
   'data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%]';
 
 const linkCardClassName =
-  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-gray-100 data-[popup-open]:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-gray-800 dark:data-[popup-open]:bg-gray-800';
+  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-[popup-open]:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
 
 const overviewLinks = [
   {
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
index 4b202786fc8..7724d5300d8 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
@@ -1,6 +1,6 @@
 .Root {
   box-sizing: border-box;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   min-width: max-content;
 }
 
@@ -29,7 +29,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
   text-decoration: none;
 
@@ -39,12 +39,12 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &:focus-visible {
@@ -115,9 +115,9 @@
   overflow: visible;
   box-sizing: border-box;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition-property: opacity, transform, width, height;
@@ -201,7 +201,7 @@
 }
 
 .SubmenuRoot {
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   overflow: hidden;
   overflow: clip;
 }
@@ -236,7 +236,7 @@
     gap: 0;
     overflow-x: visible;
     overflow-y: clip;
-    border-right: 1px solid light-dark(var(--color-gray-950), white);
+    border-right: 1px solid light-dark(var(--color-neutral-950), white);
     height: var(--popup-height);
     transition: height var(--duration) var(--easing);
   }
@@ -260,12 +260,12 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &:focus-visible {
@@ -278,20 +278,20 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .SubmenuHint {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
 
 .SubmenuViewport {
   position: relative;
   overflow: hidden;
   min-height: 16.5rem;
-  border-top: 1px solid light-dark(var(--color-gray-950), white);
+  border-top: 1px solid light-dark(var(--color-neutral-950), white);
 }
 
 @media (min-width: 700px) {
@@ -373,7 +373,7 @@
 
 .SubmenuDescription {
   margin: 0.25rem 0 0;
-  color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
@@ -401,12 +401,12 @@
   background-color: transparent;
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
@@ -425,7 +425,7 @@
 
 .LinkDescription {
   margin: 0;
-  color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
@@ -480,8 +480,8 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    border: 1px solid light-dark(var(--color-gray-950), white);
-    background-color: light-dark(white, var(--color-gray-950));
+    border: 1px solid light-dark(var(--color-neutral-950), white);
+    background-color: light-dark(white, var(--color-neutral-950));
     transform: translate(-50%, 50%) rotate(45deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
index 6a33c9dcf9d..8ad1080cea3 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleNavigationMenu() {
   const isDesktop = useMediaQuery('(min-width: 700px)', { defaultMatches: true });
 
   return (
-    <NavigationMenu.Root className="min-w-max text-gray-950 dark:text-white">
+    <NavigationMenu.Root className="min-w-max text-neutral-950 dark:text-white">
       <NavigationMenu.List className="relative flex gap-px">
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
@@ -20,26 +20,26 @@ export default function ExampleNavigationMenu() {
 
           <NavigationMenu.Content className={productContentClassName}>
             <NavigationMenu.Root
-              className="overflow-hidden overflow-clip text-gray-950 dark:text-white"
+              className="overflow-hidden overflow-clip text-neutral-950 dark:text-white"
               orientation={isDesktop ? 'vertical' : 'horizontal'}
               defaultValue="developers"
             >
               <div className="grid grid-cols-1 overflow-hidden overflow-clip min-[700px]:grid-cols-[13rem_minmax(0,1fr)]">
-                <NavigationMenu.List className="m-0 box-border flex list-none flex-row gap-1 overflow-x-auto p-2 min-[700px]:h-[var(--popup-height)] min-[700px]:flex-col min-[700px]:gap-0 min-[700px]:overflow-x-visible min-[700px]:overflow-y-clip min-[700px]:border-r min-[700px]:border-r-gray-950 min-[700px]:transition-[height] min-[700px]:duration-[var(--duration)] min-[700px]:ease-[var(--easing)] dark:min-[700px]:border-r-white">
+                <NavigationMenu.List className="m-0 box-border flex list-none flex-row gap-1 overflow-x-auto p-2 min-[700px]:h-[var(--popup-height)] min-[700px]:flex-col min-[700px]:gap-0 min-[700px]:overflow-x-visible min-[700px]:overflow-y-clip min-[700px]:border-r min-[700px]:border-r-neutral-950 min-[700px]:transition-[height] min-[700px]:duration-[var(--duration)] min-[700px]:ease-[var(--easing)] dark:min-[700px]:border-r-white">
                   {audienceMenus.map((menu) => (
                     <NavigationMenu.Item key={menu.value} value={menu.value}>
                       <NavigationMenu.Trigger className={submenuTriggerClassName}>
-                        <span className="text-sm leading-4 font-normal text-gray-950 dark:text-white">
+                        <span className="text-sm leading-4 font-normal text-neutral-950 dark:text-white">
                           {menu.label}
                         </span>
-                        <span className="text-sm leading-5 text-gray-500 dark:text-gray-400">
+                        <span className="text-sm leading-5 text-neutral-500 dark:text-neutral-400">
                           {menu.hint}
                         </span>
                       </NavigationMenu.Trigger>
                       <NavigationMenu.Content className={submenuContentClassName}>
                         <div>
                           <h4 className="m-0 text-base leading-5 font-normal">{menu.title}</h4>
-                          <p className="m-0 mt-1 text-sm leading-5 text-gray-500 dark:text-gray-400">
+                          <p className="m-0 mt-1 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
                             {menu.description}
                           </p>
                         </div>
@@ -48,7 +48,7 @@ export default function ExampleNavigationMenu() {
                             <li key={link.href}>
                               <Link className={linkCardClassName} href={link.href}>
                                 <h5 className="m-0 text-sm leading-4 font-normal">{link.title}</h5>
-                                <p className="m-0 text-sm leading-5 text-gray-500 dark:text-gray-400">
+                                <p className="m-0 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
                                   {link.description}
                                 </p>
                               </Link>
@@ -59,7 +59,7 @@ export default function ExampleNavigationMenu() {
                     </NavigationMenu.Item>
                   ))}
                 </NavigationMenu.List>
-                <NavigationMenu.Viewport className="relative min-h-[16.5rem] overflow-hidden border-t border-gray-950 min-[700px]:border-t-0 dark:border-white" />
+                <NavigationMenu.Viewport className="relative min-h-[16.5rem] overflow-hidden border-t border-neutral-950 min-[700px]:border-t-0 dark:border-white" />
               </div>
             </NavigationMenu.Root>
           </NavigationMenu.Content>
@@ -74,10 +74,10 @@ export default function ExampleNavigationMenu() {
           </NavigationMenu.Trigger>
 
           <NavigationMenu.Content className={guidesContentClassName}>
-            <div className="flex flex-col gap-4 p-4 text-gray-950 dark:text-white">
+            <div className="flex flex-col gap-4 p-4 text-neutral-950 dark:text-white">
               <div>
                 <h4 className="m-0 text-base leading-5 font-normal">{guidesPanel.title}</h4>
-                <p className="m-0 mt-1 text-sm leading-5 text-gray-500 dark:text-gray-400">
+                <p className="m-0 mt-1 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
                   {guidesPanel.description}
                 </p>
               </div>
@@ -86,7 +86,7 @@ export default function ExampleNavigationMenu() {
                   <li key={link.href}>
                     <Link className={linkCardClassName} href={link.href}>
                       <h5 className="m-0 text-sm leading-4 font-normal">{link.title}</h5>
-                      <p className="m-0 text-sm leading-5 text-gray-500 dark:text-gray-400">
+                      <p className="m-0 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
                         {link.description}
                       </p>
                     </Link>
@@ -121,8 +121,8 @@ export default function ExampleNavigationMenu() {
             ['--easing' as string]: 'ease-out',
           }}
         >
-          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-gray-950 bg-white text-gray-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
-            <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-gray-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-gray-950" />
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+            <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
         </NavigationMenu.Positioner>
@@ -154,7 +154,7 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 }
 
 const triggerClassName =
-  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm leading-5 font-normal text-gray-950 no-underline select-none min-[501px]:px-3 hover:bg-gray-100 data-[popup-open]:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-gray-800 dark:data-[popup-open]:bg-gray-800';
+  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm leading-5 font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-[popup-open]:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
 
 const sharedContentClassName =
   'h-full w-[calc(100vw_-_40px)] ' +
@@ -171,7 +171,7 @@ const productContentClassName = `${sharedContentClassName} p-0 min-[700px]:[widt
 const guidesContentClassName = `${sharedContentClassName} p-0 min-[700px]:[width:min(500px,calc(100vw-40px))]`;
 
 const submenuTriggerClassName =
-  'm-0 flex w-full min-w-[10rem] flex-col items-start gap-1 border-0 bg-transparent p-2 text-left text-inherit hover:bg-gray-100 data-[popup-open]:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-gray-800 dark:data-[popup-open]:bg-gray-800';
+  'm-0 flex w-full min-w-[10rem] flex-col items-start gap-1 border-0 bg-transparent p-2 text-left text-inherit hover:bg-neutral-100 data-[popup-open]:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
 
 const submenuContentClassName =
   'flex h-full translate-x-0 flex-col gap-4 p-4 transition-[opacity,translate,filter] duration-[var(--duration)] ease-[var(--easing)] min-[700px]:duration-[calc(var(--duration)*1.35)] min-[700px]:ease-[cubic-bezier(0.16,1,0.3,1)] ' +
@@ -181,4 +181,4 @@ const submenuContentClassName =
   'min-[700px]:data-[ending-style]:data-[activation-direction=up]:translate-y-[72px] min-[700px]:data-[ending-style]:data-[activation-direction=down]:translate-y-[-72px]';
 
 const linkCardClassName =
-  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-gray-100 data-[popup-open]:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-gray-800 dark:data-[popup-open]:bg-gray-800';
+  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-[popup-open]:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
index fd15ad13e11..b72f8b78732 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
@@ -1,6 +1,6 @@
 .Root {
   box-sizing: border-box;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   min-width: max-content;
 }
 
@@ -29,7 +29,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
   text-decoration: none;
 
@@ -39,12 +39,12 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &:focus-visible {
@@ -115,9 +115,9 @@
   overflow: visible;
   box-sizing: border-box;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition-property: opacity, transform, width, height;
@@ -224,12 +224,12 @@
   background-color: transparent;
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
@@ -250,7 +250,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
 
 .Arrow {
@@ -292,8 +292,8 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    border: 1px solid light-dark(var(--color-gray-950), white);
-    background-color: light-dark(white, var(--color-gray-950));
+    border: 1px solid light-dark(var(--color-neutral-950), white);
+    background-color: light-dark(white, var(--color-neutral-950));
     transform: translate(-50%, 50%) rotate(45deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
index f30dc3f2826..1af1b4a58d9 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { NavigationMenu } from '@base-ui/react/navigation-menu';
 
 export default function ExampleNavigationMenu() {
   return (
-    <NavigationMenu.Root className="min-w-max text-gray-950 dark:text-white">
+    <NavigationMenu.Root className="min-w-max text-neutral-950 dark:text-white">
       <NavigationMenu.List className="relative flex gap-px">
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
@@ -19,7 +19,7 @@ export default function ExampleNavigationMenu() {
                 <li key={item.href}>
                   <Link href={item.href} className={linkCardClassName}>
                     <h3 className="m-0 mb-1 text-sm leading-4 font-normal">{item.title}</h3>
-                    <p className="m-0 text-sm leading-5 text-gray-500 dark:text-gray-400">
+                    <p className="m-0 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
                       {item.description}
                     </p>
                   </Link>
@@ -30,7 +30,7 @@ export default function ExampleNavigationMenu() {
                   <NavigationMenu.Item>
                     <NavigationMenu.Trigger className={linkCardClassName}>
                       <span className="m-0 mb-1 text-sm leading-4 font-normal">Handbook</span>
-                      <p className="m-0 text-sm leading-5 text-gray-500 dark:text-gray-400">
+                      <p className="m-0 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
                         How to use Base UI effectively.
                       </p>
                       <NavigationMenu.Icon className="absolute top-1/2 right-2.5 flex h-2.5 w-2.5 -translate-y-1/2 items-center justify-center transition-transform duration-200 ease-in-out data-[popup-open]:rotate-180">
@@ -45,7 +45,7 @@ export default function ExampleNavigationMenu() {
                               <h3 className="m-0 mb-1 text-sm leading-4 font-normal">
                                 {item.title}
                               </h3>
-                              <p className="m-0 text-sm leading-5 text-gray-500 dark:text-gray-400">
+                              <p className="m-0 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
                                 {item.description}
                               </p>
                             </Link>
@@ -67,7 +67,7 @@ export default function ExampleNavigationMenu() {
                         ['--easing' as string]: 'ease-out',
                       }}
                     >
-                      <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-gray-950 bg-white text-gray-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
+                      <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
                         <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
                       </NavigationMenu.Popup>
                     </NavigationMenu.Positioner>
@@ -89,8 +89,8 @@ export default function ExampleNavigationMenu() {
             ['--easing' as string]: 'ease-out',
           }}
         >
-          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-gray-950 bg-white text-gray-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
-            <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-gray-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-gray-950" />
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+            <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
         </NavigationMenu.Positioner>
@@ -130,7 +130,7 @@ function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
 }
 
 const triggerClassName =
-  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm leading-5 font-normal text-gray-950 no-underline select-none min-[501px]:px-3 hover:bg-gray-100 data-[popup-open]:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-gray-800 dark:data-[popup-open]:bg-gray-800';
+  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm leading-5 font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-[popup-open]:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
 
 const contentTransitionClassName =
   'transition-[opacity,transform,translate] duration-[var(--duration)] ease-[var(--easing)] ' +
@@ -143,7 +143,7 @@ const contentTransitionClassName =
 const contentClassName = `h-full w-[calc(100vw_-_40px)] p-2 min-[500px]:w-max min-[500px]:min-w-[400px] ${contentTransitionClassName}`;
 
 const linkCardClassName =
-  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-gray-100 data-[popup-open]:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-gray-800 dark:data-[popup-open]:bg-gray-800';
+  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-[popup-open]:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
 
 const overviewLinks = [
   {
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
index dfd58f5112d..f3a5bfe836b 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
@@ -20,7 +20,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Group {
@@ -32,7 +32,7 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0 0.75rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-right: 0;
   border-left: 0;
   border-radius: 0;
@@ -42,7 +42,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   background-color: transparent;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 
   text-align: left;
   font-variant-numeric: tabular-nums;
@@ -65,26 +65,26 @@
   margin: 0;
   outline: 0;
   padding: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   background-clip: padding-box;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -95,9 +95,9 @@
 }
 
 .Decrement {
-  border-right: 1px solid light-dark(var(--color-gray-950), white);
+  border-right: 1px solid light-dark(var(--color-neutral-950), white);
 }
 
 .Increment {
-  border-left: 1px solid light-dark(var(--color-gray-950), white);
+  border-left: 1px solid light-dark(var(--color-neutral-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
index b50166c907c..166aeed7825 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { NumberField } from '@base-ui/react/number-field';
 
 const stepperClasses =
-  'flex h-full w-8 items-center justify-center border border-gray-950 rounded-none bg-white bg-clip-padding text-gray-950 outline-0 select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
+  'flex h-full w-8 items-center justify-center border border-neutral-950 rounded-none bg-white bg-clip-padding text-neutral-950 outline-0 select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
 
 export default function ExampleNumberField() {
   const id = React.useId();
@@ -11,7 +11,7 @@ export default function ExampleNumberField() {
       <NumberField.ScrubArea className="cursor-ew-resize font-bold select-none">
         <label
           htmlFor={id}
-          className="cursor-ew-resize text-sm leading-5 font-bold text-gray-950 dark:text-white"
+          className="cursor-ew-resize text-sm leading-5 font-bold text-neutral-950 dark:text-white"
         >
           Amount
         </label>
@@ -24,7 +24,7 @@ export default function ExampleNumberField() {
         <NumberField.Decrement className={stepperClasses}>
           <MinusIcon />
         </NumberField.Decrement>
-        <NumberField.Input className="h-full w-[7ch] border-y border-gray-950 rounded-none bg-transparent px-3 text-left text-sm font-normal text-gray-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white" />
+        <NumberField.Input className="h-full w-[7ch] border-y border-neutral-950 rounded-none bg-transparent px-3 text-left text-sm font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white" />
         <NumberField.Increment className={stepperClasses}>
           <PlusIcon />
         </NumberField.Increment>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
index b36a37ce99b..310241787c3 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
@@ -11,7 +11,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Root {
@@ -23,7 +23,7 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
@@ -32,7 +32,7 @@
   font-weight: 400;
   text-align: center;
   background-color: transparent;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 
   &:focus {
     outline: 2px solid var(--color-blue-800);
@@ -44,7 +44,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
 
 .Code {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
index 4b5e4d42b31..b1688c5ee19 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function OTPFieldAlphanumericDemo() {
 
   return (
     <div className="flex w-full max-w-80 flex-col items-start gap-1">
-      <label htmlFor={id} className="text-sm leading-5 font-bold text-gray-950 dark:text-white">
+      <label htmlFor={id} className="text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         Recovery code
       </label>
       <OTPField.Root
@@ -22,12 +22,15 @@ export default function OTPFieldAlphanumericDemo() {
         {Array.from({ length: CODE_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="box-border m-0 h-10 w-10 rounded-none border border-gray-950 bg-transparent text-center font-inherit text-base font-normal text-gray-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+            className="box-border m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
             aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
           />
         ))}
       </OTPField.Root>
-      <p id={descriptionId} className="m-0 text-sm leading-5 text-gray-500 dark:text-gray-400">
+      <p
+        id={descriptionId}
+        className="m-0 text-sm leading-5 text-neutral-500 dark:text-neutral-400"
+      >
         Accept letters and numbers for backup codes such as{' '}
         <code className="font-mono">A7C9XZ</code>.
       </p>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
index 36d764aa591..c08b5f197d2 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
@@ -11,7 +11,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Root {
@@ -23,7 +23,7 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
@@ -32,7 +32,7 @@
   font-weight: 400;
   text-align: center;
   background-color: transparent;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 
   &:focus {
     outline: 2px solid var(--color-blue-800);
@@ -68,7 +68,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
 
 .Code {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
index d5cadc18711..aa49aa21a92 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
@@ -11,7 +11,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Root {
@@ -23,7 +23,7 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
@@ -32,10 +32,10 @@
   font-weight: 400;
   text-align: center;
   background-color: transparent;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 
   &::placeholder {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus {
@@ -52,5 +52,5 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
index 62192b43ce4..a5e65a7f186 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function OTPFieldFocusedPlaceholderDemo() {
 
   return (
     <div className="flex w-full max-w-80 flex-col items-start gap-1">
-      <label htmlFor={id} className="text-sm leading-5 font-bold text-gray-950 dark:text-white">
+      <label htmlFor={id} className="text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         Verification code
       </label>
       <OTPField.Root
@@ -21,13 +21,16 @@ export default function OTPFieldFocusedPlaceholderDemo() {
         {Array.from({ length: CODE_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="box-border m-0 h-10 w-10 rounded-none border border-gray-950 bg-transparent text-center font-inherit text-base font-normal text-gray-950 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 focus:placeholder:text-transparent dark:border-white dark:text-white dark:placeholder:text-gray-400"
+            className="box-border m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 focus:placeholder:text-transparent dark:border-white dark:text-white dark:placeholder:text-neutral-400"
             placeholder="•"
             aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
           />
         ))}
       </OTPField.Root>
-      <p id={descriptionId} className="m-0 text-sm leading-5 text-gray-500 dark:text-gray-400">
+      <p
+        id={descriptionId}
+        className="m-0 text-sm leading-5 text-neutral-500 dark:text-neutral-400"
+      >
         Placeholder hints can stay visible until the active slot is focused.
       </p>
     </div>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
index 5d2a4f700f1..2b0b4e94a54 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
@@ -11,7 +11,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Root {
@@ -29,7 +29,7 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
@@ -38,7 +38,7 @@
   font-weight: 400;
   text-align: center;
   background-color: transparent;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 
   &:focus {
     outline: 2px solid var(--color-blue-800);
@@ -50,5 +50,5 @@
   width: 1rem;
   height: 1px;
   background-color: currentColor;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
index 3f5b896894d..9344c76da1a 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function OTPFieldGroupedDemo() {
 
   return (
     <div className="flex w-full max-w-80 flex-col items-start gap-1">
-      <label htmlFor={id} className="text-sm leading-5 font-bold text-gray-950 dark:text-white">
+      <label htmlFor={id} className="text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         Verification code
       </label>
       <OTPField.Root id={id} length={OTP_LENGTH} className="flex w-full items-center gap-2">
@@ -16,17 +16,17 @@ export default function OTPFieldGroupedDemo() {
           {Array.from({ length: 3 }, (_, index) => (
             <OTPField.Input
               key={index}
-              className="box-border m-0 h-10 w-10 rounded-none border border-gray-950 bg-transparent text-center font-inherit text-base font-normal text-gray-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+              className="box-border m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
               aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}
             />
           ))}
         </div>
-        <OTPField.Separator className="h-px w-4 bg-current text-gray-950 dark:text-white" />
+        <OTPField.Separator className="h-px w-4 bg-current text-neutral-950 dark:text-white" />
         <div className="flex gap-2">
           {Array.from({ length: 3 }, (_, index) => (
             <OTPField.Input
               key={index + 3}
-              className="box-border m-0 h-10 w-10 rounded-none border border-gray-950 bg-transparent text-center font-inherit text-base font-normal text-gray-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+              className="box-border m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
               aria-label={`Character ${index + 4} of ${OTP_LENGTH}`}
             />
           ))}
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
index 040fb3dad1f..fbc7aae5074 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
@@ -11,7 +11,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Root {
@@ -23,7 +23,7 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
@@ -32,7 +32,7 @@
   font-weight: 400;
   text-align: center;
   background-color: transparent;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 
   &:focus {
     outline: 2px solid var(--color-blue-800);
@@ -44,5 +44,5 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
index 494f0c4acde..a607da3854f 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleOTPField() {
 
   return (
     <div className="flex w-full max-w-80 flex-col items-start gap-1">
-      <label htmlFor={id} className="text-sm leading-5 font-bold text-gray-950 dark:text-white">
+      <label htmlFor={id} className="text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         Verification code
       </label>
       <OTPField.Root
@@ -21,12 +21,15 @@ export default function ExampleOTPField() {
         {Array.from({ length: OTP_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="box-border m-0 h-10 w-10 rounded-none border border-gray-950 bg-transparent text-center font-inherit text-base font-normal text-gray-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+            className="box-border m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
             aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}
           />
         ))}
       </OTPField.Root>
-      <p id={descriptionId} className="m-0 text-sm leading-5 text-gray-500 dark:text-gray-400">
+      <p
+        id={descriptionId}
+        className="m-0 text-sm leading-5 text-neutral-500 dark:text-neutral-400"
+      >
         Enter the 6-character code we sent to your device.
       </p>
     </div>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
index b36a37ce99b..310241787c3 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
@@ -11,7 +11,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Root {
@@ -23,7 +23,7 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
@@ -32,7 +32,7 @@
   font-weight: 400;
   text-align: center;
   background-color: transparent;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 
   &:focus {
     outline: 2px solid var(--color-blue-800);
@@ -44,7 +44,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
 
 .Code {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
index e655e8e0e03..446853bd52b 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function OTPFieldPasswordDemo() {
 
   return (
     <div className="flex w-full max-w-80 flex-col items-start gap-1">
-      <label htmlFor={id} className="text-sm leading-5 font-bold text-gray-950 dark:text-white">
+      <label htmlFor={id} className="text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         Access code
       </label>
       <OTPField.Root
@@ -22,12 +22,15 @@ export default function OTPFieldPasswordDemo() {
         {Array.from({ length: CODE_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="box-border m-0 h-10 w-10 rounded-none border border-gray-950 bg-transparent text-center font-inherit text-base font-normal text-gray-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+            className="box-border m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
             aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
           />
         ))}
       </OTPField.Root>
-      <p id={descriptionId} className="m-0 text-sm leading-5 text-gray-500 dark:text-gray-400">
+      <p
+        id={descriptionId}
+        className="m-0 text-sm leading-5 text-neutral-500 dark:text-neutral-400"
+      >
         Use <code className="font-mono">mask</code> to obscure the code on shared screens.
       </p>
     </div>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
index 729d72ebbd7..e501821e044 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
@@ -7,32 +7,32 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -56,9 +56,9 @@
   box-sizing: border-box;
   position: relative;
   padding: 0.75rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
@@ -116,8 +116,8 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-gray-950));
-    border: 1px solid light-dark(var(--color-gray-950), white);
+    background-color: light-dark(white, var(--color-neutral-950));
+    border: 1px solid light-dark(var(--color-neutral-950), white);
     transform: translate(-50%, 50%) rotate(45deg);
   }
 }
@@ -133,7 +133,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .Container {
@@ -151,23 +151,23 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
index bc5a222d58d..ec1d2cb4e1f 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
     <React.Fragment>
       <div className="flex gap-2 flex-wrap justify-center">
         <Popover.Trigger
-          className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoPopover}
           id="trigger-1"
         >
@@ -26,7 +26,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
         </Popover.Trigger>
 
         <Popover.Trigger
-          className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoPopover}
           id="trigger-2"
         >
@@ -34,7 +34,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
         </Popover.Trigger>
 
         <Popover.Trigger
-          className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoPopover}
           id="trigger-3"
         >
@@ -43,7 +43,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
 
         <button
           type="button"
-          className="flex h-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 px-3 text-sm font-normal text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-700 disabled:border-gray-500 disabled:text-gray-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
@@ -64,10 +64,10 @@ export default function PopoverDetachedTriggersSimpleDemo() {
             className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)]"
             sideOffset={8}
           >
-            <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] origin-[var(--transform-origin)] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
-              <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+            <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+              <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
-              <Popover.Description className="text-sm text-gray-600 dark:text-gray-400">
+              <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
                 You are all caught up. Good job!
               </Popover.Description>
             </Popover.Popup>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
index 2dc980a0fb4..ccca12be89e 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
@@ -7,32 +7,32 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -66,9 +66,9 @@
 
 .Popup {
   position: relative;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
 
@@ -181,8 +181,8 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-gray-950));
-    border: 1px solid light-dark(var(--color-gray-950), white);
+    background-color: light-dark(white, var(--color-neutral-950));
+    border: 1px solid light-dark(var(--color-neutral-950), white);
     transform: translate(-50%, 50%) rotate(45deg);
   }
 }
@@ -198,7 +198,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .Container {
@@ -222,7 +222,7 @@
     grid-row: 2;
     font-size: 0.875rem;
     line-height: 1.25rem;
-    color: light-dark(var(--color-gray-600), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
   }
 
   .Avatar {
@@ -235,8 +235,8 @@
     vertical-align: middle;
     user-select: none;
     font-weight: 700;
-    color: light-dark(var(--color-gray-950), white);
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+    color: light-dark(var(--color-neutral-950), white);
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
     font-size: 0.875rem;
     line-height: 1;
     overflow: hidden;
@@ -261,7 +261,7 @@
     line-height: 1.25rem;
 
     a {
-      color: light-dark(var(--color-gray-950), white);
+      color: light-dark(var(--color-neutral-950), white);
       text-decoration: underline;
       text-decoration-thickness: 1px;
       text-underline-offset: 0.16em;
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
index c79fa802b1a..267dfbfaae0 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
@@ -10,7 +10,7 @@ export default function PopoverDetachedTriggersFullDemo() {
   return (
     <div className="flex gap-2">
       <Popover.Trigger
-        className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
         payload={NotificationsPanel}
       >
@@ -18,7 +18,7 @@ export default function PopoverDetachedTriggersFullDemo() {
       </Popover.Trigger>
 
       <Popover.Trigger
-        className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
         payload={ActivityPanel}
       >
@@ -26,7 +26,7 @@ export default function PopoverDetachedTriggersFullDemo() {
       </Popover.Trigger>
 
       <Popover.Trigger
-        className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
         payload={ProfilePanel}
       >
@@ -40,8 +40,8 @@ export default function PopoverDetachedTriggersFullDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[instant]:transition-none"
             >
-              <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[31.25rem] origin-[var(--transform-origin)] bg-white dark:bg-gray-950 text-gray-950 dark:text-white border border-gray-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
-                <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+              <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[31.25rem] origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+                <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
 
                 <Popover.Viewport
                   className={`
@@ -82,7 +82,7 @@ function NotificationsPanel() {
   return (
     <React.Fragment>
       <Popover.Title className="m-0 text-sm font-bold leading-5">Notifications</Popover.Title>
-      <Popover.Description className="m-0 text-sm leading-5 text-gray-600 dark:text-gray-400">
+      <Popover.Description className="m-0 text-sm leading-5 text-neutral-600 dark:text-neutral-400">
         You are all caught up. Good job!
       </Popover.Description>
     </React.Fragment>
@@ -95,7 +95,7 @@ function ProfilePanel() {
       <Popover.Title className="col-start-2 col-end-3 row-start-1 row-end-2 m-0 text-sm font-bold leading-5">
         Jason Eventon
       </Popover.Title>
-      <Avatar.Root className="col-start-1 col-end-2 row-start-1 row-end-3 inline-flex h-12 w-12 items-center justify-center overflow-hidden bg-gray-200 dark:bg-gray-800 align-middle text-sm leading-none font-bold text-gray-950 dark:text-white select-none">
+      <Avatar.Root className="col-start-1 col-end-2 row-start-1 row-end-3 inline-flex h-12 w-12 items-center justify-center overflow-hidden bg-neutral-200 dark:bg-neutral-800 align-middle text-sm leading-none font-bold text-neutral-950 dark:text-white select-none">
         <Avatar.Image
           src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
           width="48"
@@ -103,19 +103,19 @@ function ProfilePanel() {
           className="h-full w-full object-cover"
         />
       </Avatar.Root>
-      <span className="col-start-2 col-end-3 row-start-2 row-end-3 text-sm leading-5 text-gray-600 dark:text-gray-400">
+      <span className="col-start-2 col-end-3 row-start-2 row-end-3 text-sm leading-5 text-neutral-600 dark:text-neutral-400">
         Pro plan
       </span>
       <div className="col-start-1 col-end-3 row-start-3 row-end-4 flex flex-col gap-2 pt-2 text-sm leading-5">
         <a
           href="#"
-          className="text-gray-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="text-neutral-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         >
           Profile settings
         </a>
         <a
           href="#"
-          className="text-gray-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="text-neutral-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         >
           Log out
         </a>
@@ -128,7 +128,7 @@ function ActivityPanel() {
   return (
     <React.Fragment>
       <Popover.Title className="m-0 text-sm font-bold leading-5">Activity</Popover.Title>
-      <Popover.Description className="m-0 text-sm leading-5 text-gray-600 dark:text-gray-400">
+      <Popover.Description className="m-0 text-sm leading-5 text-neutral-600 dark:text-neutral-400">
         Nothing interesting happened recently.
       </Popover.Description>
     </React.Fragment>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
index 064616ae712..6e55017d712 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
       <Popover.Trigger
-        className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
       >
         <BellIcon aria-label="Notifications" />
@@ -18,10 +18,10 @@ export default function PopoverDetachedTriggersSimpleDemo() {
       <Popover.Root handle={demoPopover}>
         <Popover.Portal>
           <Popover.Positioner sideOffset={8}>
-            <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
-              <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+            <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+              <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
-              <Popover.Description className="text-sm text-gray-600 dark:text-gray-400">
+              <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
                 You are all caught up. Good job!
               </Popover.Description>
             </Popover.Popup>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
index c2c5abd60e7..b38fa6914e9 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
@@ -4,15 +4,15 @@ import { BellIcon } from '../../icons-tw';
 export default function ExamplePopover() {
   return (
     <Popover.Root>
-      <Popover.Trigger className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Popover.Trigger className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         <BellIcon aria-label="Notifications" />
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
-          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
-            <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+            <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
-            <Popover.Description className="text-sm text-gray-600 dark:text-gray-400">
+            <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
               You are all caught up. Good job!
             </Popover.Description>
           </Popover.Popup>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
index 719c2c5ac44..7360cd8b812 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
@@ -6,16 +6,16 @@ export default function ExamplePopover() {
     <Popover.Root>
       <Popover.Trigger
         openOnHover
-        className="flex size-8 items-center justify-center border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         <BellIcon aria-label="Notifications" />
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
-          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-gray-950 p-3 text-gray-950 dark:text-white border border-gray-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
-            <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+            <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
-            <Popover.Description className="text-sm text-gray-600 dark:text-gray-400">
+            <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
               You are all caught up. Good job!
             </Popover.Description>
           </Popover.Popup>
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
index 89cbef0cbc1..51e3139c1f4 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -14,7 +14,7 @@ const cardContents = {
         src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
         alt="Station Hofplein signage in Rotterdam, Netherlands"
       />
-      <p className="m-0 text-sm leading-5 text-gray-600 text-pretty dark:text-gray-400">
+      <p className="m-0 text-sm leading-5 text-neutral-600 text-pretty dark:text-neutral-400">
         <strong>Typography</strong> is the art and science of arranging type.
       </p>
     </div>
@@ -28,7 +28,7 @@ const cardContents = {
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Braun_ABW30_%28schwarz%29.jpg/250px-Braun_ABW30_%28schwarz%29.jpg"
         alt="Braun ABW30"
       />
-      <p className="m-0 text-sm leading-5 text-gray-600 text-pretty dark:text-gray-400">
+      <p className="m-0 text-sm leading-5 text-neutral-600 text-pretty dark:text-neutral-400">
         A <strong>design</strong> is the concept or proposal for an object, process, or system.
       </p>
     </div>
@@ -42,7 +42,7 @@ const cardContents = {
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/MonaLisa_sfumato.jpeg/250px-MonaLisa_sfumato.jpeg"
         alt="Mona Lisa"
       />
-      <p className="m-0 text-sm leading-5 text-gray-600 text-pretty dark:text-gray-400">
+      <p className="m-0 text-sm leading-5 text-neutral-600 text-pretty dark:text-neutral-400">
         <strong>Art</strong> is a diverse range of cultural activity centered around works utilizing
         creative or imaginative talents, which are expected to evoke a worthwhile experience,
         generally through an expression of emotional power, conceptual ideas, technical proficiency,
@@ -64,7 +64,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
   return (
     <div>
       <div className="flex flex-wrap items-baseline justify-center gap-2">
-        <p className="m-0 text-base leading-6 text-gray-950 text-balance dark:text-white">
+        <p className="m-0 text-base leading-6 text-neutral-950 text-balance dark:text-white">
           Discover{' '}
           <PreviewCard.Trigger
             className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
@@ -99,7 +99,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
         </p>
         <button
           type="button"
-          className="box-border flex h-10 items-center justify-center border border-gray-950 bg-white px-3.5 font-[inherit] text-base leading-6 font-normal text-gray-950 select-none hover:bg-gray-100 active:bg-gray-200 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-800 dark:active:bg-gray-700 disabled:border-gray-500 disabled:text-gray-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="box-border flex h-10 items-center justify-center border border-neutral-950 bg-white px-3.5 font-[inherit] text-base leading-6 font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
@@ -121,8 +121,8 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)]"
             >
-              <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-gray-950 bg-white text-gray-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
-                <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-gray-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-gray-950" />
+              <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+                <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
                 {payload}
               </PreviewCard.Popup>
             </PreviewCard.Positioner>
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
index 3e0256de8a1..e350c1b6173 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
@@ -13,9 +13,9 @@
 
 .Popup {
   position: relative;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
 
@@ -74,8 +74,8 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    border: 1px solid light-dark(var(--color-gray-950), white);
-    background-color: light-dark(white, var(--color-gray-950));
+    border: 1px solid light-dark(var(--color-neutral-950), white);
+    background-color: light-dark(white, var(--color-neutral-950));
     transform: translate(-50%, 50%) rotate(45deg);
   }
 }
@@ -140,7 +140,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
   text-wrap: pretty;
 }
 
@@ -148,7 +148,7 @@
   margin: 0;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   text-wrap: balance;
 }
 
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
index 3f72bb82256..8503dbd9b28 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
@@ -14,7 +14,7 @@ const cardContents = {
         src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
         alt="Station Hofplein signage in Rotterdam, Netherlands"
       />
-      <p className="m-0 text-sm leading-5 text-gray-600 text-pretty dark:text-gray-400">
+      <p className="m-0 text-sm leading-5 text-neutral-600 text-pretty dark:text-neutral-400">
         <strong>Typography</strong> is the art and science of arranging type.
       </p>
     </div>
@@ -28,7 +28,7 @@ const cardContents = {
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Braun_ABW30_%28schwarz%29.jpg/250px-Braun_ABW30_%28schwarz%29.jpg"
         alt="Braun ABW30"
       />
-      <p className="m-0 text-sm leading-5 text-gray-600 text-pretty dark:text-gray-400">
+      <p className="m-0 text-sm leading-5 text-neutral-600 text-pretty dark:text-neutral-400">
         A <strong>design</strong> is the concept or proposal for an object, process, or system.
       </p>
     </div>
@@ -42,7 +42,7 @@ const cardContents = {
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/MonaLisa_sfumato.jpeg/250px-MonaLisa_sfumato.jpeg"
         alt="Mona Lisa"
       />
-      <p className="m-0 text-sm leading-5 text-gray-600 text-pretty dark:text-gray-400">
+      <p className="m-0 text-sm leading-5 text-neutral-600 text-pretty dark:text-neutral-400">
         <strong>Art</strong> is a diverse range of cultural activity centered around works utilizing
         creative or imaginative talents, which are expected to evoke a worthwhile experience,
         generally through an expression of emotional power, conceptual ideas, technical proficiency,
@@ -55,7 +55,7 @@ const cardContents = {
 export default function PreviewCardDetachedTriggersFullDemo() {
   return (
     <div>
-      <p className="m-0 text-base leading-6 text-gray-950 text-balance dark:text-white">
+      <p className="m-0 text-base leading-6 text-neutral-950 text-balance dark:text-white">
         Discover{' '}
         <PreviewCard.Trigger
           className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500"
@@ -93,8 +93,8 @@ export default function PreviewCardDetachedTriggersFullDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]"
             >
-              <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-gray-950 bg-white text-gray-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[width,height,opacity,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
-                <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-gray-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-gray-950" />
+              <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[width,height,opacity,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+                <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
 
                 <PreviewCard.Viewport className="relative overflow-clip w-full h-full [&_[data-previous]]:w-[var(--popup-width)] [&_[data-previous]]:translate-x-0 [&_[data-previous]]:opacity-100 [&_[data-previous]]:transition-[translate,opacity] [&_[data-previous]]:duration-[350ms,175ms] [&_[data-previous]]:ease-[cubic-bezier(0.22,1,0.36,1)] [&_[data-current]]:w-[var(--popup-width)] [&_[data-current]]:translate-x-0 [&_[data-current]]:opacity-100 [&_[data-current]]:transition-[translate,opacity] [&_[data-current]]:duration-[350ms,175ms] [&_[data-current]]:ease-[cubic-bezier(0.22,1,0.36,1)] data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:-translate-x-[30%] data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:opacity-0 data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:translate-x-[30%] data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:opacity-0 data-[activation-direction~='left']:[&_[data-previous][data-ending-style]]:translate-x-[30%] data-[activation-direction~='left']:[&_[data-previous][data-ending-style]]:opacity-0 data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:-translate-x-[30%] data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:opacity-0">
                   {payload}
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
index 90fd8c24a7b..54a72224b59 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
@@ -6,7 +6,7 @@ const demoPreviewCard = PreviewCard.createHandle();
 export default function PreviewCardDetachedTriggersSimpleDemo() {
   return (
     <div>
-      <p className="m-0 text-base leading-6 text-gray-950 text-balance dark:text-white">
+      <p className="m-0 text-base leading-6 text-neutral-950 text-balance dark:text-white">
         The principles of good{' '}
         <PreviewCard.Trigger
           className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500"
@@ -21,8 +21,8 @@ export default function PreviewCardDetachedTriggersSimpleDemo() {
       <PreviewCard.Root handle={demoPreviewCard}>
         <PreviewCard.Portal>
           <PreviewCard.Positioner sideOffset={8}>
-            <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-gray-950 bg-white text-gray-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
-              <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-gray-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-gray-950" />
+            <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+              <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
               <div className="box-border flex w-min flex-col gap-2 p-2">
                 <img
                   width="224"
@@ -31,7 +31,7 @@ export default function PreviewCardDetachedTriggersSimpleDemo() {
                   src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
                   alt="Station Hofplein signage in Rotterdam, Netherlands"
                 />
-                <p className="m-0 text-sm leading-5 text-gray-600 text-pretty dark:text-gray-400">
+                <p className="m-0 text-sm leading-5 text-neutral-600 text-pretty dark:text-neutral-400">
                   <strong>Typography</strong> is the art and science of arranging type to make
                   written language clear, visually appealing, and effective in communication.
                 </p>
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
index b2e9db55c08..cec1a7bc4be 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { PreviewCard } from '@base-ui/react/preview-card';
 export default function ExamplePreviewCard() {
   return (
     <PreviewCard.Root>
-      <p className="m-0 text-base leading-6 text-gray-950 text-balance dark:text-white">
+      <p className="m-0 text-base leading-6 text-neutral-950 text-balance dark:text-white">
         The principles of good{' '}
         <PreviewCard.Trigger
           className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500"
@@ -16,8 +16,8 @@ export default function ExamplePreviewCard() {
 
       <PreviewCard.Portal>
         <PreviewCard.Positioner sideOffset={8}>
-          <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-gray-950 bg-white text-gray-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
-            <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-gray-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-gray-950" />
+          <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+            <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
             <div className="box-border flex w-min flex-col gap-2 p-2">
               <img
                 width="224"
@@ -26,7 +26,7 @@ export default function ExamplePreviewCard() {
                 src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
                 alt="Station Hofplein signage in Rotterdam, Netherlands"
               />
-              <p className="m-0 text-sm leading-5 text-gray-600 text-pretty dark:text-gray-400">
+              <p className="m-0 text-sm leading-5 text-neutral-600 text-pretty dark:text-neutral-400">
                 <strong>Typography</strong> is the art and science of arranging type to make written
                 language clear, visually appealing, and effective in communication.
               </p>
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
index bc8cd672112..0954693460c 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
@@ -9,9 +9,9 @@
   position: relative;
   width: var(--popup-width, auto);
   height: var(--popup-height, auto);
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
@@ -64,8 +64,8 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    border: 1px solid light-dark(var(--color-gray-950), white);
-    background-color: light-dark(white, var(--color-gray-950));
+    border: 1px solid light-dark(var(--color-neutral-950), white);
+    background-color: light-dark(white, var(--color-neutral-950));
     transform: translate(-50%, 50%) rotate(45deg);
   }
 }
@@ -88,7 +88,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
   text-wrap: pretty;
 }
 
@@ -104,7 +104,7 @@
   margin: 0;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   text-wrap: balance;
 }
 
@@ -152,23 +152,23 @@
   height: 2.5rem;
   padding: 0 0.875rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css
index c0434295f06..d989acd5009 100644
--- a/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css
@@ -10,13 +10,13 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Value {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   text-align: right;
 }
 
@@ -24,10 +24,10 @@
   grid-column: 1 / 3;
   overflow: hidden;
   height: 0.25rem;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
 }
 
 .Indicator {
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
   transition: width 500ms;
 }
diff --git a/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx
index fa4b9538dd3..f24bf7a56ba 100644
--- a/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx
@@ -15,12 +15,12 @@ export default function ExampleProgress() {
 
   return (
     <Progress.Root className="grid max-w-full w-60 grid-cols-2 gap-y-2" value={value}>
-      <Progress.Label className="text-sm leading-5 font-normal text-gray-950 dark:text-white">
+      <Progress.Label className="text-sm leading-5 font-normal text-neutral-950 dark:text-white">
         Export data
       </Progress.Label>
-      <Progress.Value className="text-right text-sm leading-5 text-gray-950 dark:text-white" />
-      <Progress.Track className="col-span-2 h-1 overflow-hidden bg-gray-200 dark:bg-gray-800">
-        <Progress.Indicator className="bg-gray-950 transition-[width] duration-500 dark:bg-white" />
+      <Progress.Value className="text-right text-sm leading-5 text-neutral-950 dark:text-white" />
+      <Progress.Track className="col-span-2 h-1 overflow-hidden bg-neutral-200 dark:bg-neutral-800">
+        <Progress.Indicator className="bg-neutral-950 transition-[width] duration-500 dark:bg-white" />
       </Progress.Track>
     </Progress.Root>
   );
diff --git a/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
index 347341d5489..cb50de11e44 100644
--- a/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Caption {
@@ -29,16 +29,16 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 100%;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(white, var(--color-neutral-950));
   padding: 0;
   margin: 0;
 
   &[data-checked] {
-    background-color: light-dark(var(--color-gray-950), white);
-    color: light-dark(white, var(--color-gray-950));
+    background-color: light-dark(var(--color-neutral-950), white);
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
index 8d669d8d7c2..733b98fd815 100644
--- a/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
@@ -9,36 +9,36 @@ export default function ExampleRadioGroup() {
     <RadioGroup
       aria-labelledby={id}
       defaultValue="fuji-apple"
-      className="flex flex-col items-start gap-1 text-gray-950 dark:text-white"
+      className="flex flex-col items-start gap-1 text-neutral-950 dark:text-white"
     >
       <div className="text-sm leading-5 font-bold" id={id}>
         Best apple
       </div>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-950 dark:text-white">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-neutral-950 dark:text-white">
         <Radio.Root
           value="fuji-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-950 bg-white text-white dark:border-white dark:bg-gray-950 dark:text-gray-950 data-checked:bg-gray-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         >
           <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>
         Fuji
       </label>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-950 dark:text-white">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-neutral-950 dark:text-white">
         <Radio.Root
           value="gala-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-950 bg-white text-white dark:border-white dark:bg-gray-950 dark:text-gray-950 data-checked:bg-gray-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         >
           <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>
         Gala
       </label>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-950 dark:text-white">
+      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-neutral-950 dark:text-white">
         <Radio.Root
           value="granny-smith-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-gray-950 bg-white text-white dark:border-white dark:bg-gray-950 dark:text-gray-950 data-checked:bg-gray-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-gray-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
         >
           <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
index 7fd0f912ab2..dee4693ce97 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
@@ -8,7 +8,7 @@
 .Viewport {
   box-sizing: border-box;
   height: 100%;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
@@ -31,13 +31,13 @@
 }
 
 .Item {
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.875rem;
   font-weight: 700;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .Scrollbar {
@@ -90,5 +90,5 @@
 
 .Thumb {
   width: 100%;
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
index e66703ef228..3e14fe71255 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
@@ -3,13 +3,13 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function ExampleScrollAreaBoth() {
   return (
     <ScrollArea.Root className="h-80 w-80 max-w-[calc(100vw-8rem)]">
-      <ScrollArea.Viewport className="box-border h-full border border-gray-950 dark:border-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <ScrollArea.Viewport className="box-border h-full border border-neutral-950 dark:border-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         <ScrollArea.Content className="pt-3 pr-6 pb-6 pl-3">
           <ul className="m-0 grid list-none grid-cols-[repeat(10,6.25rem)] grid-rows-[repeat(10,6.25rem)] gap-3 p-0">
             {Array.from({ length: 100 }, (_, i) => (
               <li
                 key={i}
-                className="flex items-center justify-center bg-gray-200 dark:bg-gray-800 text-sm font-bold text-gray-600 dark:text-gray-400"
+                className="flex items-center justify-center bg-neutral-200 dark:bg-neutral-800 text-sm font-bold text-neutral-600 dark:text-neutral-400"
               >
                 {i + 1}
               </li>
@@ -18,13 +18,13 @@ export default function ExampleScrollAreaBoth() {
         </ScrollArea.Content>
       </ScrollArea.Viewport>
       <ScrollArea.Scrollbar className="relative m-px flex bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:content-[''] data-[orientation=vertical]:w-4 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:bottom-0 data-[hovering]:pointer-events-auto data-[hovering]:opacity-100 data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0">
-        <ScrollArea.Thumb className="w-full bg-gray-950 dark:bg-white" />
+        <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
       </ScrollArea.Scrollbar>
       <ScrollArea.Scrollbar
         className="relative m-px flex bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:content-[''] data-[orientation=vertical]:w-4 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:bottom-0 data-[hovering]:pointer-events-auto data-[hovering]:opacity-100 data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0"
         orientation="horizontal"
       >
-        <ScrollArea.Thumb className="w-full bg-gray-950 dark:bg-white" />
+        <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
       </ScrollArea.Scrollbar>
       <ScrollArea.Corner />
     </ScrollArea.Root>
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
index 4590ee89bf3..f70e5605550 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
@@ -3,13 +3,13 @@
   width: 24rem;
   height: 8.5rem;
   max-width: calc(100vw - 8rem);
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
 }
 
 .Viewport {
   box-sizing: border-box;
   height: 100%;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
@@ -30,7 +30,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.375rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Scrollbar {
@@ -63,5 +63,5 @@
 
 .Thumb {
   width: 100%;
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
index cf8575ab478..7966a633616 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
@@ -2,9 +2,9 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 
 export default function ExampleScrollArea() {
   return (
-    <ScrollArea.Root className="h-[8.5rem] w-96 max-w-[calc(100vw-8rem)] bg-white dark:bg-gray-950">
-      <ScrollArea.Viewport className="box-border h-full border border-gray-950 dark:border-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
-        <ScrollArea.Content className="flex flex-col gap-4 py-2 pr-5 pl-3 text-sm leading-[1.375rem] text-gray-950 dark:text-white">
+    <ScrollArea.Root className="h-[8.5rem] w-96 max-w-[calc(100vw-8rem)] bg-white dark:bg-neutral-950">
+      <ScrollArea.Viewport className="box-border h-full border border-neutral-950 dark:border-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <ScrollArea.Content className="flex flex-col gap-4 py-2 pr-5 pl-3 text-sm leading-[1.375rem] text-neutral-950 dark:text-white">
           <p>
             Vernacular architecture is building done outside any academic tradition, and without
             professional guidance. It is not a particular architectural movement or style, but
@@ -27,7 +27,7 @@ export default function ExampleScrollArea() {
         </ScrollArea.Content>
       </ScrollArea.Viewport>
       <ScrollArea.Scrollbar className="m-px flex w-4 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:h-full before:w-5 before:content-[''] data-[hovering]:opacity-100 data-[hovering]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0 data-[scrolling]:pointer-events-auto">
-        <ScrollArea.Thumb className="w-full bg-gray-950 dark:bg-white" />
+        <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
       </ScrollArea.Scrollbar>
     </ScrollArea.Root>
   );
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
index f51420ab238..b2eb59247c5 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
@@ -3,13 +3,13 @@
   width: 24rem;
   height: 12rem;
   max-width: calc(100vw - 8rem);
-  background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+  background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
 }
 
 .Viewport {
   --fade-size: 40px;
   height: 100%;
-  background: light-dark(var(--color-gray-100), var(--color-gray-800));
+  background: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   mask-image: linear-gradient(
     to bottom,
     transparent 0,
@@ -38,7 +38,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.375rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Scrollbar {
@@ -71,5 +71,5 @@
 
 .Thumb {
   width: 100%;
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
index a5d91cdf1d6..77168e1528d 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
@@ -2,9 +2,9 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 
 export default function ExampleScrollAreaScrollFade() {
   return (
-    <ScrollArea.Root className="box-border h-48 w-96 max-w-[calc(100vw-8rem)] bg-gray-100 dark:bg-gray-800">
-      <ScrollArea.Viewport className="h-full bg-gray-100 dark:bg-gray-800 mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] mask-no-repeat focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
-        <ScrollArea.Content className="flex flex-col gap-4 py-2 pr-5 pl-3 text-sm leading-[1.375rem] text-gray-950 dark:text-white">
+    <ScrollArea.Root className="box-border h-48 w-96 max-w-[calc(100vw-8rem)] bg-neutral-100 dark:bg-neutral-800">
+      <ScrollArea.Viewport className="h-full bg-neutral-100 dark:bg-neutral-800 mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] mask-no-repeat focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <ScrollArea.Content className="flex flex-col gap-4 py-2 pr-5 pl-3 text-sm leading-[1.375rem] text-neutral-950 dark:text-white">
           <p>
             Vernacular architecture is building done outside any academic tradition, and without
             professional guidance. It is not a particular architectural movement or style, but
@@ -27,7 +27,7 @@ export default function ExampleScrollAreaScrollFade() {
         </ScrollArea.Content>
       </ScrollArea.Viewport>
       <ScrollArea.Scrollbar className="m-px flex w-4 justify-center bg-black/8 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:h-full before:w-5 before:content-[''] data-[hovering]:opacity-100 data-[hovering]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0 data-[scrolling]:pointer-events-auto">
-        <ScrollArea.Thumb className="w-full bg-gray-950 dark:bg-white" />
+        <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
       </ScrollArea.Scrollbar>
     </ScrollArea.Root>
   );
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index a2e1cb7b657..5d5ece740be 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -9,12 +9,12 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   cursor: default;
 }
 
 .Value[data-placeholder] {
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .Select {
@@ -28,33 +28,33 @@
   padding-right: 0.5rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
   min-width: 11rem;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -76,10 +76,10 @@
 .Popup {
   box-sizing: border-box;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   background-clip: padding-box;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
@@ -128,8 +128,8 @@
   line-height: 1rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: light-dark(var(--color-gray-500), var(--color-gray-400));
-  background-color: light-dark(white, var(--color-gray-950));
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  background-color: light-dark(white, var(--color-neutral-950));
   position: sticky;
   z-index: 1;
   top: 0;
@@ -155,8 +155,8 @@
   }
 
   &[data-highlighted] {
-    background-color: light-dark(var(--color-gray-950), white);
-    color: light-dark(white, var(--color-gray-950));
+    background-color: light-dark(var(--color-neutral-950), white);
+    color: light-dark(white, var(--color-neutral-950));
   }
 }
 
@@ -178,12 +178,12 @@
   height: 1px;
   margin-block: 0.25rem;
   margin-inline: 1rem;
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
 }
 
 .ScrollArrow {
   width: 100%;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   z-index: 2;
   text-align: center;
   cursor: default;
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index 8d4d77391e2..94a450a37d1 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -6,16 +6,16 @@ export default function ExampleSelectGrouped() {
   return (
     <Field.Root className="flex flex-col items-start gap-1">
       <Field.Label
-        className="cursor-default text-sm leading-5 font-bold text-gray-950 dark:text-white"
+        className="cursor-default text-sm leading-5 font-bold text-neutral-950 dark:text-white"
         nativeLabel={false}
         render={<div />}
       >
         Produce
       </Field.Label>
       <Select.Root items={groupedProduce}>
-        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           <Select.Value
-            className="data-[placeholder]:text-gray-600 dark:data-[placeholder]:text-gray-400"
+            className="data-[placeholder]:text-neutral-600 dark:data-[placeholder]:text-neutral-400"
             placeholder="Select produce"
           />
           <Select.Icon className="flex">
@@ -24,22 +24,22 @@ export default function ExampleSelectGrouped() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
-              <Select.ScrollUpArrow className="top-0 z-[2] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-gray-950">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+              <Select.ScrollUpArrow className="top-0 z-[2] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
                 ⏶
               </Select.ScrollUpArrow>
               <Select.List className="relative py-1 scroll-pt-[2.25rem] scroll-pb-6 overflow-y-auto max-h-[var(--available-height)]">
                 {groupedProduce.map((group, index) => (
                   <React.Fragment key={group.value}>
                     <Select.Group className="block pb-0.5">
-                      <Select.GroupLabel className="sticky top-0 z-[1] bg-white pr-4 pb-1 pl-[1.875rem] pt-2 text-xs font-bold text-gray-500 uppercase tracking-wider dark:bg-gray-950 dark:text-gray-400">
+                      <Select.GroupLabel className="sticky top-0 z-[1] bg-white pr-4 pb-1 pl-[1.875rem] pt-2 text-xs font-bold text-neutral-500 uppercase tracking-wider dark:bg-neutral-950 dark:text-neutral-400">
                         {group.value}
                       </Select.GroupLabel>
                       {group.items.map((item) => (
                         <Select.Item
                           key={item.value}
                           value={item.value}
-                          className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-hidden select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-gray-950 data-[highlighted]:text-white dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-gray-950"
+                          className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-hidden select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-neutral-950 data-[highlighted]:text-white dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-neutral-950"
                         >
                           <Select.ItemIndicator className="col-start-1">
                             <CheckIcon className="size-3" />
@@ -49,12 +49,12 @@ export default function ExampleSelectGrouped() {
                       ))}
                     </Select.Group>
                     {index < groupedProduce.length - 1 ? (
-                      <Select.Separator className="mx-4 my-1 h-px bg-gray-950 dark:bg-white" />
+                      <Select.Separator className="mx-4 my-1 h-px bg-neutral-950 dark:bg-white" />
                     ) : null}
                   </React.Fragment>
                 ))}
               </Select.List>
-              <Select.ScrollDownArrow className="bottom-0 z-[2] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:bottom-[-100%] dark:bg-gray-950">
+              <Select.ScrollDownArrow className="bottom-0 z-[2] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:bottom-[-100%] dark:bg-neutral-950">
                 ⏷
               </Select.ScrollDownArrow>
             </Select.Popup>
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
index cc30609ec32..a63774891d5 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
@@ -9,12 +9,12 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   cursor: default;
 }
 
 .Value[data-placeholder] {
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .Select {
@@ -28,33 +28,33 @@
   padding-right: 0.5rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
   min-width: 10rem;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -76,10 +76,10 @@
 .Popup {
   box-sizing: border-box;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   background-clip: padding-box;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
@@ -134,8 +134,8 @@
   }
 
   &[data-highlighted] {
-    background-color: light-dark(var(--color-gray-950), white);
-    color: light-dark(white, var(--color-gray-950));
+    background-color: light-dark(var(--color-neutral-950), white);
+    color: light-dark(white, var(--color-neutral-950));
   }
 }
 
@@ -155,7 +155,7 @@
 
 .ScrollArrow {
   width: 100%;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   z-index: 1;
   text-align: center;
   cursor: default;
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index 18444dbacb1..53726e88593 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -13,12 +13,12 @@ export default function ExampleSelect() {
   return (
     <div className="flex flex-col items-start gap-1">
       <Select.Root items={apples}>
-        <Select.Label className="cursor-default text-sm leading-5 font-bold text-gray-950 dark:text-white">
+        <Select.Label className="cursor-default text-sm leading-5 font-bold text-neutral-950 dark:text-white">
           Apple
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           <Select.Value
-            className="data-[placeholder]:text-gray-600 dark:data-[placeholder]:text-gray-400"
+            className="data-[placeholder]:text-neutral-600 dark:data-[placeholder]:text-neutral-400"
             placeholder="Select apple"
           />
           <Select.Icon className="flex">
@@ -27,8 +27,8 @@ export default function ExampleSelect() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
-              <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-gray-950">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+              <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
                 ⏶
               </Select.ScrollUpArrow>
               <Select.List className="relative py-1 scroll-py-6 overflow-y-auto max-h-[var(--available-height)]">
@@ -36,7 +36,7 @@ export default function ExampleSelect() {
                   <Select.Item
                     key={label}
                     value={value}
-                    className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-hidden select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-gray-950 data-[highlighted]:text-white dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-gray-950"
+                    className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-hidden select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-neutral-950 data-[highlighted]:text-white dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-neutral-950"
                   >
                     <Select.ItemIndicator className="col-start-1">
                       <CheckIcon className="size-3" />
@@ -45,7 +45,7 @@ export default function ExampleSelect() {
                   </Select.Item>
                 ))}
               </Select.List>
-              <Select.ScrollDownArrow className="bottom-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:bottom-[-100%] dark:bg-gray-950">
+              <Select.ScrollDownArrow className="bottom-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:bottom-[-100%] dark:bg-neutral-950">
                 ⏷
               </Select.ScrollDownArrow>
             </Select.Popup>
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
index 5d0f67c533a..f0fcbdf19f5 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
@@ -9,12 +9,12 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   cursor: default;
 }
 
 .Value[data-placeholder] {
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .Select {
@@ -28,33 +28,33 @@
   padding-right: 0.5rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
   min-width: 14rem;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -76,10 +76,10 @@
   box-sizing: border-box;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   background-clip: padding-box;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
@@ -129,8 +129,8 @@
 
   @media (hover: hover) {
     &[data-highlighted] {
-      background-color: light-dark(var(--color-gray-950), white);
-      color: light-dark(white, var(--color-gray-950));
+      background-color: light-dark(var(--color-neutral-950), white);
+      color: light-dark(white, var(--color-neutral-950));
     }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index 1aa71837047..2486c882e9d 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -33,11 +33,11 @@ export default function MultiSelectExample() {
   return (
     <div className="flex flex-col items-start gap-1">
       <Select.Root multiple defaultValue={['javascript', 'typescript']}>
-        <Select.Label className="cursor-default text-sm leading-5 font-bold text-gray-950 dark:text-white">
+        <Select.Label className="cursor-default text-sm leading-5 font-bold text-neutral-950 dark:text-white">
           Languages
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
-          <Select.Value className="data-[placeholder]:text-gray-600 dark:data-[placeholder]:text-gray-400">
+        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+          <Select.Value className="data-[placeholder]:text-neutral-600 dark:data-[placeholder]:text-neutral-400">
             {renderValue}
           </Select.Value>
           <Select.Icon className="flex">
@@ -50,12 +50,12 @@ export default function MultiSelectExample() {
             sideOffset={8}
             alignItemWithTrigger={false}
           >
-            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding overflow-y-auto border border-gray-950 bg-white py-1 text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding overflow-y-auto border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               {values.map((value) => (
                 <Select.Item
                   key={value}
                   value={value}
-                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-hidden select-none scroll-my-1 group-data-[side=none]:pr-12 [@media(hover:hover)]:[&[data-highlighted]]:bg-gray-950 [@media(hover:hover)]:[&[data-highlighted]]:text-white dark:[@media(hover:hover)]:[&[data-highlighted]]:bg-white dark:[@media(hover:hover)]:[&[data-highlighted]]:text-gray-950"
+                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-hidden select-none scroll-my-1 group-data-[side=none]:pr-12 [@media(hover:hover)]:[&[data-highlighted]]:bg-neutral-950 [@media(hover:hover)]:[&[data-highlighted]]:text-white dark:[@media(hover:hover)]:[&[data-highlighted]]:bg-white dark:[@media(hover:hover)]:[&[data-highlighted]]:text-neutral-950"
                 >
                   <Select.ItemIndicator className="col-start-1">
                     <CheckIcon className="size-3" />
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
index c41312362d6..e6e1fed35d8 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
@@ -9,7 +9,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   cursor: default;
 }
 
@@ -25,33 +25,33 @@
   padding-right: 0.5rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
   min-width: 16rem;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -75,7 +75,7 @@
 .ValueSecondary {
   font-size: 0.75rem;
   line-height: 1rem;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .SelectIcon {
@@ -93,10 +93,10 @@
 .Popup {
   box-sizing: border-box;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   background-clip: padding-box;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
@@ -152,11 +152,11 @@
 
   @media (hover: hover) {
     &[data-highlighted] {
-      background-color: light-dark(var(--color-gray-950), white);
-      color: light-dark(white, var(--color-gray-950));
+      background-color: light-dark(var(--color-neutral-950), white);
+      color: light-dark(white, var(--color-neutral-950));
 
       .ItemDescription {
-        color: light-dark(var(--color-gray-400), var(--color-gray-600));
+        color: light-dark(var(--color-neutral-400), var(--color-neutral-600));
       }
     }
   }
@@ -193,12 +193,12 @@
 .ItemDescription {
   font-size: 0.75rem;
   line-height: 1rem;
-  color: light-dark(var(--color-gray-600), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .ScrollArrow {
   width: 100%;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   z-index: 1;
   text-align: center;
   cursor: default;
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index 70e4448855b..d4cb337b599 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -6,15 +6,15 @@ export default function ObjectValueSelect() {
   return (
     <div className="flex flex-col items-start gap-1">
       <Select.Root defaultValue={shippingMethods[0]} itemToStringValue={(item) => item.id}>
-        <Select.Label className="cursor-default text-sm leading-5 font-bold text-gray-950 dark:text-white">
+        <Select.Label className="cursor-default text-sm leading-5 font-bold text-neutral-950 dark:text-white">
           Shipping method
         </Select.Label>
-        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-start justify-between gap-3 pl-3 pr-2 py-1.5 text-sm leading-5 border border-gray-950 dark:border-white bg-white dark:bg-gray-950 text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:bg-gray-200 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 data-[popup-open]:bg-gray-100 dark:data-[popup-open]:bg-gray-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-start justify-between gap-3 pl-3 pr-2 py-1.5 text-sm leading-5 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           <Select.Value>
             {(method: ShippingMethod) => (
               <span className="flex flex-col items-start gap-0.5">
                 <span className="text-sm leading-5">{method.name}</span>
-                <span className="text-xs leading-4 text-gray-600 dark:text-gray-400">
+                <span className="text-xs leading-4 text-neutral-600 dark:text-neutral-400">
                   {method.duration} ({method.price})
                 </span>
               </span>
@@ -26,8 +26,8 @@ export default function ObjectValueSelect() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-gray-950 bg-white text-gray-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
-              <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-gray-950">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+              <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
                 ⏶
               </Select.ScrollUpArrow>
               <Select.List className="relative py-1 scroll-py-6 overflow-y-auto max-h-[var(--available-height)]">
@@ -35,21 +35,21 @@ export default function ObjectValueSelect() {
                   <Select.Item
                     key={method.id}
                     value={method}
-                    className="group/item grid cursor-default grid-cols-[0.75rem_1fr] items-start gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-hidden select-none group-data-[side=none]:pr-12 [@media(hover:hover)]:[&[data-highlighted]]:bg-gray-950 [@media(hover:hover)]:[&[data-highlighted]]:text-white dark:[@media(hover:hover)]:[&[data-highlighted]]:bg-white dark:[@media(hover:hover)]:[&[data-highlighted]]:text-gray-950"
+                    className="group/item grid cursor-default grid-cols-[0.75rem_1fr] items-start gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-hidden select-none group-data-[side=none]:pr-12 [@media(hover:hover)]:[&[data-highlighted]]:bg-neutral-950 [@media(hover:hover)]:[&[data-highlighted]]:text-white dark:[@media(hover:hover)]:[&[data-highlighted]]:bg-white dark:[@media(hover:hover)]:[&[data-highlighted]]:text-neutral-950"
                   >
                     <Select.ItemIndicator className="col-start-1 flex items-center justify-center self-start relative top-[0.4em]">
                       <CheckIcon className="size-3" />
                     </Select.ItemIndicator>
                     <Select.ItemText className="col-start-2 flex flex-col gap-0.5">
                       <span className="text-sm leading-5">{method.name}</span>
-                      <span className="text-xs leading-4 text-gray-600 [@media(hover:hover)]:group-data-[highlighted]/item:text-gray-400 dark:text-gray-400 dark:[@media(hover:hover)]:group-data-[highlighted]/item:text-gray-600">
+                      <span className="text-xs leading-4 text-neutral-600 [@media(hover:hover)]:group-data-[highlighted]/item:text-neutral-400 dark:text-neutral-400 dark:[@media(hover:hover)]:group-data-[highlighted]/item:text-neutral-600">
                         {method.duration} ({method.price})
                       </span>
                     </Select.ItemText>
                   </Select.Item>
                 ))}
               </Select.List>
-              <Select.ScrollDownArrow className="bottom-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:bottom-[-100%] dark:bg-gray-950">
+              <Select.ScrollDownArrow className="bottom-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:bottom-[-100%] dark:bg-neutral-950">
                 ⏷
               </Select.ScrollDownArrow>
             </Select.Popup>
diff --git a/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css
index fe64c27ae19..67245cd31b9 100644
--- a/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css
@@ -6,14 +6,14 @@
 
 .Separator {
   width: 1px;
-  background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+  background-color: light-dark(var(--color-neutral-300), var(--color-neutral-700));
 }
 
 .Link {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
-  text-decoration-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+  color: light-dark(var(--color-neutral-950), white);
+  text-decoration-color: light-dark(var(--color-neutral-300), var(--color-neutral-700));
   text-decoration-thickness: 1px;
   text-decoration-line: none;
   text-underline-offset: 2px;
diff --git a/docs/src/app/(docs)/react/components/separator/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/separator/demos/hero/tailwind/index.tsx
index 71cda6f3e89..bc29b2d06a1 100644
--- a/docs/src/app/(docs)/react/components/separator/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/separator/demos/hero/tailwind/index.tsx
@@ -5,40 +5,40 @@ export default function ExampleSeparator() {
     <div className="flex gap-4 text-nowrap">
       <a
         href="#"
-        className="text-sm text-gray-950 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
+        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-neutral-700"
       >
         Home
       </a>
       <a
         href="#"
-        className="text-sm text-gray-950 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
+        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-neutral-700"
       >
         Pricing
       </a>
       <a
         href="#"
-        className="text-sm text-gray-950 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
+        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-neutral-700"
       >
         Blog
       </a>
       <a
         href="#"
-        className="text-sm text-gray-950 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
+        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-neutral-700"
       >
         Support
       </a>
 
-      <Separator orientation="vertical" className="w-px bg-gray-300 dark:bg-gray-700" />
+      <Separator orientation="vertical" className="w-px bg-neutral-300 dark:bg-neutral-700" />
 
       <a
         href="#"
-        className="text-sm text-gray-950 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
+        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-neutral-700"
       >
         Log in
       </a>
       <a
         href="#"
-        className="text-sm text-gray-950 decoration-gray-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-gray-700"
+        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-neutral-700"
       >
         Sign up
       </a>
diff --git a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css
index 02aa04f1d36..02b56d09b77 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css
@@ -11,12 +11,12 @@
 .Track {
   width: 100%;
   height: 0.25rem;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
   user-select: none;
 }
 
 .Indicator {
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 }
 
@@ -24,8 +24,8 @@
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   user-select: none;
 
   &:has(:focus-visible) {
diff --git a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx
index 2c1369dae59..86fa58a0bf8 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx
@@ -4,9 +4,9 @@ export default function EdgeAlignedThumb() {
   return (
     <Slider.Root thumbAlignment="edge" defaultValue={25}>
       <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
-        <Slider.Track className="h-1 w-full bg-gray-200 select-none dark:bg-gray-800">
-          <Slider.Indicator className="bg-gray-950 select-none dark:bg-white" />
-          <Slider.Thumb className="box-border size-4 border border-gray-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-gray-950" />
+        <Slider.Track className="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800">
+          <Slider.Indicator className="bg-neutral-950 select-none dark:bg-white" />
+          <Slider.Thumb className="box-border size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950" />
         </Slider.Track>
       </Slider.Control>
     </Slider.Root>
diff --git a/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css
index 02aa04f1d36..02b56d09b77 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css
@@ -11,12 +11,12 @@
 .Track {
   width: 100%;
   height: 0.25rem;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
   user-select: none;
 }
 
 .Indicator {
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 }
 
@@ -24,8 +24,8 @@
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   user-select: none;
 
   &:has(:focus-visible) {
diff --git a/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx
index abceff11fcb..130e74efad8 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx
@@ -4,11 +4,11 @@ export default function ExampleSlider() {
   return (
     <Slider.Root defaultValue={25}>
       <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
-        <Slider.Track className="h-1 w-full bg-gray-200 select-none dark:bg-gray-800">
-          <Slider.Indicator className="bg-gray-950 select-none dark:bg-white" />
+        <Slider.Track className="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800">
+          <Slider.Indicator className="bg-neutral-950 select-none dark:bg-white" />
           <Slider.Thumb
             aria-label="Volume"
-            className="box-border size-4 border border-gray-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-gray-950"
+            className="box-border size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950"
           />
         </Slider.Track>
       </Slider.Control>
diff --git a/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css
index 02aa04f1d36..02b56d09b77 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css
@@ -11,12 +11,12 @@
 .Track {
   width: 100%;
   height: 0.25rem;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
   user-select: none;
 }
 
 .Indicator {
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 }
 
@@ -24,8 +24,8 @@
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   user-select: none;
 
   &:has(:focus-visible) {
diff --git a/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx
index 4fdb1ea019c..051e408654e 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx
@@ -4,17 +4,17 @@ export default function RangeSlider() {
   return (
     <Slider.Root defaultValue={[25, 45]}>
       <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
-        <Slider.Track className="h-1 w-full bg-gray-200 select-none dark:bg-gray-800">
-          <Slider.Indicator className="bg-gray-950 select-none dark:bg-white" />
+        <Slider.Track className="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800">
+          <Slider.Indicator className="bg-neutral-950 select-none dark:bg-white" />
           <Slider.Thumb
             index={0}
             aria-label="Minimum value"
-            className="box-border size-4 border border-gray-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-gray-950"
+            className="box-border size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950"
           />
           <Slider.Thumb
             index={1}
             aria-label="Maximum value"
-            className="box-border size-4 border border-gray-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-gray-950"
+            className="box-border size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950"
           />
         </Slider.Track>
       </Slider.Control>
diff --git a/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css
index c72c93879f5..6f91917db3d 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css
@@ -11,7 +11,7 @@
 }
 
 .Track {
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
   user-select: none;
 
   &[data-orientation='vertical'] {
@@ -21,7 +21,7 @@
 }
 
 .Indicator {
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 }
 
@@ -29,8 +29,8 @@
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   user-select: none;
 
   &:has(:focus-visible) {
diff --git a/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx
index 2717413eae7..8dea7b47b9a 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx
@@ -4,11 +4,11 @@ export default function VerticalSlider() {
   return (
     <Slider.Root orientation="vertical" defaultValue={35}>
       <Slider.Control className="flex touch-none select-none data-[orientation=vertical]:h-32 data-[orientation=vertical]:px-3">
-        <Slider.Track className="bg-gray-200 select-none dark:bg-gray-800 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1">
-          <Slider.Indicator className="bg-gray-950 select-none dark:bg-white" />
+        <Slider.Track className="bg-neutral-200 select-none dark:bg-neutral-800 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1">
+          <Slider.Indicator className="bg-neutral-950 select-none dark:bg-white" />
           <Slider.Thumb
             aria-label="Volume"
-            className="box-border size-4 border border-gray-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-gray-950"
+            className="box-border size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950"
           />
         </Slider.Track>
       </Slider.Control>
diff --git a/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
index 5c31cc6e0f2..470df7ca8f6 100644
--- a/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
@@ -5,21 +5,21 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  color: light-dark(var(--color-neutral-900), var(--color-neutral-50));
 }
 
 .Switch {
   box-sizing: border-box;
   display: flex;
   flex-shrink: 0;
-  border: 1px solid light-dark(var(--color-gray-900), var(--color-gray-50));
+  border: 1px solid light-dark(var(--color-neutral-900), var(--color-neutral-50));
   padding: 0.125rem;
   width: 2.25rem;
   height: 1.25rem;
-  background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+  background-color: light-dark(var(--color-neutral-50), var(--color-neutral-900));
 
   &[data-checked] {
-    background-color: light-dark(var(--color-gray-900), var(--color-gray-50));
+    background-color: light-dark(var(--color-neutral-900), var(--color-neutral-50));
   }
 
   &:focus-visible {
@@ -31,11 +31,11 @@
 .Thumb {
   width: 0.875rem;
   height: 0.875rem;
-  background-color: light-dark(var(--color-gray-900), var(--color-gray-50));
+  background-color: light-dark(var(--color-neutral-900), var(--color-neutral-50));
   transition: translate 150ms ease;
 
   &[data-checked] {
     translate: 1rem 0;
-    background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+    background-color: light-dark(var(--color-neutral-50), var(--color-neutral-900));
   }
 }
diff --git a/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
index a409168a8c3..70d8b595dea 100644
--- a/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
@@ -2,12 +2,12 @@ import { Switch } from '@base-ui/react/switch';
 
 export default function ExampleSwitch() {
   return (
-    <label className="flex items-center gap-2 text-sm leading-5 font-normal text-gray-900 dark:text-gray-50">
+    <label className="flex items-center gap-2 text-sm leading-5 font-normal text-neutral-900 dark:text-neutral-50">
       <Switch.Root
         defaultChecked
-        className="box-border flex h-5 w-9 shrink-0 border border-gray-900 bg-gray-50 p-0.5 dark:border-gray-50 dark:bg-gray-900 data-checked:bg-gray-900 dark:data-checked:bg-gray-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+        className="box-border flex h-5 w-9 shrink-0 border border-neutral-900 bg-neutral-50 p-0.5 dark:border-neutral-50 dark:bg-neutral-900 data-checked:bg-neutral-900 dark:data-checked:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
       >
-        <Switch.Thumb className="size-3.5 bg-gray-900 transition-transform duration-150 data-checked:translate-x-4 data-checked:bg-gray-50 dark:bg-gray-50 dark:data-checked:bg-gray-900" />
+        <Switch.Thumb className="size-3.5 bg-neutral-900 transition-transform duration-150 data-checked:translate-x-4 data-checked:bg-neutral-50 dark:bg-neutral-50 dark:data-checked:bg-neutral-900" />
       </Switch.Root>
       Notifications
     </label>
diff --git a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
index 8f9d2d95ad9..59f314f602f 100644
--- a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
@@ -15,7 +15,7 @@
   margin: 0;
   outline: 0;
   background: none;
-  color: light-dark(var(--color-gray-600), var(--color-gray-300));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-300));
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -29,12 +29,12 @@
 
   @media (hover: hover) {
     &:hover {
-      color: light-dark(var(--color-gray-950), white);
+      color: light-dark(var(--color-neutral-950), white);
     }
   }
 
   &[data-active] {
-    color: light-dark(var(--color-gray-950), white);
+    color: light-dark(var(--color-neutral-950), white);
   }
 
   &:focus-visible {
@@ -55,9 +55,9 @@
   transition-property: translate, width;
   transition-duration: 150ms;
   transition-timing-function: ease-in-out;
-  border-top: 1px solid light-dark(var(--color-gray-950), white);
-  border-inline: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border-top: 1px solid light-dark(var(--color-neutral-950), white);
+  border-inline: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
 }
 
 .Panel {
@@ -68,9 +68,9 @@
   justify-content: center;
   height: 8rem;
   outline: 0;
-  border-inline: 1px solid light-dark(var(--color-gray-950), white);
-  border-block: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border-inline: 1px solid light-dark(var(--color-neutral-950), white);
+  border-block: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
@@ -86,5 +86,5 @@
 .Icon {
   width: 2.5rem;
   height: 2.5rem;
-  color: light-dark(var(--color-gray-400), var(--color-gray-500));
+  color: light-dark(var(--color-neutral-400), var(--color-neutral-500));
 }
diff --git a/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
index 5a5c339ed5b..2f835ae9b1e 100644
--- a/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
@@ -6,42 +6,42 @@ export default function ExampleTabs() {
     <Tabs.Root defaultValue="overview">
       <Tabs.List className="relative z-1 -mb-px flex gap-1">
         <Tabs.Tab
-          className="flex h-[calc(2rem+1px)] items-center justify-center border-0 px-2 text-sm font-normal break-keep whitespace-nowrap text-gray-600 outline-0 select-none hover:text-gray-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-active:text-gray-950 dark:text-gray-300 dark:hover:text-white dark:data-active:text-white"
+          className="flex h-[calc(2rem+1px)] items-center justify-center border-0 px-2 text-sm font-normal break-keep whitespace-nowrap text-neutral-600 outline-0 select-none hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-active:text-neutral-950 dark:text-neutral-300 dark:hover:text-white dark:data-active:text-white"
           value="overview"
         >
           Overview
         </Tabs.Tab>
         <Tabs.Tab
-          className="flex h-[calc(2rem+1px)] items-center justify-center border-0 px-2 text-sm font-normal break-keep whitespace-nowrap text-gray-600 outline-0 select-none hover:text-gray-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-active:text-gray-950 dark:text-gray-300 dark:hover:text-white dark:data-active:text-white"
+          className="flex h-[calc(2rem+1px)] items-center justify-center border-0 px-2 text-sm font-normal break-keep whitespace-nowrap text-neutral-600 outline-0 select-none hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-active:text-neutral-950 dark:text-neutral-300 dark:hover:text-white dark:data-active:text-white"
           value="projects"
         >
           Projects
         </Tabs.Tab>
         <Tabs.Tab
-          className="flex h-[calc(2rem+1px)] items-center justify-center border-0 px-2 text-sm font-normal break-keep whitespace-nowrap text-gray-600 outline-0 select-none hover:text-gray-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-active:text-gray-950 dark:text-gray-300 dark:hover:text-white dark:data-active:text-white"
+          className="flex h-[calc(2rem+1px)] items-center justify-center border-0 px-2 text-sm font-normal break-keep whitespace-nowrap text-neutral-600 outline-0 select-none hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-active:text-neutral-950 dark:text-neutral-300 dark:hover:text-white dark:data-active:text-white"
           value="account"
         >
           Account
         </Tabs.Tab>
-        <Tabs.Indicator className="absolute top-0 left-0 -z-1 h-full w-(--active-tab-width) translate-x-(--active-tab-left) border-x border-t border-gray-950 bg-white transition-[translate,width] duration-150 ease-in-out dark:border-white dark:bg-gray-950" />
+        <Tabs.Indicator className="absolute top-0 left-0 -z-1 h-full w-(--active-tab-width) translate-x-(--active-tab-left) border-x border-t border-neutral-950 bg-white transition-[translate,width] duration-150 ease-in-out dark:border-white dark:bg-neutral-950" />
       </Tabs.List>
       <Tabs.Panel
-        className="relative flex h-32 items-center justify-center border border-gray-950 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-950 [&[hidden]]:hidden"
+        className="relative flex h-32 items-center justify-center border border-neutral-950 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 [&[hidden]]:hidden"
         value="overview"
       >
-        <OverviewIcon className="size-10 text-gray-400 dark:text-gray-500" />
+        <OverviewIcon className="size-10 text-neutral-400 dark:text-neutral-500" />
       </Tabs.Panel>
       <Tabs.Panel
-        className="relative flex h-32 items-center justify-center border border-gray-950 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-950 [&[hidden]]:hidden"
+        className="relative flex h-32 items-center justify-center border border-neutral-950 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 [&[hidden]]:hidden"
         value="projects"
       >
-        <ProjectIcon className="size-10 text-gray-400 dark:text-gray-500" />
+        <ProjectIcon className="size-10 text-neutral-400 dark:text-neutral-500" />
       </Tabs.Panel>
       <Tabs.Panel
-        className="relative flex h-32 items-center justify-center border border-gray-950 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-gray-950 [&[hidden]]:hidden"
+        className="relative flex h-32 items-center justify-center border border-neutral-950 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 [&[hidden]]:hidden"
         value="account"
       >
-        <PersonIcon className="size-10 text-gray-400 dark:text-gray-500" />
+        <PersonIcon className="size-10 text-neutral-400 dark:text-neutral-500" />
       </Tabs.Panel>
     </Tabs.Root>
   );
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
index c564d02ea94..526427356d8 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
@@ -14,9 +14,9 @@
   flex-direction: column;
   width: max-content;
   padding: 0.25rem 0.5rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
@@ -71,9 +71,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   padding: 0.75rem;
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: bottom center;
@@ -183,10 +183,10 @@
   justify-content: center;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -194,17 +194,17 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -220,9 +220,9 @@
   display: flex;
   flex-direction: column;
   padding: 0.25rem 0.5rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
@@ -279,8 +279,8 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    border: 1px solid light-dark(var(--color-gray-950), white);
-    background-color: light-dark(white, var(--color-gray-950));
+    border: 1px solid light-dark(var(--color-neutral-950), white);
+    background-color: light-dark(white, var(--color-neutral-950));
     transform: translate(-50%, 50%) rotate(45deg);
   }
 }
@@ -299,24 +299,24 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &:focus-visible {
@@ -339,26 +339,26 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index a8994427774..2b9ffd4d9c3 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -35,7 +35,7 @@ function StackedToastButton() {
   return (
     <button
       type="button"
-      className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 select-none hover:bg-gray-100 active:bg-gray-200 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-800 dark:active:bg-gray-700 disabled:border-gray-500 disabled:text-gray-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+      className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       onClick={createToast}
     >
       Stacked toast
@@ -68,7 +68,7 @@ function CopyButton() {
       <Tooltip.Trigger
         ref={buttonRef}
         closeOnClick={false}
-        className="flex h-8 w-8 items-center justify-center rounded-none border border-gray-950 bg-white text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 w-8 items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         onClick={handleCopy}
         aria-label="Copy to clipboard"
         render={<Button disabled={copied} focusableWhenDisabled />}
@@ -77,8 +77,8 @@ function CopyButton() {
       </Tooltip.Trigger>
       <Tooltip.Portal>
         <Tooltip.Positioner sideOffset={8}>
-          <Tooltip.Popup className="flex origin-[var(--transform-origin)] flex-col border border-gray-950 bg-white px-2 py-1 text-sm text-gray-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-instant:duration-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]">
-            <Tooltip.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-gray-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-gray-950" />
+          <Tooltip.Popup className="flex origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-instant:duration-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+            <Tooltip.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
             Copy
           </Tooltip.Popup>
         </Tooltip.Positioner>
@@ -100,9 +100,9 @@ function AnchoredToasts() {
           >
             <Toast.Root
               toast={toast}
-              className="flex w-max origin-[var(--transform-origin)] flex-col border border-gray-950 bg-white px-2 py-1 text-sm text-gray-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+              className="flex w-max origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
             >
-              <Toast.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-gray-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-gray-950" />
+              <Toast.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
               <Toast.Content>
                 <Toast.Description />
               </Toast.Content>
@@ -123,14 +123,14 @@ function StackedToasts() {
           <Toast.Root
             key={toast.id}
             toast={toast}
-            className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-gray-950 bg-white p-3 text-gray-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] select-none dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none] after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+            className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none] after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
           >
             <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-[behind]:opacity-0 data-[expanded]:opacity-100">
               <div className="min-w-0 flex-1">
                 <Toast.Title className="text-sm font-bold" />
                 <Toast.Description className="text-sm" />
               </div>
-              <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Dismiss
               </Toast.Close>
             </Toast.Content>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
index 5f03657f4c1..8f7b36ec129 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
@@ -30,9 +30,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   padding: 0.75rem;
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: bottom center;
@@ -142,10 +142,10 @@
   justify-content: center;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -153,17 +153,17 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -180,24 +180,24 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
index 85ceb584376..63a5011da9a 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
@@ -30,9 +30,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   padding: 0.75rem;
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: bottom center;
@@ -154,10 +154,10 @@
   justify-content: center;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -165,17 +165,17 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -192,24 +192,24 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
index 5f03657f4c1..8f7b36ec129 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
@@ -30,9 +30,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   padding: 0.75rem;
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: bottom center;
@@ -142,10 +142,10 @@
   justify-content: center;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -153,17 +153,17 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -180,24 +180,24 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
index a5674a73b4a..84d6f456e89 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
@@ -30,7 +30,7 @@ function ToastButton() {
   return (
     <button
       type="button"
-      className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 select-none hover:bg-gray-100 active:bg-gray-200 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-800 dark:active:bg-gray-700 disabled:border-gray-500 disabled:text-gray-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+      className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       onClick={createToast}
     >
       Create toast
@@ -44,14 +44,14 @@ function ToastList() {
     <Toast.Root
       key={toast.id}
       toast={toast}
-      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-gray-950 bg-white p-3 text-gray-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] select-none dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none] after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none] after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
     >
       <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-[behind]:opacity-0 data-[expanded]:opacity-100">
         <div className="min-w-0 flex-1">
           <Toast.Title className="text-sm font-bold" />
           <Toast.Description className="text-sm" />
         </div>
-        <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           Dismiss
         </Toast.Close>
       </Toast.Content>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
index d2d06fa1274..5f28661f27a 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
@@ -23,9 +23,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   padding: 0.75rem;
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: top center;
@@ -137,10 +137,10 @@
   justify-content: center;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -148,17 +148,17 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -175,24 +175,24 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
index af24a438ee9..6b1619761d1 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
@@ -30,7 +30,7 @@ function ToastButton() {
   return (
     <button
       type="button"
-      className="flex h-8 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 select-none hover:bg-gray-100 active:bg-gray-200 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-800 dark:active:bg-gray-700 disabled:border-gray-500 disabled:text-gray-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+      className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       onClick={createToast}
     >
       Create toast
@@ -45,14 +45,14 @@ function ToastList() {
       key={toast.id}
       toast={toast}
       swipeDirection="up"
-      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)+(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))] absolute top-0 right-0 left-0 z-[calc(1000-var(--toast-index))] mx-auto w-full origin-top [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))_scale(var(--scale))] border border-gray-950 bg-white p-3 text-gray-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] select-none dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none] after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(-150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)+(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))] absolute top-0 right-0 left-0 z-[calc(1000-var(--toast-index))] mx-auto w-full origin-top [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none] after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(-150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
     >
       <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-[behind]:opacity-0 data-[expanded]:opacity-100">
         <div className="min-w-0 flex-1">
           <Toast.Title className="text-sm font-bold" />
           <Toast.Description className="text-sm" />
         </div>
-        <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-gray-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-gray-950 hover:not-data-disabled:bg-gray-100 active:not-data-disabled:bg-gray-200 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:bg-gray-700 data-disabled:border-gray-500 data-disabled:text-gray-500 disabled:border-gray-500 disabled:text-gray-500 dark:data-disabled:border-gray-400 dark:data-disabled:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           Dismiss
         </Toast.Close>
       </Toast.Content>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
index 3e492d56040..175971c1b14 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
@@ -30,9 +30,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   padding: 0.75rem;
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: bottom center;
@@ -150,10 +150,10 @@
   justify-content: center;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -161,17 +161,17 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -188,24 +188,24 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
index 824ca94ac27..6741f6febdd 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
@@ -30,9 +30,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   padding: 0.75rem;
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: bottom center;
@@ -145,10 +145,10 @@
   justify-content: center;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -156,17 +156,17 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -183,24 +183,24 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
index 1eb1139b9d0..e8f1c88973e 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
@@ -30,9 +30,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   padding: 0.75rem;
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: bottom center;
@@ -142,10 +142,10 @@
   justify-content: center;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -153,17 +153,17 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -180,24 +180,24 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
index d1709dd9cd0..90b13e6244b 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
@@ -2,7 +2,7 @@
   display: flex;
   gap: 1px;
   padding: 1px;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
 }
 
 .Button {
@@ -17,28 +17,28 @@
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled], [data-pressed]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-pressed] {
-    background-color: light-dark(var(--color-gray-950), white);
-    color: light-dark(white, var(--color-gray-950));
+    background-color: light-dark(var(--color-neutral-950), white);
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   @media (hover: hover) {
     &[data-pressed]:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-950), white);
-      color: light-dark(white, var(--color-gray-950));
+      background-color: light-dark(var(--color-neutral-950), white);
+      color: light-dark(white, var(--color-neutral-950));
     }
   }
 
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
index d7c02b733d3..5358e51847f 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
@@ -6,26 +6,26 @@ export default function ExampleToggleGroup() {
   return (
     <ToggleGroup
       defaultValue={['left']}
-      className="flex gap-px p-px border border-gray-950 dark:border-white"
+      className="flex gap-px p-px border border-neutral-950 dark:border-white"
     >
       <Toggle
         aria-label="Align left"
         value="left"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:not-data-pressed:bg-gray-200 dark:active:not-data-disabled:not-data-pressed:bg-gray-700 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950 data-pressed:hover:not-data-disabled:bg-gray-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-gray-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         <AlignLeftIcon className="size-4" />
       </Toggle>
       <Toggle
         aria-label="Align center"
         value="center"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:not-data-pressed:bg-gray-200 dark:active:not-data-disabled:not-data-pressed:bg-gray-700 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950 data-pressed:hover:not-data-disabled:bg-gray-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-gray-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         <AlignCenterIcon className="size-4" />
       </Toggle>
       <Toggle
         aria-label="Align right"
         value="right"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 active:not-data-disabled:not-data-pressed:bg-gray-200 dark:active:not-data-disabled:not-data-pressed:bg-gray-700 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950 data-pressed:hover:not-data-disabled:bg-gray-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-gray-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         <AlignRightIcon className="size-4" />
       </Toggle>
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
index d1709dd9cd0..90b13e6244b 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
@@ -2,7 +2,7 @@
   display: flex;
   gap: 1px;
   padding: 1px;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
 }
 
 .Button {
@@ -17,28 +17,28 @@
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled], [data-pressed]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-pressed] {
-    background-color: light-dark(var(--color-gray-950), white);
-    color: light-dark(white, var(--color-gray-950));
+    background-color: light-dark(var(--color-neutral-950), white);
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   @media (hover: hover) {
     &[data-pressed]:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-950), white);
-      color: light-dark(white, var(--color-gray-950));
+      background-color: light-dark(var(--color-neutral-950), white);
+      color: light-dark(white, var(--color-neutral-950));
     }
   }
 
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
index fe5cd00e160..8d9aa53f54f 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
@@ -7,26 +7,26 @@ export default function ExampleToggleGroupMultiple() {
       multiple
       defaultValue={['bold', 'italic']}
       aria-label="Text formatting options"
-      className="flex gap-px p-px border border-gray-950 dark:border-white"
+      className="flex gap-px p-px border border-neutral-950 dark:border-white"
     >
       <Toggle
         aria-label="Bold"
         value="bold"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950 data-pressed:hover:bg-gray-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-gray-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         <BoldIcon />
       </Toggle>
       <Toggle
         aria-label="Italic"
         value="italic"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950 data-pressed:hover:bg-gray-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-gray-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         <ItalicIcon />
       </Toggle>
       <Toggle
         aria-label="Underline"
         value="underline"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:bg-gray-100 dark:hover:bg-gray-800 data-pressed:bg-gray-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-gray-950 data-pressed:hover:bg-gray-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-gray-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         <UnderlineIcon />
       </Toggle>
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
index a427e244f9e..6e12b5cf8f9 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
@@ -10,21 +10,21 @@
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-pressed] {
-    color: light-dark(var(--color-gray-950), white);
+    color: light-dark(var(--color-neutral-950), white);
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
index 4062940428d..e7bebb2dd93 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleToggle() {
   return (
     <Toggle
       aria-label="Favorite"
-      className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-gray-950 dark:text-white select-none hover:not-data-disabled:bg-gray-50 dark:hover:not-data-disabled:bg-gray-900 active:not-data-disabled:bg-gray-100 dark:active:not-data-disabled:bg-gray-800 data-pressed:text-gray-950 dark:data-pressed:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+      className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-50 dark:hover:not-data-disabled:bg-neutral-900 active:not-data-disabled:bg-neutral-100 dark:active:not-data-disabled:bg-neutral-800 data-pressed:text-neutral-950 dark:data-pressed:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       render={(props, state) => {
         if (state.pressed) {
           return (
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
index c8dad789270..eb3e3232e92 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
@@ -3,8 +3,8 @@
   display: flex;
   align-items: center;
   gap: 1px;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   padding: 1px;
   width: 37.5rem;
 }
@@ -24,7 +24,7 @@
   margin: 0;
   border: 0;
   background-color: transparent;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
   font-family: inherit;
   font-size: 0.875rem;
@@ -33,28 +33,28 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled], [data-pressed]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-pressed] {
-    background-color: light-dark(var(--color-gray-950), white);
-    color: light-dark(white, var(--color-gray-950));
+    background-color: light-dark(var(--color-neutral-950), white);
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   @media (hover: hover) {
     &[data-pressed]:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-950), white);
-      color: light-dark(white, var(--color-gray-950));
+      background-color: light-dark(var(--color-neutral-950), white);
+      color: light-dark(white, var(--color-neutral-950));
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &[aria-pressed] {
@@ -78,11 +78,11 @@
   width: 1px;
   height: 16px;
   margin: 0.25rem;
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
 }
 
 .Link {
-  color: light-dark(var(--color-gray-500), var(--color-gray-400));
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -116,10 +116,10 @@
 .Popup {
   box-sizing: border-box;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   background-clip: padding-box;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
@@ -171,8 +171,8 @@
   }
 
   &[data-highlighted] {
-    background-color: light-dark(var(--color-gray-950), white);
-    color: light-dark(white, var(--color-gray-950));
+    background-color: light-dark(var(--color-neutral-950), white);
+    color: light-dark(white, var(--color-neutral-950));
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
index 5d0579587d3..ea3e2dc9772 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
@@ -6,13 +6,13 @@ import { Select } from '@base-ui/react/select';
 
 export default function ExampleToolbar() {
   return (
-    <Toolbar.Root className="flex w-150 items-center gap-px border border-gray-950 bg-white p-px dark:border-white dark:bg-gray-950">
+    <Toolbar.Root className="flex w-150 items-center gap-px border border-neutral-950 bg-white p-px dark:border-white dark:bg-neutral-950">
       <ToggleGroup className="flex" aria-label="Alignment">
         <Toolbar.Button
           render={<Toggle />}
           aria-label="Align left"
           value="align-left"
-          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:not-data-pressed:bg-gray-200 data-pressed:bg-gray-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-gray-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-gray-100 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:not-data-pressed:bg-gray-700 dark:data-pressed:bg-white dark:data-pressed:text-gray-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-gray-950 dark:data-[popup-open]:bg-gray-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-[popup-open]:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         >
           Align Left
         </Toolbar.Button>
@@ -20,31 +20,31 @@ export default function ExampleToolbar() {
           render={<Toggle />}
           aria-label="Align right"
           value="align-right"
-          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:not-data-pressed:bg-gray-200 data-pressed:bg-gray-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-gray-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-gray-100 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:not-data-pressed:bg-gray-700 dark:data-pressed:bg-white dark:data-pressed:text-gray-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-gray-950 dark:data-[popup-open]:bg-gray-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-[popup-open]:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         >
           Align Right
         </Toolbar.Button>
       </ToggleGroup>
-      <Toolbar.Separator className="m-1 h-4 w-px bg-gray-950 dark:bg-white" />
+      <Toolbar.Separator className="m-1 h-4 w-px bg-neutral-950 dark:bg-white" />
       <Toolbar.Group className="flex" aria-label="Numerical format">
         <Toolbar.Button
-          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:not-data-pressed:bg-gray-200 data-pressed:bg-gray-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-gray-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-gray-100 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:not-data-pressed:bg-gray-700 dark:data-pressed:bg-white dark:data-pressed:text-gray-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-gray-950 dark:data-[popup-open]:bg-gray-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent font-[inherit] text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-[popup-open]:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           aria-label="Format as currency"
         >
           $
         </Toolbar.Button>
         <Toolbar.Button
-          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:not-data-pressed:bg-gray-200 data-pressed:bg-gray-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-gray-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-gray-100 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:not-data-pressed:bg-gray-700 dark:data-pressed:bg-white dark:data-pressed:text-gray-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-gray-950 dark:data-[popup-open]:bg-gray-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent font-[inherit] text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-[popup-open]:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           aria-label="Format as percent"
         >
           %
         </Toolbar.Button>
       </Toolbar.Group>
-      <Toolbar.Separator className="m-1 h-4 w-px bg-gray-950 dark:bg-white" />
+      <Toolbar.Separator className="m-1 h-4 w-px bg-neutral-950 dark:bg-white" />
       <Select.Root defaultValue="Helvetica">
         <Toolbar.Button
           render={<Select.Trigger />}
-          className="flex h-8 min-w-32 cursor-default items-center justify-between border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-gray-950 select-none hover:not-data-disabled:bg-gray-100 active:not-data-disabled:not-data-pressed:bg-gray-200 data-pressed:bg-gray-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-gray-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-gray-100 dark:text-white dark:hover:not-data-disabled:bg-gray-800 dark:active:not-data-disabled:not-data-pressed:bg-gray-700 dark:data-pressed:bg-white dark:data-pressed:text-gray-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-gray-950 dark:data-[popup-open]:bg-gray-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-32 cursor-default items-center justify-between border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-[popup-open]:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         >
           <Select.Value />
           <Select.Icon className="flex">
@@ -53,10 +53,10 @@ export default function ExampleToolbar() {
         </Toolbar.Button>
         <Select.Portal>
           <Select.Positioner className="z-10 outline-none select-none" sideOffset={8}>
-            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto border border-gray-950 bg-white bg-clip-padding text-gray-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:translate-y-px data-[side=none]:scale-100 data-[side=none]:opacity-100 data-[side=none]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[side=none]:data-[starting-style]:scale-100 data-[side=none]:data-[starting-style]:opacity-100 dark:border-white dark:bg-gray-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto border border-neutral-950 bg-white bg-clip-padding text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:translate-y-px data-[side=none]:scale-100 data-[side=none]:opacity-100 data-[side=none]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[side=none]:data-[starting-style]:scale-100 data-[side=none]:data-[starting-style]:opacity-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.Item
                 value="Helvetica"
-                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-none select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-gray-950 data-[highlighted]:text-white pointer-coarse:py-2.5 dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-gray-950"
+                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-none select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-neutral-950 data-[highlighted]:text-white pointer-coarse:py-2.5 dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-neutral-950"
               >
                 <Select.ItemIndicator className="col-start-1">
                   <CheckIcon className="block size-3" />
@@ -65,7 +65,7 @@ export default function ExampleToolbar() {
               </Select.Item>
               <Select.Item
                 value="Arial"
-                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-none select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-gray-950 data-[highlighted]:text-white pointer-coarse:py-2.5 dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-gray-950"
+                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-none select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-neutral-950 data-[highlighted]:text-white pointer-coarse:py-2.5 dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-neutral-950"
               >
                 <Select.ItemIndicator className="col-start-1">
                   <CheckIcon className="block size-3" />
@@ -76,9 +76,9 @@ export default function ExampleToolbar() {
           </Select.Positioner>
         </Select.Portal>
       </Select.Root>
-      <Toolbar.Separator className="m-1 h-4 w-px bg-gray-950 dark:bg-white" />
+      <Toolbar.Separator className="m-1 h-4 w-px bg-neutral-950 dark:bg-white" />
       <Toolbar.Link
-        className="mr-[0.875rem] ml-auto flex-none self-center font-[inherit] text-sm leading-5 text-gray-500 no-underline hover:text-blue-700 dark:text-gray-400 dark:hover:text-blue-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="mr-[0.875rem] ml-auto flex-none self-center font-[inherit] text-sm leading-5 text-neutral-500 no-underline hover:text-blue-700 dark:text-neutral-400 dark:hover:text-blue-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         href="#"
       >
         Edited 51m ago
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
index d2963585db5..ddb5633f99e 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -6,16 +6,16 @@ import { InfoIcon } from '../../icons-tw';
 const demoTooltip = Tooltip.createHandle();
 
 const iconButtonClass =
-  'flex size-8 items-center justify-center border border-gray-950 bg-white text-gray-950 select-none data-popup-open:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-gray-50 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:data-popup-open:bg-gray-800 dark:hover:bg-gray-900 dark:active:bg-gray-800';
+  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const buttonClass =
-  'flex h-8 items-center justify-center border border-gray-950 bg-white px-3 text-sm leading-5 font-normal text-gray-950 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-gray-50 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:hover:bg-gray-900 dark:active:bg-gray-800';
+  'flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
-  'relative border border-gray-950 bg-white px-2 py-1 text-sm text-gray-950 origin-[var(--transform-origin)] [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]';
+  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
 
 const arrowClass =
-  "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
+  "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
 
 export default function TooltipDetachedTriggersControlledDemo() {
   const [open, setOpen] = React.useState(false);
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
index 8bacae0ed87..45bbb8c8119 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
@@ -15,23 +15,23 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &:not(:first-child) {
@@ -39,8 +39,8 @@
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -76,9 +76,9 @@
   width: var(--popup-width, auto);
   max-width: 500px;
   transform-origin: var(--transform-origin);
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
 
   font-size: 0.875rem;
@@ -145,8 +145,8 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-gray-950));
-    border: 1px solid light-dark(var(--color-gray-950), white);
+    background-color: light-dark(white, var(--color-neutral-950));
+    border: 1px solid light-dark(var(--color-neutral-950), white);
     transform: translate(-50%, 50%) rotate(45deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
index 16aefc4316a..8604f85089b 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
@@ -6,10 +6,10 @@ import { InfoIcon, HelpIcon, AlertIcon } from '../../icons-tw';
 const demoTooltip = Tooltip.createHandle<React.ComponentType>();
 
 const triggerClass =
-  'box-border flex size-8 items-center justify-center border border-gray-950 bg-white text-sm font-normal text-gray-950 select-none data-popup-open:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-gray-50 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:data-popup-open:bg-gray-800 dark:hover:bg-gray-900 dark:active:bg-gray-800';
+  'box-border flex size-8 items-center justify-center border border-neutral-950 bg-white text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const arrowClass =
-  "relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[instant]:transition-none data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
+  "relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[instant]:transition-none data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
 
 export default function TooltipDetachedTriggersFullDemo() {
   return (
@@ -54,9 +54,9 @@ export default function TooltipDetachedTriggersFullDemo() {
                   relative
                   h-[var(--popup-height,auto)] w-[var(--popup-width,auto)]
                   max-w-[500px]
-                  border border-gray-950 dark:border-white
-                  bg-white dark:bg-gray-950
-                  text-sm text-gray-950 dark:text-white
+                  border border-neutral-950 dark:border-white
+                  bg-white dark:bg-neutral-950
+                  text-sm text-neutral-950 dark:text-white
                   origin-[var(--transform-origin)]
                   [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none]
                   transition-[width,height,opacity,scale]
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
index 88d722903af..89571e613c6 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
@@ -6,13 +6,13 @@ import { InfoIcon } from '../../icons-tw';
 const demoTooltip = Tooltip.createHandle();
 
 const triggerClass =
-  'flex size-8 items-center justify-center border border-gray-950 bg-white text-gray-950 select-none data-popup-open:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-gray-50 active:bg-gray-100 dark:border-white dark:bg-gray-950 dark:text-white dark:data-popup-open:bg-gray-800 dark:hover:bg-gray-900 dark:active:bg-gray-800';
+  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
-  'relative border border-gray-950 bg-white px-2 py-1 text-sm text-gray-950 origin-[var(--transform-origin)] [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]';
+  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
 
 const arrowClass =
-  "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
+  "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
 
 export default function TooltipDetachedTriggersSimpleDemo() {
   return (
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
index cf7c972fc76..c2647a21fea 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
@@ -1,7 +1,7 @@
 .Panel {
   display: flex;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
 }
 
 .Button {
@@ -15,21 +15,21 @@
   margin: 0;
   border: 0;
   background-color: transparent;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &:focus-visible {
@@ -52,9 +52,9 @@
   flex-direction: column;
   padding: 0.25rem 0.5rem;
   position: relative;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
@@ -112,8 +112,8 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-gray-950));
-    border: 1px solid light-dark(var(--color-gray-950), white);
+    background-color: light-dark(white, var(--color-neutral-950));
+    border: 1px solid light-dark(var(--color-neutral-950), white);
     transform: translate(-50%, 50%) rotate(45deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
index 3eb9a38e950..1fcd7c970a6 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
@@ -2,18 +2,18 @@ import * as React from 'react';
 import { Tooltip } from '@base-ui/react/tooltip';
 
 const triggerClass =
-  'flex size-8 items-center justify-center border-0 bg-transparent text-gray-950 select-none data-popup-open:bg-gray-100 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-gray-50 active:bg-gray-100 dark:text-white dark:data-popup-open:bg-gray-800 dark:hover:bg-gray-900 dark:active:bg-gray-800';
+  'flex size-8 items-center justify-center border-0 bg-transparent text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
-  'relative flex flex-col border border-gray-950 bg-white px-2 py-1 text-sm text-gray-950 origin-[var(--transform-origin)] [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-gray-950 dark:text-white dark:[filter:none]';
+  'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
 
 const arrowClass =
-  "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-gray-950 before:border before:border-gray-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
+  "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
 
 export default function ExampleTooltip() {
   return (
     <Tooltip.Provider>
-      <div className="flex border border-gray-950 bg-white dark:border-white dark:bg-gray-950">
+      <div className="flex border border-neutral-950 bg-white dark:border-white dark:bg-neutral-950">
         <Tooltip.Root>
           <Tooltip.Trigger className={triggerClass}>
             <BoldIcon aria-label="Bold" className="size-4" />
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
index 402460bf020..2a651af7d94 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
@@ -18,23 +18,23 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &:not(:first-child) {
@@ -42,8 +42,8 @@
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
@@ -69,9 +69,9 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   padding: 0.25rem 0.5rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
-  color: light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
   transform-origin: var(--transform-origin);
   transition:
@@ -129,8 +129,8 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-gray-950));
-    border: 1px solid light-dark(var(--color-gray-950), white);
+    background-color: light-dark(white, var(--color-neutral-950));
+    border: 1px solid light-dark(var(--color-neutral-950), white);
     transform: translate(-50%, 50%) rotate(45deg);
   }
 }
@@ -143,28 +143,28 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-gray-500), var(--color-gray-400));
-    border-color: light-dark(var(--color-gray-500), var(--color-gray-400));
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css
index f7107531578..cd0966e32d6 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css
@@ -7,28 +7,28 @@
   padding: 0 0.875rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  background-color: var(--color-neutral-50);
   font-family: inherit;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: var(--color-neutral-100);
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 
   &:focus-visible {
@@ -48,7 +48,7 @@
   padding: 1rem 1.5rem;
   border-radius: 0.5rem;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   transform-origin: var(--transform-origin);
 
   width: var(--popup-width, auto);
@@ -56,14 +56,14 @@
   max-width: 500px;
 
   @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
+    outline: 1px solid var(--color-neutral-200);
     box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-neutral-200),
+      0 4px 6px -4px var(--color-neutral-200);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
     outline-offset: -1px;
   }
 }
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css
index f7107531578..cd0966e32d6 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css
@@ -7,28 +7,28 @@
   padding: 0 0.875rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
-  background-color: var(--color-gray-50);
+  background-color: var(--color-neutral-50);
   font-family: inherit;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: var(--color-neutral-100);
     }
   }
 
   &:active {
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 
   &:focus-visible {
@@ -48,7 +48,7 @@
   padding: 1rem 1.5rem;
   border-radius: 0.5rem;
   background-color: canvas;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   transform-origin: var(--transform-origin);
 
   width: var(--popup-width, auto);
@@ -56,14 +56,14 @@
   max-width: 500px;
 
   @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
+    outline: 1px solid var(--color-neutral-200);
     box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-neutral-200),
+      0 4px 6px -4px var(--color-neutral-200);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
     outline-offset: -1px;
   }
 }
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
index ff21f111742..25e438ed52c 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
@@ -9,25 +9,25 @@
   padding-right: 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: 0.375rem;
   background-color: canvas;
   font-family: inherit;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   -webkit-user-select: none;
   user-select: none;
   min-width: 9rem;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-gray-100);
+      background-color: var(--color-neutral-100);
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 
   &:focus-visible {
@@ -52,7 +52,7 @@
   border-radius: 0.375rem;
   background-color: canvas;
   background-clip: padding-box;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
 
@@ -61,14 +61,14 @@
   }
 
   @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-gray-200);
+    outline: 1px solid var(--color-neutral-200);
     box-shadow:
-      0 10px 15px -3px var(--color-gray-200),
-      0 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-neutral-200),
+      0 4px 6px -4px var(--color-neutral-200);
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-gray-300);
+    outline: 1px solid var(--color-neutral-300);
   }
 }
 
@@ -111,13 +111,13 @@
 
 .ArrowOuterStroke {
   @media (prefers-color-scheme: light) {
-    fill: var(--color-gray-200);
+    fill: var(--color-neutral-200);
   }
 }
 
 .ArrowInnerStroke {
   @media (prefers-color-scheme: dark) {
-    fill: var(--color-gray-300);
+    fill: var(--color-neutral-300);
   }
 }
 
@@ -150,7 +150,7 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-gray-50);
+    color: var(--color-neutral-50);
   }
 
   &[data-highlighted]::before {
@@ -160,7 +160,7 @@
     inset-block: 0;
     inset-inline: 0.25rem;
     border-radius: 0.25rem;
-    background-color: var(--color-gray-900);
+    background-color: var(--color-neutral-900);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
index 15a117e0ee7..10b95e0b097 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
@@ -14,7 +14,7 @@ export const Input = React.forwardRef<HTMLInputElement, Autocomplete.Input.Props
     <Autocomplete.Input
       ref={forwardedRef}
       className={clsx(
-        'bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal 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',
+        'bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-neutral-200 pl-3.5 text-base text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800',
         className,
       )}
       {...props}
@@ -40,7 +40,7 @@ export function Popup({ className, ...props }: Autocomplete.Popup.Props) {
   return (
     <Autocomplete.Popup
       className={clsx(
-        'w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-[canvas] py-2 text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300',
+        'w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-[canvas] py-2 text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300',
         className,
       )}
       {...props}
@@ -56,7 +56,7 @@ export function Item({ className, ...props }: Autocomplete.Item.Props) {
   return (
     <Autocomplete.Item
       className={clsx(
-        'flex flex-col gap-0.25 cursor-default py-2 pr-8 pl-4 text-base 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-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded data-[highlighted]:before:bg-gray-900',
+        'flex flex-col gap-0.25 cursor-default py-2 pr-8 pl-4 text-base leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded data-[highlighted]:before:bg-neutral-900',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx
index 86fe30cb09a..0487c3e4902 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx
@@ -7,7 +7,7 @@ export function Button({ className, ...props }: React.ComponentPropsWithoutRef<'
     <BaseButton
       type="button"
       className={clsx(
-        'flex items-center justify-center h-10 px-3.5 m-0 outline-0 border border-gray-200 rounded-md bg-gray-50 font-inherit text-base font-normal leading-6 text-gray-900 select-none hover:data-[disabled]:bg-gray-50 hover:bg-gray-100 active:data-[disabled]:bg-gray-50 active:bg-gray-200 active:shadow-[inset_0_1px_3px_rgba(0,0,0,0.1)] active:border-t-gray-300 active:data-[disabled]:shadow-none active:data-[disabled]:border-t-gray-200 focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1 data-[disabled]:text-gray-500',
+        'flex items-center justify-center h-10 px-3.5 m-0 outline-0 border border-neutral-200 rounded-md bg-neutral-50 font-inherit text-base font-normal leading-6 text-neutral-900 select-none hover:data-[disabled]:bg-neutral-50 hover:bg-neutral-100 active:data-[disabled]:bg-neutral-50 active:bg-neutral-200 active:shadow-[inset_0_1px_3px_rgba(0,0,0,0.1)] active:border-t-neutral-300 active:data-[disabled]:shadow-none active:data-[disabled]:border-t-neutral-200 focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1 data-[disabled]:text-neutral-500',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox-group.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox-group.tsx
index cc75c355e51..92bb626468f 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox-group.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox-group.tsx
@@ -5,7 +5,7 @@ import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-grou
 export function CheckboxGroup({ className, ...props }: BaseCheckboxGroup.Props) {
   return (
     <BaseCheckboxGroup
-      className={clsx('flex flex-col items-start gap-1 text-gray-900', className)}
+      className={clsx('flex flex-col items-start gap-1 text-neutral-900', className)}
       {...props}
     />
   );
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox.tsx
index 394fed235cb..2ed5b3a7d2b 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox.tsx
@@ -6,7 +6,7 @@ export function Root({ className, ...props }: Checkbox.Root.Props) {
   return (
     <Checkbox.Root
       className={clsx(
-        'flex size-5 items-center justify-center rounded-sm 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',
+        'flex size-5 items-center justify-center rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-neutral-900 data-[unchecked]:border data-[unchecked]:border-neutral-300',
         className,
       )}
       {...props}
@@ -17,7 +17,7 @@ export function Root({ className, ...props }: Checkbox.Root.Props) {
 export function Indicator({ className, ...props }: Checkbox.Indicator.Props) {
   return (
     <Checkbox.Indicator
-      className={clsx('flex text-gray-50 data-[unchecked]:hidden', className)}
+      className={clsx('flex text-neutral-50 data-[unchecked]:hidden', className)}
       {...props}
     />
   );
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
index 7c52dac2d75..958d600f22e 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
@@ -15,7 +15,7 @@ export const Input = React.forwardRef<HTMLInputElement, Combobox.Input.Props>(fu
     <Combobox.Input
       ref={forwardedRef}
       className={clsx(
-        'h-10 w-64 rounded-md font-normal border border-gray-200 pl-3.5 text-base text-gray-900 bg-[canvas] focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800',
+        'h-10 w-64 rounded-md font-normal border border-neutral-200 pl-3.5 text-base text-neutral-900 bg-[canvas] focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800',
         className,
       )}
       {...props}
@@ -63,7 +63,7 @@ export function Popup({ className, ...props }: Combobox.Popup.Props) {
   return (
     <Combobox.Popup
       className={clsx(
-        'w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] rounded-md bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300 duration-100',
+        'w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] rounded-md bg-[canvas] text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300 duration-100',
         className,
       )}
       {...props}
@@ -75,7 +75,7 @@ export function Empty({ className, children, ...props }: Combobox.Empty.Props) {
   return (
     <Combobox.Empty {...props}>
       {children ? (
-        <div className={clsx('p-4 text-[0.925rem] leading-4 text-gray-600', className)}>
+        <div className={clsx('p-4 text-[0.925rem] leading-4 text-neutral-600', className)}>
           {children}
         </div>
       ) : null}
@@ -99,7 +99,7 @@ export function Item({ className, ...props }: Combobox.Item.Props) {
   return (
     <Combobox.Item
       className={clsx(
-        'grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base 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-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900',
+        'grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx
index d3a983f16f4..184e99a2e37 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx
@@ -10,7 +10,7 @@ export function Label({ className, ...props }: Field.Label.Props) {
   return (
     <Field.Label
       className={clsx(
-        'text-sm font-bold text-gray-900 has-[[role="checkbox"]]:flex has-[[role="checkbox"]]:items-center has-[[role="checkbox"]]:gap-2 has-[[role="checkbox"]]:font-normal has-[[role="radio"]]:flex has-[[role="radio"]]:items-center has-[[role="radio"]]:gap-2 has-[[role="radio"]]:font-normal has-[[role="switch"]]:flex has-[[role="switch"]]:items-center',
+        'text-sm font-bold text-neutral-900 has-[[role="checkbox"]]:flex has-[[role="checkbox"]]:items-center has-[[role="checkbox"]]:gap-2 has-[[role="checkbox"]]:font-normal has-[[role="radio"]]:flex has-[[role="radio"]]:items-center has-[[role="radio"]]:gap-2 has-[[role="radio"]]:font-normal has-[[role="switch"]]:flex has-[[role="switch"]]:items-center',
         className,
       )}
       {...props}
@@ -19,7 +19,7 @@ export function Label({ className, ...props }: Field.Label.Props) {
 }
 
 export function Description({ className, ...props }: Field.Description.Props) {
-  return <Field.Description className={clsx('text-sm text-gray-600', className)} {...props} />;
+  return <Field.Description className={clsx('text-sm text-neutral-600', className)} {...props} />;
 }
 
 export const Control = React.forwardRef<HTMLInputElement, Field.Control.Props>(
@@ -31,7 +31,7 @@ export const Control = React.forwardRef<HTMLInputElement, Field.Control.Props>(
       <Field.Control
         ref={forwardedRef}
         className={clsx(
-          'h-10 w-full max-w-xs rounded-md bg-[canvas] border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800',
+          'h-10 w-full max-w-xs rounded-md bg-[canvas] border border-neutral-200 pl-3.5 text-base text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800',
           className,
         )}
         {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/fieldset.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/fieldset.tsx
index 373ab9efba5..0ef210fbd12 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/fieldset.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/fieldset.tsx
@@ -8,6 +8,6 @@ export function Root(props: Fieldset.Root.Props) {
 
 export function Legend({ className, ...props }: Fieldset.Legend.Props) {
   return (
-    <Fieldset.Legend className={clsx('text-sm font-bold text-gray-900', className)} {...props} />
+    <Fieldset.Legend className={clsx('text-sm font-bold text-neutral-900', className)} {...props} />
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
index e3afefe904a..d4932a5fbcb 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
@@ -16,7 +16,7 @@ export function Decrement({ className, ...props }: NumberField.Decrement.Props)
   return (
     <NumberField.Decrement
       className={clsx(
-        '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',
+        'flex size-10 items-center justify-center rounded-tl-md rounded-bl-md border border-neutral-200 bg-neutral-50 bg-clip-padding text-neutral-900 select-none hover:bg-neutral-100 active:bg-neutral-100',
         className,
       )}
       {...props}
@@ -32,7 +32,7 @@ export const Input = React.forwardRef<HTMLInputElement, NumberField.Input.Props>
     <NumberField.Input
       ref={forwardedRef}
       className={clsx(
-        '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',
+        'h-10 w-24 border-t border-b border-neutral-200 text-center text-base text-neutral-900 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800',
         className,
       )}
       {...props}
@@ -44,7 +44,7 @@ export function Increment({ className, ...props }: NumberField.Increment.Props)
   return (
     <NumberField.Increment
       className={clsx(
-        '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',
+        'flex size-10 items-center justify-center rounded-tr-md rounded-br-md border border-neutral-200 bg-neutral-50 bg-clip-padding text-neutral-900 select-none hover:bg-neutral-100 active:bg-neutral-100',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/radio-group.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/radio-group.tsx
index 934ebfce616..4d0b731c8e4 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/radio-group.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/radio-group.tsx
@@ -5,7 +5,7 @@ import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
 export function RadioGroup<Value>({ className, ...props }: BaseRadioGroup.Props<Value>) {
   return (
     <BaseRadioGroup
-      className={clsx('w-full flex flex-row items-start gap-1 text-gray-900', className)}
+      className={clsx('w-full flex flex-row items-start gap-1 text-neutral-900', className)}
       {...props}
     />
   );
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/radio.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/radio.tsx
index 74a3483d71b..8384184b935 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/radio.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/radio.tsx
@@ -6,7 +6,7 @@ export function Root({ className, ...props }: Radio.Root.Props) {
   return (
     <Radio.Root
       className={clsx(
-        'flex size-5 items-center justify-center rounded-full 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',
+        'flex size-5 items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-neutral-900 data-[unchecked]:border data-[unchecked]:border-neutral-300',
         className,
       )}
       {...props}
@@ -18,7 +18,7 @@ export function Indicator({ className, ...props }: Radio.Indicator.Props) {
   return (
     <Radio.Indicator
       className={clsx(
-        'flex before:size-2 before:rounded-full before:bg-gray-50 data-[unchecked]:hidden',
+        'flex before:size-2 before:rounded-full before:bg-neutral-50 data-[unchecked]:hidden',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
index eb2fa245e6c..ec69cbc0f27 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
@@ -7,14 +7,16 @@ export function Root(props: Select.Root.Props<any>) {
 }
 
 export function Label({ className, ...props }: Select.Label.Props) {
-  return <Select.Label className={clsx('text-sm font-bold text-gray-900', className)} {...props} />;
+  return (
+    <Select.Label className={clsx('text-sm font-bold text-neutral-900', className)} {...props} />
+  );
 }
 
 export function Trigger({ className, ...props }: Select.Trigger.Props) {
   return (
     <Select.Trigger
       className={clsx(
-        '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 data-[popup-open]:bg-gray-100 cursor-default not-[[data-filled]]:text-gray-500 bg-[canvas]',
+        'flex h-10 min-w-36 items-center justify-between gap-3 rounded-md border border-neutral-200 pr-3 pl-3.5 text-base text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-neutral-100 cursor-default not-[[data-filled]]:text-neutral-500 bg-[canvas]',
         className,
       )}
       {...props}
@@ -48,7 +50,7 @@ export function Popup({ className, ...props }: Select.Popup.Props) {
   return (
     <Select.Popup
       className={clsx(
-        'group origin-[var(--transform-origin)] bg-clip-padding rounded-md bg-[canvas] text-gray-900 shadow-lg shadow-gray-200 outline outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]: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-gray-300',
+        'group origin-[var(--transform-origin)] bg-clip-padding rounded-md bg-[canvas] text-neutral-900 shadow-lg shadow-neutral-200 outline outline-neutral-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]: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-neutral-300',
         className,
       )}
       {...props}
@@ -96,7 +98,7 @@ export function Item({ className, ...props }: Select.Item.Props) {
   return (
     <Select.Item
       className={clsx(
-        'grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-3 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 pointer-coarse:py-2.5 pointer-coarse:text-[0.925rem]',
+        'grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-3 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-neutral-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-neutral-900 pointer-coarse:py-2.5 pointer-coarse:text-[0.925rem]',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/slider.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/slider.tsx
index f093c16e368..2de3f073a6e 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/slider.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/slider.tsx
@@ -8,7 +8,7 @@ export function Root({ className, ...props }: Slider.Root.Props<any>) {
 
 export function Value({ className, ...props }: Slider.Value.Props) {
   return (
-    <Slider.Value className={clsx('text-sm font-normal text-gray-900', className)} {...props} />
+    <Slider.Value className={clsx('text-sm font-normal text-neutral-900', className)} {...props} />
   );
 }
 
@@ -25,7 +25,7 @@ export function Track({ className, ...props }: Slider.Track.Props) {
   return (
     <Slider.Track
       className={clsx(
-        'h-1 w-full rounded bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200 select-none',
+        'h-1 w-full rounded bg-neutral-200 shadow-[inset_0_0_0_1px] shadow-neutral-200 select-none',
         className,
       )}
       {...props}
@@ -35,7 +35,10 @@ export function Track({ className, ...props }: Slider.Track.Props) {
 
 export function Indicator({ className, ...props }: Slider.Indicator.Props) {
   return (
-    <Slider.Indicator className={clsx('rounded bg-gray-700 select-none', className)} {...props} />
+    <Slider.Indicator
+      className={clsx('rounded bg-neutral-700 select-none', className)}
+      {...props}
+    />
   );
 }
 
@@ -43,7 +46,7 @@ export function Thumb({ className, ...props }: Slider.Thumb.Props) {
   return (
     <Slider.Thumb
       className={clsx(
-        'size-4 rounded-full bg-white outline outline-gray-300 select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800',
+        'size-4 rounded-full bg-white outline outline-neutral-300 select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx
index e2092330cf1..41c3cd5259a 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx
@@ -6,7 +6,7 @@ export function Root({ className, ...props }: Switch.Root.Props) {
   return (
     <Switch.Root
       className={clsx(
-        '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-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',
+        'relative flex h-6 w-10 rounded-full bg-gradient-to-r from-neutral-700 from-35% to-neutral-200 to-65% bg-[length:6.5rem_100%] bg-[100%_0%] bg-no-repeat p-px shadow-[inset_0_1.5px_2px] shadow-neutral-200 outline-1 -outline-offset-1 outline-neutral-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-neutral-100 data-[checked]:bg-[0%_0%] data-[checked]:active:bg-neutral-500 dark:from-neutral-500 dark:shadow-black/75 dark:outline-white/15 dark:data-[checked]:shadow-none',
         className,
       )}
       {...props}
@@ -18,7 +18,7 @@ export function Thumb({ className, ...props }: Switch.Thumb.Props) {
   return (
     <Switch.Thumb
       className={clsx(
-        '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',
+        'aspect-square h-full rounded-full bg-white shadow-[0_0_1px_1px,0_1px_1px,1px_2px_4px_-1px] shadow-neutral-100 transition-transform duration-150 data-[checked]:translate-x-4 dark:shadow-black/25',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
index 860bf7df1bc..ff85a6b1103 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
@@ -9,19 +9,19 @@ function Toasts() {
     <Toast.Root
       key={toast.id}
       toast={toast}
-      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] rounded-lg border border-gray-200 bg-gray-50 bg-clip-padding p-4 shadow-lg select-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] rounded-lg border border-neutral-200 bg-neutral-50 bg-clip-padding p-4 shadow-lg select-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
     >
       <Toast.Content className="overflow-hidden transition-opacity [transition-duration:250ms]">
         <Toast.Title className="text-[0.975rem] leading-5 font-bold" />
-        <Toast.Description className="text-[0.925rem] leading-5 text-gray-700" />
+        <Toast.Description className="text-[0.925rem] leading-5 text-neutral-700" />
         <div
-          className="text-xs mt-2 p-3 py-2 bg-gray-100 text-gray-900 rounded-md select-text"
+          className="text-xs mt-2 p-3 py-2 bg-neutral-100 text-neutral-900 rounded-md select-text"
           data-base-ui-swipe-ignore
         >
           <pre className="whitespace-pre-wrap">{JSON.stringify(toast.data, null, 2)}</pre>
         </div>
         <Toast.Close
-          className="absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded border-none bg-transparent text-gray-500 hover:bg-gray-100 hover:text-gray-700"
+          className="absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded border-none bg-transparent text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700"
           aria-label="Close"
         >
           <X className="size-4" />
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
index 5da29bd58cb..4e431e5412c 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
@@ -45,10 +45,10 @@ function ExampleForm() {
 
       <Field.Root name="region">
         <Combobox.Root items={REGIONS} required>
-          <div className="relative flex flex-col gap-1 text-sm leading-5 text-gray-900">
+          <div className="relative flex flex-col gap-1 text-sm leading-5 text-neutral-900">
             <Field.Label>Region</Field.Label>
             <Combobox.Input placeholder="e.g. eu-central-1" />
-            <div className="absolute right-2 bottom-0 flex h-10 items-center justify-center text-gray-600">
+            <div className="absolute right-2 bottom-0 flex h-10 items-center justify-center text-neutral-600">
               <Combobox.Clear />
               <Combobox.Trigger>
                 <ChevronDown className="size-4" />
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
index d66bb31c87f..e4eaab3f203 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
@@ -95,10 +95,10 @@ function ReactHookForm() {
         }) => (
           <Field.Root name={name} invalid={invalid} touched={isTouched} dirty={isDirty}>
             <Combobox.Root items={REGIONS} value={value} onValueChange={onChange}>
-              <div className="relative flex flex-col gap-1 text-sm leading-5 text-gray-900">
+              <div className="relative flex flex-col gap-1 text-sm leading-5 text-neutral-900">
                 <Field.Label>Region</Field.Label>
                 <Combobox.Input placeholder="e.g. eu-central-1" ref={ref} onBlur={onBlur} />
-                <div className="absolute right-2 bottom-0 flex h-10 items-center justify-center text-gray-600">
+                <div className="absolute right-2 bottom-0 flex h-10 items-center justify-center text-neutral-600">
                   <Combobox.Clear />
                   <Combobox.Trigger>
                     <ChevronDown className="size-4" />
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
index 35d28645c00..7ba7b9a2883 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
@@ -130,10 +130,10 @@ function TanstackForm() {
                 value={field.state.value}
                 onValueChange={field.handleChange}
               >
-                <div className="relative flex flex-col gap-1 text-sm leading-5 text-gray-900">
+                <div className="relative flex flex-col gap-1 text-sm leading-5 text-neutral-900">
                   <Field.Label>Region</Field.Label>
                   <Combobox.Input placeholder="e.g. eu-central-1" onBlur={field.handleBlur} />
-                  <div className="absolute right-2 bottom-0 flex h-10 items-center justify-center text-gray-600">
+                  <div className="absolute right-2 bottom-0 flex h-10 items-center justify-center text-neutral-600">
                     <Combobox.Clear />
                     <Combobox.Trigger>
                       <ChevronDown className="size-4" />
diff --git a/docs/src/app/(docs)/react/handbook/styling/page.mdx b/docs/src/app/(docs)/react/handbook/styling/page.mdx
index 26e9ab8fa73..51729b653d3 100644
--- a/docs/src/app/(docs)/react/handbook/styling/page.mdx
+++ b/docs/src/app/(docs)/react/handbook/styling/page.mdx
@@ -71,16 +71,16 @@ import { Menu } from '@base-ui/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-normal 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-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100 data-[popup-open]:bg-neutral-100">
         Song
       </Menu.Trigger>
       <Menu.Portal>
         <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-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">
+          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-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-neutral-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-neutral-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-neutral-900">
               Add to Library
             </Menu.Item>
-            <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">
+            <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-neutral-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-neutral-900">
               Add to Playlist
             </Menu.Item>
           </Menu.Popup>
diff --git a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css
index 02aa04f1d36..02b56d09b77 100644
--- a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css
@@ -11,12 +11,12 @@
 .Track {
   width: 100%;
   height: 0.25rem;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
   user-select: none;
 }
 
 .Indicator {
-  background-color: light-dark(var(--color-gray-950), white);
+  background-color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 }
 
@@ -24,8 +24,8 @@
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border: 1px solid light-dark(var(--color-gray-950), white);
-  background-color: light-dark(white, var(--color-gray-950));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   user-select: none;
 
   &:has(:focus-visible) {
diff --git a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/tailwind/index.tsx
index 097d595bb45..d437946a359 100644
--- a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/tailwind/index.tsx
@@ -7,9 +7,9 @@ export default function ExampleDirectionProvider() {
       <DirectionProvider direction="rtl">
         <Slider.Root defaultValue={25}>
           <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
-            <Slider.Track className="h-1 w-full bg-gray-200 select-none dark:bg-gray-800">
-              <Slider.Indicator className="bg-gray-950 select-none dark:bg-white" />
-              <Slider.Thumb className="box-border size-4 border border-gray-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-gray-950" />
+            <Slider.Track className="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800">
+              <Slider.Indicator className="bg-neutral-950 select-none dark:bg-white" />
+              <Slider.Thumb className="box-border size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950" />
             </Slider.Track>
           </Slider.Control>
         </Slider.Root>
diff --git a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
index de2bddec669..6ec74de4e40 100644
--- a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
@@ -13,7 +13,7 @@
 .Label {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Toggle {
@@ -28,12 +28,12 @@
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
@@ -57,17 +57,17 @@
   padding: 0 0.75rem;
   margin: 0;
   border: none;
-  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
+  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-300), var(--color-gray-700));
+      background-color: light-dark(var(--color-neutral-300), var(--color-neutral-700));
     }
   }
 
diff --git a/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
index bda29f8013a..5ece4a60a9a 100644
--- a/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
@@ -8,24 +8,24 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-gray-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-gray-950));
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-gray-950), white);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-gray-50), var(--color-gray-900));
+      background-color: light-dark(var(--color-neutral-50), var(--color-neutral-900));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/utils/use-render/demos/render/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/use-render/demos/render/css-modules/index.module.css
index 192b221ea0a..4465f17b400 100644
--- a/docs/src/app/(docs)/react/utils/use-render/demos/render/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/use-render/demos/render/css-modules/index.module.css
@@ -1,7 +1,7 @@
 .Text {
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
 
   strong& {
     font-weight: 700;
diff --git a/docs/src/css/index.css b/docs/src/css/index.css
index fbb59d3fb08..3a3ac000ceb 100644
--- a/docs/src/css/index.css
+++ b/docs/src/css/index.css
@@ -62,17 +62,17 @@
   --color-white: white;
   --color-black: black;
 
-  --color-gray-50: oklch(98.5% 0.002 247.839deg);
-  --color-gray-100: oklch(96.7% 0.003 264.542deg);
-  --color-gray-200: oklch(92.8% 0.006 264.531deg);
-  --color-gray-300: oklch(87.2% 0.01 258.338deg);
-  --color-gray-400: oklch(70.7% 0.022 261.325deg);
-  --color-gray-500: oklch(55.1% 0.027 264.364deg);
-  --color-gray-600: oklch(44.6% 0.03 256.802deg);
-  --color-gray-700: oklch(37.3% 0.034 259.733deg);
-  --color-gray-800: oklch(27.8% 0.033 256.848deg);
-  --color-gray-900: oklch(21% 0.034 264.665deg);
-  --color-gray-950: oklch(13% 0.028 261.692deg);
+  --color-neutral-50: oklch(98.5% 0 0deg);
+  --color-neutral-100: oklch(97% 0 0deg);
+  --color-neutral-200: oklch(92.2% 0 0deg);
+  --color-neutral-300: oklch(87% 0 0deg);
+  --color-neutral-400: oklch(70.8% 0 0deg);
+  --color-neutral-500: oklch(55.6% 0 0deg);
+  --color-neutral-600: oklch(43.9% 0 0deg);
+  --color-neutral-700: oklch(37.1% 0 0deg);
+  --color-neutral-800: oklch(26.9% 0 0deg);
+  --color-neutral-900: oklch(20.5% 0 0deg);
+  --color-neutral-950: oklch(14.5% 0 0deg);
 
   --color-blue-400: oklch(70.7% 0.165 254.624deg);
   --color-blue-500: oklch(62.3% 0.214 259.815deg);

From 6845ad3ee16deb5daca812d742d738f9e45c455c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 29 Apr 2026 16:25:20 +0200
Subject: [PATCH 094/257] PreviewCard: remove leftover

---
 .../components/preview-card/demos/hero/css-modules/index.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/hero/css-modules/index.tsx
index 468c6bc2efe..b54f08fe1e2 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/hero/css-modules/index.tsx
@@ -3,7 +3,7 @@ import styles from '../../index.module.css';
 
 export default function ExamplePreviewCard() {
   return (
-    <PreviewCard.Root open>
+    <PreviewCard.Root>
       <p className={styles.Paragraph}>
         The principles of good{' '}
         <PreviewCard.Trigger

From 641c15e8d9ba18a22a76e59c19d2548b08cba180 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 29 Apr 2026 18:27:16 +0200
Subject: [PATCH 095/257] Remove unnecessary leading-* classes

---
 .../accordion/demos/hero/tailwind/index.tsx      | 12 ++++++------
 .../accordion/demos/multiple/tailwind/index.tsx  | 12 ++++++------
 .../autocomplete/demos/async/tailwind/index.tsx  |  2 +-
 .../demos/auto-highlight/tailwind/index.tsx      |  2 +-
 .../demos/fuzzy-matching/tailwind/index.tsx      |  4 ++--
 .../demos/grouped/tailwind/index.tsx             |  2 +-
 .../autocomplete/demos/hero/tailwind/index.tsx   |  2 +-
 .../autocomplete/demos/inline/tailwind/index.tsx |  2 +-
 .../autocomplete/demos/limit/tailwind/index.tsx  |  4 ++--
 .../demos/virtualized/tailwind/index.tsx         |  2 +-
 .../button/demos/hero/tailwind/index.tsx         |  2 +-
 .../button/demos/loading/tailwind/index.tsx      |  2 +-
 .../checkbox-group/demos/hero/tailwind/index.tsx |  8 ++++----
 .../checkbox/demos/hero/tailwind/index.tsx       |  2 +-
 .../collapsible/demos/hero/tailwind/index.tsx    |  4 ++--
 .../demos/async-single/tailwind/index.tsx        |  2 +-
 .../combobox/demos/creatable/tailwind/index.tsx  |  6 +++---
 .../combobox/demos/grouped/tailwind/index.tsx    |  2 +-
 .../combobox/demos/hero/tailwind/index.tsx       |  2 +-
 .../demos/input-inside-popup/tailwind/index.tsx  |  2 +-
 .../combobox/demos/multiple/tailwind/index.tsx   |  2 +-
 .../demos/virtualized/tailwind/index.tsx         |  2 +-
 .../demos/close-confirmation/tailwind/index.tsx  |  2 +-
 .../demos/inside-scroll/tailwind/index.tsx       |  8 ++++----
 .../demos/outside-scroll/tailwind/index.tsx      | 12 +++++-------
 .../demos/indent-provider/tailwind/index.tsx     |  8 ++++----
 .../drawer/demos/mobile-nav/tailwind/index.tsx   |  6 +++---
 .../form/demos/form-action/tailwind/index.tsx    |  2 +-
 .../form/demos/hero/tailwind/index.tsx           |  2 +-
 .../components/form/demos/zod/tailwind/index.tsx |  2 +-
 .../menu/demos/checkbox-items/tailwind/index.tsx |  2 +-
 .../tailwind/index.tsx                           |  2 +-
 .../detached-triggers-full/tailwind/index.tsx    |  2 +-
 .../menu/demos/group-labels/tailwind/index.tsx   |  2 +-
 .../menu/demos/hero/tailwind/index.tsx           |  2 +-
 .../menu/demos/open-on-hover/tailwind/index.tsx  |  2 +-
 .../menu/demos/radio-items/tailwind/index.tsx    |  2 +-
 .../menu/demos/submenu/tailwind/index.tsx        |  2 +-
 .../menubar/demos/hero/tailwind/index.tsx        |  8 ++++----
 .../meter/demos/hero/tailwind/index.tsx          |  4 ++--
 .../demos/hero/tailwind/index.tsx                |  6 +++---
 .../demos/nested-inline/tailwind/index.tsx       | 12 ++++++------
 .../demos/nested/tailwind/index.tsx              |  8 ++++----
 .../number-field/demos/hero/tailwind/index.tsx   |  2 +-
 .../demos/alphanumeric/tailwind/index.tsx        |  7 ++-----
 .../demos/focused-placeholder/tailwind/index.tsx |  7 ++-----
 .../otp-field/demos/grouped/tailwind/index.tsx   |  2 +-
 .../otp-field/demos/hero/tailwind/index.tsx      |  7 ++-----
 .../otp-field/demos/password/tailwind/index.tsx  |  7 ++-----
 .../detached-triggers-full/tailwind/index.tsx    | 14 +++++++-------
 .../tailwind/index.tsx                           | 10 +++++-----
 .../detached-triggers-full/tailwind/index.tsx    |  8 ++++----
 .../detached-triggers-simple/tailwind/index.tsx  |  4 ++--
 .../preview-card/demos/hero/tailwind/index.tsx   |  4 ++--
 .../progress/demos/hero/tailwind/index.tsx       |  4 ++--
 .../radio/demos/hero/tailwind/index.tsx          |  8 ++++----
 .../select/demos/grouped/tailwind/index.tsx      |  6 +++---
 .../select/demos/hero/tailwind/index.tsx         |  6 +++---
 .../select/demos/multiple/tailwind/index.tsx     |  6 +++---
 .../demos/object-values/tailwind/index.tsx       | 14 +++++++-------
 .../switch/demos/hero/tailwind/index.tsx         |  2 +-
 .../toolbar/demos/hero/tailwind/index.tsx        | 16 ++++++++--------
 .../tailwind/index.tsx                           |  2 +-
 .../handbook/forms/demos/hero/tailwind/index.tsx |  6 +++---
 .../demos/react-hook-form/tailwind/index.tsx     |  6 +++---
 .../forms/demos/tanstack-form/tailwind/index.tsx |  6 +++---
 .../app/(docs)/react/handbook/styling/page.mdx   |  4 ++--
 67 files changed, 160 insertions(+), 174 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
index 44b9114595a..f718c44731c 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
@@ -6,12 +6,12 @@ export default function ExampleAccordion() {
     <Accordion.Root className="flex w-80 max-w-full flex-col border-b border-neutral-950 text-neutral-950 dark:border-white dark:text-white">
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             What is Base UI?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm leading-5 transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
           <div className="py-2">
             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>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             How do I get started?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm leading-5 transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
           <div className="py-2">
             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>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             Can I use it for my project?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm leading-5 transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
           <div className="py-2">Of course! Base UI is free and open source.</div>
         </Accordion.Panel>
       </Accordion.Item>
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
index 6e478a9ba7c..851ac28c370 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
@@ -9,12 +9,12 @@ export default function ExampleAccordion() {
     >
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             What is Base UI?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm leading-5 transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
           <div className="py-2">
             Base UI is a library of high-quality unstyled React components for design systems and
             web apps.
@@ -24,12 +24,12 @@ export default function ExampleAccordion() {
 
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             How do I get started?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm leading-5 transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
           <div className="py-2">
             Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before,
             you’ll feel at home.
@@ -39,12 +39,12 @@ export default function ExampleAccordion() {
 
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm leading-5 font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             Can I use it for my project?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
-        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm leading-5 transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
           <div className="py-2">Of course! Base UI is free and open source.</div>
         </Accordion.Panel>
       </Accordion.Item>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
index 759ae661d85..e58d942f657 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
@@ -77,7 +77,7 @@ export default function ExampleAsyncAutocomplete() {
       itemToStringValue={(item) => item.title}
       filter={null}
     >
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-900">
         Search movies by name or year
         <Autocomplete.Input
           placeholder="e.g. Pulp Fiction or 1994"
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
index 2610773ba6f..9bbc58d93fc 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Autocomplete } from '@base-ui/react/autocomplete';
 export default function ExampleAutocompleteAutoHighlight() {
   return (
     <Autocomplete.Root items={tags} autoHighlight>
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-900">
         Auto highlight on type
         <Autocomplete.Input
           placeholder="e.g. feature"
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
index 52cd58fff43..56c810816b3 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
@@ -10,7 +10,7 @@ export default function ExampleFuzzyMatchingAutocomplete() {
       filter={fuzzyFilter}
       itemToStringValue={(item) => item.title}
     >
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-900">
         Fuzzy search documentation
         <Autocomplete.Input
           placeholder="e.g. React"
@@ -42,7 +42,7 @@ export default function ExampleFuzzyMatchingAutocomplete() {
                             {highlightText(item.title, value)}
                           </span>
                         </span>
-                        <span className="text-sm leading-5 text-neutral-600">
+                        <span className="text-sm text-neutral-600">
                           {highlightText(item.description, value)}
                         </span>
                       </span>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
index 1189700d000..7d79aa7e541 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Autocomplete } from '@base-ui/react/autocomplete';
 export default function ExampleGroupAutocomplete() {
   return (
     <Autocomplete.Root items={groupedTags}>
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-900">
         Select a tag
         <Autocomplete.Input
           placeholder="e.g. feature"
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
index c0585f79a2a..cb3e65ba4d7 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Autocomplete } from '@base-ui/react/autocomplete';
 export default function ExampleAutocomplete() {
   return (
     <Autocomplete.Root items={tags}>
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-900">
         Search tags
         <Autocomplete.Input
           placeholder="e.g. feature"
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
index 23c40775135..abd5bdfb319 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Autocomplete } from '@base-ui/react/autocomplete';
 export default function ExampleAutocompleteInline() {
   return (
     <Autocomplete.Root items={tags} mode="both">
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-900">
         Search tags
         <Autocomplete.Input
           placeholder="e.g. feature"
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
index 3b85985e62e..8e64a9eee27 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
@@ -21,7 +21,7 @@ export default function ExampleAutocompleteLimit() {
 
   return (
     <Autocomplete.Root items={tags} value={value} onValueChange={setValue} limit={limit}>
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-900">
         Limit results to 8
         <Autocomplete.Input
           placeholder="e.g. component"
@@ -52,7 +52,7 @@ export default function ExampleAutocompleteLimit() {
 
             <Autocomplete.Status>
               {moreCount > 0 ? (
-                <div className="mt-1 px-4 py-2 text-sm leading-5 text-neutral-600">
+                <div className="mt-1 px-4 py-2 text-sm text-neutral-600">
                   {`Hiding ${moreCount} results (type a more specific query to narrow results)`}
                 </div>
               ) : null}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
index a74adf66127..c601f2e2525 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
@@ -30,7 +30,7 @@ export default function ExampleVirtualizedAutocomplete() {
         }
       }}
     >
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-900">
         Search 10,000 items
         <Autocomplete.Input className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-neutral-200 pl-3.5 text-base font-normal text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800" />
       </label>
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
index 70b9ee4f086..bb242a3168f 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Button } from '@base-ui/react/button';
 
 export default function ExampleButton() {
   return (
-    <Button className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
+    <Button className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
       Submit
     </Button>
   );
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
index b49bac4fbae..ca7a3f502b5 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleButton() {
 
   return (
     <Button
-      className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
+      className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
       disabled={loading}
       focusableWhenDisabled
       onClick={() => {
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
index 91aada9320f..181207a4d30 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
@@ -11,11 +11,11 @@ export default function ExampleCheckboxGroup() {
       defaultValue={['fuji-apple']}
       className="flex flex-col items-start gap-1 text-neutral-950 dark:text-white"
     >
-      <div className="text-sm leading-5 font-bold" id={id}>
+      <div className="text-sm font-bold" id={id}>
         Apples
       </div>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-neutral-950 dark:text-white">
+      <label className="flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white">
         <Checkbox.Root
           name="apple"
           value="fuji-apple"
@@ -28,7 +28,7 @@ export default function ExampleCheckboxGroup() {
         Fuji
       </label>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-neutral-950 dark:text-white">
+      <label className="flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white">
         <Checkbox.Root
           name="apple"
           value="gala-apple"
@@ -41,7 +41,7 @@ export default function ExampleCheckboxGroup() {
         Gala
       </label>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-neutral-950 dark:text-white">
+      <label className="flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white">
         <Checkbox.Root
           name="apple"
           value="granny-smith-apple"
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
index 8dbe3c8c553..1ffd05c2d28 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Checkbox } from '@base-ui/react/checkbox';
 
 export default function ExampleCheckbox() {
   return (
-    <label className="flex items-center gap-2 text-sm leading-5 font-normal text-neutral-950 dark:text-white">
+    <label className="flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white">
       <Checkbox.Root
         defaultChecked
         className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
index 1562e1abe33..a59f1e7cc91 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
@@ -4,11 +4,11 @@ import { Collapsible } from '@base-ui/react/collapsible';
 export default function ExampleCollapsible() {
   return (
     <Collapsible.Root className="flex min-h-36 w-56 flex-col justify-center text-neutral-950 dark:text-white">
-      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 pl-3 pr-2 text-sm leading-5 font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
+      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 pl-3 pr-2 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
         Recovery keys
         <ChevronIcon className="size-3 transition-transform duration-100 ease-out group-data-panel-open:rotate-90" />
       </Collapsible.Trigger>
-      <Collapsible.Panel className="flex h-[var(--collapsible-panel-height)] flex-col justify-end overflow-hidden text-sm leading-5 transition-[height] duration-150 ease-out [&[hidden]:not([hidden='until-found'])]:hidden data-ending-style:h-0 data-starting-style:h-0">
+      <Collapsible.Panel className="flex h-[var(--collapsible-panel-height)] flex-col justify-end overflow-hidden text-sm transition-[height] duration-150 ease-out [&[hidden]:not([hidden='until-found'])]:hidden data-ending-style:h-0 data-starting-style:h-0">
         <div className="flex flex-col gap-2 px-3.5 py-2">
           <div>alien-bean-pasta</div>
           <div>wild-irish-burrito</div>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index f2db0358cd2..713522c5377 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -111,7 +111,7 @@ export default function ExampleAsyncSingleCombobox() {
         });
       }}
     >
-      <div className="relative flex flex-col gap-1 text-sm font-bold leading-5 text-neutral-900">
+      <div className="relative flex flex-col gap-1 text-sm font-bold text-neutral-900">
         <label htmlFor={id}>Assign reviewer</label>
         <Combobox.InputGroup className="relative box-content h-10 w-[16rem] rounded-md border border-neutral-200 bg-[canvas] focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 md:w-[20rem] [&>input]:pr-[calc(0.5rem+1.5rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+1.5rem*2)]">
           <Combobox.Input
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
index 87ed358f7b7..18094b63f9f 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
@@ -122,7 +122,7 @@ export default function ExampleCreatableCombobox() {
         }}
       >
         <div className="max-w-112 flex flex-col gap-1">
-          <label className="text-sm leading-5 font-bold text-neutral-900" htmlFor={id}>
+          <label className="text-sm font-bold text-neutral-900" htmlFor={id}>
             Labels
           </label>
           <Combobox.InputGroup className="w-64 cursor-text rounded-md border border-neutral-200 bg-[canvas] px-1.5 py-1 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 min-[500px]:w-[22rem]">
@@ -206,10 +206,10 @@ export default function ExampleCreatableCombobox() {
             className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 mt-[-2rem] w-[24rem] max-w-[calc(100vw-3rem)] rounded-lg bg-[canvas] p-6 text-neutral-900 outline-1 outline-neutral-200 transition-all data-[starting-style]:opacity-0 data-[starting-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:scale-90 dark:-outline-offset-1 dark:outline-neutral-300"
             initialFocus={createInputRef}
           >
-            <Dialog.Title className="-mt-1.5 mb-1 text-lg leading-7 tracking-[-0.0025em] font-bold">
+            <Dialog.Title className="-mt-1.5 mb-1 text-lg tracking-[-0.0025em] font-bold">
               Create new label
             </Dialog.Title>
-            <Dialog.Description className="mb-4 text-base leading-6 text-neutral-600">
+            <Dialog.Description className="mb-4 text-base text-neutral-600">
               Add a new label to select.
             </Dialog.Description>
             <form onSubmit={handleCreateSubmit}>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index 9de2cf1857d..7f3eeea305f 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleGroupedCombobox() {
   const id = React.useId();
   return (
     <Combobox.Root items={groupedProduce}>
-      <div className="relative flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-900">
+      <div className="relative flex flex-col gap-1 text-sm font-bold text-neutral-900">
         <label htmlFor={id}>Select produce</label>
         <Combobox.InputGroup className="relative box-content h-10 w-[16rem] rounded-md border border-neutral-200 bg-[canvas] focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 [&>input]:pr-[calc(0.5rem+1.5rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+1.5rem*2)]">
           <Combobox.Input
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
index fdf649c5020..bdcc7bc1900 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleCombobox() {
   const id = React.useId();
   return (
     <Combobox.Root items={fruits}>
-      <div className="relative flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-900">
+      <div className="relative flex flex-col gap-1 text-sm font-bold text-neutral-900">
         <label htmlFor={id}>Choose a fruit</label>
         <Combobox.InputGroup className="relative box-content h-10 w-64 rounded-md border border-neutral-200 bg-[canvas] focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 [&>input]:pr-[calc(0.5rem+1.5rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+1.5rem*2)]">
           <Combobox.Input
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index 992d6799f4d..a6024ab39c6 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExamplePopoverCombobox() {
   return (
     <div className="flex flex-col gap-1">
       <Combobox.Root items={countries}>
-        <Combobox.Label className="cursor-default text-sm leading-5 font-bold text-neutral-900">
+        <Combobox.Label className="cursor-default text-sm font-bold text-neutral-900">
           Country
         </Combobox.Label>
         <Combobox.Trigger className="flex bg-[canvas] h-10 min-w-[12rem] items-center justify-between gap-3 rounded-md border border-neutral-200 pr-3 pl-3.5 text-base text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-neutral-100 cursor-default font-normal">
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
index 04aac641610..b469659f169 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleMultipleCombobox() {
   return (
     <Combobox.Root items={langs} multiple>
       <div className="max-w-[28rem] flex flex-col gap-1">
-        <label className="text-sm leading-5 font-bold text-neutral-900" htmlFor={id}>
+        <label className="text-sm font-bold text-neutral-900" htmlFor={id}>
           Programming languages
         </label>
         <Combobox.InputGroup className="w-64 cursor-text rounded-md border border-neutral-200 bg-[canvas] px-1.5 py-1 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 min-[500px]:w-[22rem]">
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
index f96e34eec59..1fdcda42167 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
@@ -32,7 +32,7 @@ export default function ExampleVirtualizedCombobox() {
         }
       }}
     >
-      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-900">
         Search 10,000 items
         <Combobox.Input className="h-10 w-64 rounded-md font-normal border border-neutral-200 pl-3.5 text-base text-neutral-900 bg-[canvas] focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800" />
       </label>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
index ac9b96a30d7..9c859512ebc 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
@@ -44,7 +44,7 @@ export default function ExampleDialog() {
             <textarea
               aria-labelledby={titleId}
               required
-              className="min-h-32 w-full border border-neutral-950 dark:border-white bg-transparent px-2 py-2 text-sm font-normal leading-5 text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800"
+              className="min-h-32 w-full border border-neutral-950 dark:border-white bg-transparent px-2 py-2 text-sm font-normal text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800"
               placeholder="What’s on your mind?"
               value={textareaValue}
               onChange={(event) => setTextareaValue(event.target.value)}
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
index 4f4942ad887..3ad189f9cd4 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
@@ -13,8 +13,8 @@ export default function InsideScrollDialog() {
         <Dialog.Viewport className="fixed inset-0 flex items-center justify-center overflow-hidden py-6 [@media(min-height:600px)]:pb-12 [@media(min-height:600px)]:pt-8">
           <Dialog.Popup className="relative flex w-[min(40rem,calc(100vw-2rem))] max-h-full max-w-full min-h-0 flex-col overflow-hidden bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0">
             <div className="px-4 pt-4 pb-3">
-              <Dialog.Title className="m-0 mb-1 text-base font-bold leading-6">Dialog</Dialog.Title>
-              <Dialog.Description className="m-0 text-sm leading-5 text-neutral-600 dark:text-neutral-400">
+              <Dialog.Title className="m-0 mb-1 text-base font-bold">Dialog</Dialog.Title>
+              <Dialog.Description className="m-0 text-sm text-neutral-600 dark:text-neutral-400">
                 This layout keeps the popup fully on screen while allowing its content to scroll.
               </Dialog.Description>
             </div>
@@ -23,8 +23,8 @@ export default function InsideScrollDialog() {
                 <ScrollArea.Content className="flex flex-col">
                   {CONTENT_SECTIONS.map((item) => (
                     <section className="p-4" key={item.title}>
-                      <h3 className="mb-1 text-sm font-bold leading-5">{item.title}</h3>
-                      <p className="m-0 text-sm leading-5 text-neutral-700 dark:text-neutral-300">
+                      <h3 className="mb-1 text-sm font-bold">{item.title}</h3>
+                      <p className="m-0 text-sm text-neutral-700 dark:text-neutral-300">
                         {item.body}
                       </p>
                     </section>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index d37e094d26d..52d306f4bd0 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -25,9 +25,7 @@ export default function OutsideScrollDialog() {
                   className="outline-0 relative mx-auto my-16 w-[min(40rem,calc(100vw-2rem))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[translate] duration-[350ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-[starting-style]:translate-y-[100dvh] data-[ending-style]:translate-y-[max(100dvh,100%)] data-[ending-style]:duration-[220ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] motion-reduce:transition-none"
                 >
                   <div className="mb-1 flex items-start justify-between gap-3">
-                    <Dialog.Title className="m-0 text-base font-bold leading-6">
-                      Dialog
-                    </Dialog.Title>
+                    <Dialog.Title className="m-0 text-base font-bold">Dialog</Dialog.Title>
                     <Dialog.Close
                       aria-label="Close"
                       className="relative top-[-0.25rem] right-[-0.25rem] inline-flex items-center justify-center w-8 h-8 bg-transparent text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-800 hover:text-neutral-950 dark:hover:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
@@ -36,7 +34,7 @@ export default function OutsideScrollDialog() {
                     </Dialog.Close>
                   </div>
 
-                  <Dialog.Description className="m-0 mb-4 text-sm leading-5 text-neutral-600 dark:text-neutral-400">
+                  <Dialog.Description className="m-0 mb-4 text-sm text-neutral-600 dark:text-neutral-400">
                     This layout keeps an outer container scrollable while the dialog can extend past
                     the bottom edge.
                   </Dialog.Description>
@@ -44,15 +42,15 @@ export default function OutsideScrollDialog() {
                   <div className="mb-4 flex flex-col gap-4">
                     {CONTENT_SECTIONS.map((item) => (
                       <section key={item.title}>
-                        <h3 className="m-0 mb-1 text-sm font-bold leading-5">{item.title}</h3>
-                        <p className="m-0 text-sm leading-5 text-neutral-700 dark:text-neutral-300">
+                        <h3 className="m-0 mb-1 text-sm font-bold">{item.title}</h3>
+                        <p className="m-0 text-sm text-neutral-700 dark:text-neutral-300">
                           {item.body}
                         </p>
                       </section>
                     ))}
                   </div>
 
-                  <p className="m-0 text-sm leading-5 text-neutral-600 dark:text-neutral-400">
+                  <p className="m-0 text-sm text-neutral-600 dark:text-neutral-400">
                     Related docs:{' '}
                     {RELATED_LINKS.map((item, index) => (
                       <React.Fragment key={item.href}>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
index bab76e61178..ded707c095b 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleDrawer() {
         <Drawer.Indent className="[--indent-progress:var(--drawer-swipe-progress)] [--indent-radius:calc(1rem*(1-var(--indent-progress)))] [--indent-transition:calc(1-clamp(0,calc(var(--drawer-swipe-progress)*100000),1))] relative min-h-[320px] bg-neutral-50 border border-neutral-200 p-4 text-neutral-900 [transition:transform_0.4s_cubic-bezier(0.32,0.72,0,1),border-radius_0.25s_cubic-bezier(0.32,0.72,0,1)] origin-[center_top] will-change-transform [transform:scale(1)_translateY(0)] [transition-duration:calc(400ms*var(--indent-transition)),calc(250ms*var(--indent-transition))] data-[active]:[transform:scale(calc(0.98+(0.02*var(--indent-progress))))_translateY(calc(0.5rem*(1-var(--indent-progress))))] data-[active]:[border-top-left-radius:var(--indent-radius)] data-[active]:[border-top-right-radius:var(--indent-radius)]">
           <div className="flex min-h-[320px] items-center justify-center">
             <Drawer.Root modal={false}>
-              <Drawer.Trigger className="box-border flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal leading-6 text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
+              <Drawer.Trigger className="box-border flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
                 Open drawer
               </Drawer.Trigger>
               <Drawer.Portal container={portalContainer}>
@@ -21,14 +21,14 @@ export default function ExampleDrawer() {
                   <Drawer.Popup className="box-border w-full max-h-[calc(80vh+var(--bleed))] -mb-[var(--bleed)] rounded-t-2xl outline outline-1 outline-neutral-200 bg-neutral-50 px-6 py-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+var(--bleed))] text-neutral-900 overflow-y-auto overscroll-contain transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] [transform:translateY(var(--drawer-swipe-movement-y))] data-[swiping]:select-none data-[ending-style]:[transform:translateY(calc(100%-var(--bleed)+2px))] data-[starting-style]:[transform:translateY(calc(100%-var(--bleed)+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:outline-neutral-300">
                     <div className="mx-auto mb-4 h-1 w-12 rounded-full bg-neutral-300" />
                     <Drawer.Content className="mx-auto w-full max-w-[32rem]">
-                      <Drawer.Title className="mt-0 mb-1 text-lg leading-7 font-bold tracking-[-0.0025em] text-center">
+                      <Drawer.Title className="mt-0 mb-1 text-lg font-bold tracking-[-0.0025em] text-center">
                         Notifications
                       </Drawer.Title>
-                      <Drawer.Description className="mb-6 text-base leading-6 text-neutral-600 text-center">
+                      <Drawer.Description className="mb-6 text-base text-neutral-600 text-center">
                         You are all caught up. Good job!
                       </Drawer.Description>
                       <div className="flex justify-center gap-4">
-                        <Drawer.Close className="box-border flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal leading-6 text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
+                        <Drawer.Close className="box-border flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
                           Close
                         </Drawer.Close>
                       </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
index c7fe7531436..31f1f1832ed 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
@@ -53,7 +53,7 @@ const LONG_LIST = [
 export default function ExampleDrawerMobileNav() {
   return (
     <Drawer.Root>
-      <Drawer.Trigger className="box-border flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 m-0 outline-none text-base font-normal leading-6 text-neutral-900 select-none hover:bg-neutral-100 active:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1">
+      <Drawer.Trigger className="box-border flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 m-0 outline-none text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 active:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1">
         Open mobile menu
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -90,10 +90,10 @@ export default function ExampleDrawerMobileNav() {
                     </div>
 
                     <Drawer.Content className="w-full">
-                      <Drawer.Title className="m-0 mb-1 text-lg font-bold leading-7 tracking-[-0.0025em]">
+                      <Drawer.Title className="m-0 mb-1 text-lg font-bold tracking-[-0.0025em]">
                         Menu
                       </Drawer.Title>
-                      <Drawer.Description className="m-0 mb-5 text-base leading-6 text-neutral-600">
+                      <Drawer.Description className="m-0 mb-5 text-base text-neutral-600">
                         Scroll the long list. Flick down from the top to dismiss.
                       </Drawer.Description>
 
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
index 22a017d58f5..e8476f9bd4f 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
@@ -34,7 +34,7 @@ export default function ActionStateForm() {
         type="submit"
         disabled={loading}
         focusableWhenDisabled
-        className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
index e59fcf0144e..b69522608c6 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
@@ -45,7 +45,7 @@ export default function ExampleForm() {
         disabled={loading}
         focusableWhenDisabled
         type="submit"
-        className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
index 197cd396a89..4fa4381cec2 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
@@ -58,7 +58,7 @@ export default function Page() {
       </Field.Root>
       <Button
         type="submit"
-        className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index 4be204ad267..7a2ce424275 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleMenu() {
 
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Workspace <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
index a066e4c8fde..ac2dd57d795 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { Menu } from '@base-ui/react/menu';
 const itemClass =
   "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400";
 const triggerClass =
-  'flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-neutral-100 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
+  'flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-neutral-100 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
 const popupClass =
   'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
index 2726870850a..3c0f755a721 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
@@ -38,7 +38,7 @@ const demoMenu = Menu.createHandle<MenuKey>();
 const triggerClass = `
   flex h-8 items-center justify-center
   rounded-none border border-neutral-950 bg-white
-  px-3 text-sm leading-5 font-normal text-neutral-950
+  px-3 text-sm font-normal text-neutral-950
   select-none
   hover:bg-neutral-50 active:bg-neutral-100 data-[popup-open]:bg-neutral-100
   dark:border-white dark:bg-neutral-950 dark:text-white
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index e8dcc25ee37..733808324e7 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleMenu() {
 
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         View <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
index 5151c920295..0e78f9ddc9c 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
@@ -7,7 +7,7 @@ const itemClass =
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Song <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
index 945c4a7e1d9..a2a86ed0c8a 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleMenu() {
     <Menu.Root>
       <Menu.Trigger
         openOnHover
-        className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         Add to playlist <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index 936685f1462..90a50e27739 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleMenu() {
   const [value, setValue] = React.useState('date');
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Sort <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
index 1a4a975bacd..08bde0178fa 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
@@ -12,7 +12,7 @@ const submenuTriggerClass =
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Song <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
index b16a8fd4e66..66d6c392b66 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleMenubar() {
   return (
     <Menubar className="flex items-center">
       <Menu.Root>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           File
         </Menu.Trigger>
         <Menu.Portal>
@@ -76,7 +76,7 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           Edit
         </Menu.Trigger>
         <Menu.Portal>
@@ -106,7 +106,7 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           View
         </Menu.Trigger>
         <Menu.Portal>
@@ -169,7 +169,7 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root disabled>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           Help
         </Menu.Trigger>
       </Menu.Root>
diff --git a/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx
index c2a83051ad6..5b7bede2665 100644
--- a/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/meter/demos/hero/tailwind/index.tsx
@@ -3,10 +3,10 @@ import { Meter } from '@base-ui/react/meter';
 export default function ExampleMeter() {
   return (
     <Meter.Root className="grid max-w-full w-60 grid-cols-2 gap-y-2" value={24}>
-      <Meter.Label className="text-sm leading-5 font-normal text-neutral-950 dark:text-white">
+      <Meter.Label className="text-sm font-normal text-neutral-950 dark:text-white">
         Storage Used
       </Meter.Label>
-      <Meter.Value className="text-right text-sm leading-5 text-neutral-950 dark:text-white" />
+      <Meter.Value className="text-right text-sm text-neutral-950 dark:text-white" />
       <Meter.Track className="col-span-2 h-3 overflow-hidden bg-neutral-200 dark:bg-neutral-800">
         <Meter.Indicator className="bg-neutral-950 transition-[width] duration-500 dark:bg-white" />
       </Meter.Track>
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
index 931af1def8f..58645e6305b 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
@@ -19,7 +19,7 @@ export default function ExampleNavigationMenu() {
                 <li key={item.href}>
                   <Link href={item.href} className={linkCardClassName}>
                     <h3 className="m-0 mb-1 text-sm leading-4 font-normal">{item.title}</h3>
-                    <p className="m-0 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
+                    <p className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
                       {item.description}
                     </p>
                   </Link>
@@ -43,7 +43,7 @@ export default function ExampleNavigationMenu() {
                 <li key={item.href}>
                   <Link href={item.href} className={linkCardClassName}>
                     <h3 className="m-0 mb-1 text-sm leading-4 font-normal">{item.title}</h3>
-                    <p className="m-0 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
+                    <p className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
                       {item.description}
                     </p>
                   </Link>
@@ -104,7 +104,7 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 }
 
 const triggerClassName =
-  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm leading-5 font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-[popup-open]:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
+  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-[popup-open]:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
 
 const contentClassName =
   'h-full p-2 min-[500px]:w-max min-[500px]:max-w-[400px] ' +
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
index 8ad1080cea3..8cd284424fb 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
@@ -32,14 +32,14 @@ export default function ExampleNavigationMenu() {
                         <span className="text-sm leading-4 font-normal text-neutral-950 dark:text-white">
                           {menu.label}
                         </span>
-                        <span className="text-sm leading-5 text-neutral-500 dark:text-neutral-400">
+                        <span className="text-sm text-neutral-500 dark:text-neutral-400">
                           {menu.hint}
                         </span>
                       </NavigationMenu.Trigger>
                       <NavigationMenu.Content className={submenuContentClassName}>
                         <div>
                           <h4 className="m-0 text-base leading-5 font-normal">{menu.title}</h4>
-                          <p className="m-0 mt-1 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
+                          <p className="m-0 mt-1 text-sm text-neutral-500 dark:text-neutral-400">
                             {menu.description}
                           </p>
                         </div>
@@ -48,7 +48,7 @@ export default function ExampleNavigationMenu() {
                             <li key={link.href}>
                               <Link className={linkCardClassName} href={link.href}>
                                 <h5 className="m-0 text-sm leading-4 font-normal">{link.title}</h5>
-                                <p className="m-0 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
+                                <p className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
                                   {link.description}
                                 </p>
                               </Link>
@@ -77,7 +77,7 @@ export default function ExampleNavigationMenu() {
             <div className="flex flex-col gap-4 p-4 text-neutral-950 dark:text-white">
               <div>
                 <h4 className="m-0 text-base leading-5 font-normal">{guidesPanel.title}</h4>
-                <p className="m-0 mt-1 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
+                <p className="m-0 mt-1 text-sm text-neutral-500 dark:text-neutral-400">
                   {guidesPanel.description}
                 </p>
               </div>
@@ -86,7 +86,7 @@ export default function ExampleNavigationMenu() {
                   <li key={link.href}>
                     <Link className={linkCardClassName} href={link.href}>
                       <h5 className="m-0 text-sm leading-4 font-normal">{link.title}</h5>
-                      <p className="m-0 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
+                      <p className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
                         {link.description}
                       </p>
                     </Link>
@@ -154,7 +154,7 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 }
 
 const triggerClassName =
-  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm leading-5 font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-[popup-open]:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
+  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-[popup-open]:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
 
 const sharedContentClassName =
   'h-full w-[calc(100vw_-_40px)] ' +
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
index 1af1b4a58d9..0f7d5cbf725 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
@@ -19,7 +19,7 @@ export default function ExampleNavigationMenu() {
                 <li key={item.href}>
                   <Link href={item.href} className={linkCardClassName}>
                     <h3 className="m-0 mb-1 text-sm leading-4 font-normal">{item.title}</h3>
-                    <p className="m-0 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
+                    <p className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
                       {item.description}
                     </p>
                   </Link>
@@ -30,7 +30,7 @@ export default function ExampleNavigationMenu() {
                   <NavigationMenu.Item>
                     <NavigationMenu.Trigger className={linkCardClassName}>
                       <span className="m-0 mb-1 text-sm leading-4 font-normal">Handbook</span>
-                      <p className="m-0 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
+                      <p className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
                         How to use Base UI effectively.
                       </p>
                       <NavigationMenu.Icon className="absolute top-1/2 right-2.5 flex h-2.5 w-2.5 -translate-y-1/2 items-center justify-center transition-transform duration-200 ease-in-out data-[popup-open]:rotate-180">
@@ -45,7 +45,7 @@ export default function ExampleNavigationMenu() {
                               <h3 className="m-0 mb-1 text-sm leading-4 font-normal">
                                 {item.title}
                               </h3>
-                              <p className="m-0 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
+                              <p className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
                                 {item.description}
                               </p>
                             </Link>
@@ -130,7 +130,7 @@ function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
 }
 
 const triggerClassName =
-  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm leading-5 font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-[popup-open]:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
+  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-[popup-open]:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
 
 const contentTransitionClassName =
   'transition-[opacity,transform,translate] duration-[var(--duration)] ease-[var(--easing)] ' +
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
index 166aeed7825..bbf16365b27 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
@@ -11,7 +11,7 @@ export default function ExampleNumberField() {
       <NumberField.ScrubArea className="cursor-ew-resize font-bold select-none">
         <label
           htmlFor={id}
-          className="cursor-ew-resize text-sm leading-5 font-bold text-neutral-950 dark:text-white"
+          className="cursor-ew-resize text-sm font-bold text-neutral-950 dark:text-white"
         >
           Amount
         </label>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
index b1688c5ee19..05981953814 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function OTPFieldAlphanumericDemo() {
 
   return (
     <div className="flex w-full max-w-80 flex-col items-start gap-1">
-      <label htmlFor={id} className="text-sm leading-5 font-bold text-neutral-950 dark:text-white">
+      <label htmlFor={id} className="text-sm font-bold text-neutral-950 dark:text-white">
         Recovery code
       </label>
       <OTPField.Root
@@ -27,10 +27,7 @@ export default function OTPFieldAlphanumericDemo() {
           />
         ))}
       </OTPField.Root>
-      <p
-        id={descriptionId}
-        className="m-0 text-sm leading-5 text-neutral-500 dark:text-neutral-400"
-      >
+      <p id={descriptionId} className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
         Accept letters and numbers for backup codes such as{' '}
         <code className="font-mono">A7C9XZ</code>.
       </p>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
index a5e65a7f186..014ff5a9358 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function OTPFieldFocusedPlaceholderDemo() {
 
   return (
     <div className="flex w-full max-w-80 flex-col items-start gap-1">
-      <label htmlFor={id} className="text-sm leading-5 font-bold text-neutral-950 dark:text-white">
+      <label htmlFor={id} className="text-sm font-bold text-neutral-950 dark:text-white">
         Verification code
       </label>
       <OTPField.Root
@@ -27,10 +27,7 @@ export default function OTPFieldFocusedPlaceholderDemo() {
           />
         ))}
       </OTPField.Root>
-      <p
-        id={descriptionId}
-        className="m-0 text-sm leading-5 text-neutral-500 dark:text-neutral-400"
-      >
+      <p id={descriptionId} className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
         Placeholder hints can stay visible until the active slot is focused.
       </p>
     </div>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
index 9344c76da1a..7b8c30ae922 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function OTPFieldGroupedDemo() {
 
   return (
     <div className="flex w-full max-w-80 flex-col items-start gap-1">
-      <label htmlFor={id} className="text-sm leading-5 font-bold text-neutral-950 dark:text-white">
+      <label htmlFor={id} className="text-sm font-bold text-neutral-950 dark:text-white">
         Verification code
       </label>
       <OTPField.Root id={id} length={OTP_LENGTH} className="flex w-full items-center gap-2">
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
index a607da3854f..b3d1441829f 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleOTPField() {
 
   return (
     <div className="flex w-full max-w-80 flex-col items-start gap-1">
-      <label htmlFor={id} className="text-sm leading-5 font-bold text-neutral-950 dark:text-white">
+      <label htmlFor={id} className="text-sm font-bold text-neutral-950 dark:text-white">
         Verification code
       </label>
       <OTPField.Root
@@ -26,10 +26,7 @@ export default function ExampleOTPField() {
           />
         ))}
       </OTPField.Root>
-      <p
-        id={descriptionId}
-        className="m-0 text-sm leading-5 text-neutral-500 dark:text-neutral-400"
-      >
+      <p id={descriptionId} className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
         Enter the 6-character code we sent to your device.
       </p>
     </div>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
index 446853bd52b..f7d8e58644d 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function OTPFieldPasswordDemo() {
 
   return (
     <div className="flex w-full max-w-80 flex-col items-start gap-1">
-      <label htmlFor={id} className="text-sm leading-5 font-bold text-neutral-950 dark:text-white">
+      <label htmlFor={id} className="text-sm font-bold text-neutral-950 dark:text-white">
         Access code
       </label>
       <OTPField.Root
@@ -27,10 +27,7 @@ export default function OTPFieldPasswordDemo() {
           />
         ))}
       </OTPField.Root>
-      <p
-        id={descriptionId}
-        className="m-0 text-sm leading-5 text-neutral-500 dark:text-neutral-400"
-      >
+      <p id={descriptionId} className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
         Use <code className="font-mono">mask</code> to obscure the code on shared screens.
       </p>
     </div>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
index 267dfbfaae0..9ce446da290 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
@@ -81,8 +81,8 @@ export default function PopoverDetachedTriggersFullDemo() {
 function NotificationsPanel() {
   return (
     <React.Fragment>
-      <Popover.Title className="m-0 text-sm font-bold leading-5">Notifications</Popover.Title>
-      <Popover.Description className="m-0 text-sm leading-5 text-neutral-600 dark:text-neutral-400">
+      <Popover.Title className="m-0 text-sm font-bold">Notifications</Popover.Title>
+      <Popover.Description className="m-0 text-sm text-neutral-600 dark:text-neutral-400">
         You are all caught up. Good job!
       </Popover.Description>
     </React.Fragment>
@@ -92,7 +92,7 @@ function NotificationsPanel() {
 function ProfilePanel() {
   return (
     <div className="grid w-max grid-cols-[auto_auto] gap-x-2">
-      <Popover.Title className="col-start-2 col-end-3 row-start-1 row-end-2 m-0 text-sm font-bold leading-5">
+      <Popover.Title className="col-start-2 col-end-3 row-start-1 row-end-2 m-0 text-sm font-bold">
         Jason Eventon
       </Popover.Title>
       <Avatar.Root className="col-start-1 col-end-2 row-start-1 row-end-3 inline-flex h-12 w-12 items-center justify-center overflow-hidden bg-neutral-200 dark:bg-neutral-800 align-middle text-sm leading-none font-bold text-neutral-950 dark:text-white select-none">
@@ -103,10 +103,10 @@ function ProfilePanel() {
           className="h-full w-full object-cover"
         />
       </Avatar.Root>
-      <span className="col-start-2 col-end-3 row-start-2 row-end-3 text-sm leading-5 text-neutral-600 dark:text-neutral-400">
+      <span className="col-start-2 col-end-3 row-start-2 row-end-3 text-sm text-neutral-600 dark:text-neutral-400">
         Pro plan
       </span>
-      <div className="col-start-1 col-end-3 row-start-3 row-end-4 flex flex-col gap-2 pt-2 text-sm leading-5">
+      <div className="col-start-1 col-end-3 row-start-3 row-end-4 flex flex-col gap-2 pt-2 text-sm">
         <a
           href="#"
           className="text-neutral-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
@@ -127,8 +127,8 @@ function ProfilePanel() {
 function ActivityPanel() {
   return (
     <React.Fragment>
-      <Popover.Title className="m-0 text-sm font-bold leading-5">Activity</Popover.Title>
-      <Popover.Description className="m-0 text-sm leading-5 text-neutral-600 dark:text-neutral-400">
+      <Popover.Title className="m-0 text-sm font-bold">Activity</Popover.Title>
+      <Popover.Description className="m-0 text-sm text-neutral-600 dark:text-neutral-400">
         Nothing interesting happened recently.
       </Popover.Description>
     </React.Fragment>
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
index 51e3139c1f4..62a96c055a7 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -14,7 +14,7 @@ const cardContents = {
         src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
         alt="Station Hofplein signage in Rotterdam, Netherlands"
       />
-      <p className="m-0 text-sm leading-5 text-neutral-600 text-pretty dark:text-neutral-400">
+      <p className="m-0 text-sm text-neutral-600 text-pretty dark:text-neutral-400">
         <strong>Typography</strong> is the art and science of arranging type.
       </p>
     </div>
@@ -28,7 +28,7 @@ const cardContents = {
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Braun_ABW30_%28schwarz%29.jpg/250px-Braun_ABW30_%28schwarz%29.jpg"
         alt="Braun ABW30"
       />
-      <p className="m-0 text-sm leading-5 text-neutral-600 text-pretty dark:text-neutral-400">
+      <p className="m-0 text-sm text-neutral-600 text-pretty dark:text-neutral-400">
         A <strong>design</strong> is the concept or proposal for an object, process, or system.
       </p>
     </div>
@@ -42,7 +42,7 @@ const cardContents = {
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/MonaLisa_sfumato.jpeg/250px-MonaLisa_sfumato.jpeg"
         alt="Mona Lisa"
       />
-      <p className="m-0 text-sm leading-5 text-neutral-600 text-pretty dark:text-neutral-400">
+      <p className="m-0 text-sm text-neutral-600 text-pretty dark:text-neutral-400">
         <strong>Art</strong> is a diverse range of cultural activity centered around works utilizing
         creative or imaginative talents, which are expected to evoke a worthwhile experience,
         generally through an expression of emotional power, conceptual ideas, technical proficiency,
@@ -64,7 +64,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
   return (
     <div>
       <div className="flex flex-wrap items-baseline justify-center gap-2">
-        <p className="m-0 text-base leading-6 text-neutral-950 text-balance dark:text-white">
+        <p className="m-0 text-base text-neutral-950 text-balance dark:text-white">
           Discover{' '}
           <PreviewCard.Trigger
             className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
@@ -99,7 +99,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
         </p>
         <button
           type="button"
-          className="box-border flex h-10 items-center justify-center border border-neutral-950 bg-white px-3.5 font-[inherit] text-base leading-6 font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="box-border flex h-10 items-center justify-center border border-neutral-950 bg-white px-3.5 font-[inherit] text-base font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
index 8503dbd9b28..e24935f6237 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
@@ -14,7 +14,7 @@ const cardContents = {
         src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
         alt="Station Hofplein signage in Rotterdam, Netherlands"
       />
-      <p className="m-0 text-sm leading-5 text-neutral-600 text-pretty dark:text-neutral-400">
+      <p className="m-0 text-sm text-neutral-600 text-pretty dark:text-neutral-400">
         <strong>Typography</strong> is the art and science of arranging type.
       </p>
     </div>
@@ -28,7 +28,7 @@ const cardContents = {
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Braun_ABW30_%28schwarz%29.jpg/250px-Braun_ABW30_%28schwarz%29.jpg"
         alt="Braun ABW30"
       />
-      <p className="m-0 text-sm leading-5 text-neutral-600 text-pretty dark:text-neutral-400">
+      <p className="m-0 text-sm text-neutral-600 text-pretty dark:text-neutral-400">
         A <strong>design</strong> is the concept or proposal for an object, process, or system.
       </p>
     </div>
@@ -42,7 +42,7 @@ const cardContents = {
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/MonaLisa_sfumato.jpeg/250px-MonaLisa_sfumato.jpeg"
         alt="Mona Lisa"
       />
-      <p className="m-0 text-sm leading-5 text-neutral-600 text-pretty dark:text-neutral-400">
+      <p className="m-0 text-sm text-neutral-600 text-pretty dark:text-neutral-400">
         <strong>Art</strong> is a diverse range of cultural activity centered around works utilizing
         creative or imaginative talents, which are expected to evoke a worthwhile experience,
         generally through an expression of emotional power, conceptual ideas, technical proficiency,
@@ -55,7 +55,7 @@ const cardContents = {
 export default function PreviewCardDetachedTriggersFullDemo() {
   return (
     <div>
-      <p className="m-0 text-base leading-6 text-neutral-950 text-balance dark:text-white">
+      <p className="m-0 text-base text-neutral-950 text-balance dark:text-white">
         Discover{' '}
         <PreviewCard.Trigger
           className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500"
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
index 54a72224b59..46c3d91a888 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
@@ -6,7 +6,7 @@ const demoPreviewCard = PreviewCard.createHandle();
 export default function PreviewCardDetachedTriggersSimpleDemo() {
   return (
     <div>
-      <p className="m-0 text-base leading-6 text-neutral-950 text-balance dark:text-white">
+      <p className="m-0 text-base text-neutral-950 text-balance dark:text-white">
         The principles of good{' '}
         <PreviewCard.Trigger
           className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500"
@@ -31,7 +31,7 @@ export default function PreviewCardDetachedTriggersSimpleDemo() {
                   src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
                   alt="Station Hofplein signage in Rotterdam, Netherlands"
                 />
-                <p className="m-0 text-sm leading-5 text-neutral-600 text-pretty dark:text-neutral-400">
+                <p className="m-0 text-sm text-neutral-600 text-pretty dark:text-neutral-400">
                   <strong>Typography</strong> is the art and science of arranging type to make
                   written language clear, visually appealing, and effective in communication.
                 </p>
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
index cec1a7bc4be..245605c92a2 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { PreviewCard } from '@base-ui/react/preview-card';
 export default function ExamplePreviewCard() {
   return (
     <PreviewCard.Root>
-      <p className="m-0 text-base leading-6 text-neutral-950 text-balance dark:text-white">
+      <p className="m-0 text-base text-neutral-950 text-balance dark:text-white">
         The principles of good{' '}
         <PreviewCard.Trigger
           className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500"
@@ -26,7 +26,7 @@ export default function ExamplePreviewCard() {
                 src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
                 alt="Station Hofplein signage in Rotterdam, Netherlands"
               />
-              <p className="m-0 text-sm leading-5 text-neutral-600 text-pretty dark:text-neutral-400">
+              <p className="m-0 text-sm text-neutral-600 text-pretty dark:text-neutral-400">
                 <strong>Typography</strong> is the art and science of arranging type to make written
                 language clear, visually appealing, and effective in communication.
               </p>
diff --git a/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx
index f24bf7a56ba..47e22756ecd 100644
--- a/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/progress/demos/hero/tailwind/index.tsx
@@ -15,10 +15,10 @@ export default function ExampleProgress() {
 
   return (
     <Progress.Root className="grid max-w-full w-60 grid-cols-2 gap-y-2" value={value}>
-      <Progress.Label className="text-sm leading-5 font-normal text-neutral-950 dark:text-white">
+      <Progress.Label className="text-sm font-normal text-neutral-950 dark:text-white">
         Export data
       </Progress.Label>
-      <Progress.Value className="text-right text-sm leading-5 text-neutral-950 dark:text-white" />
+      <Progress.Value className="text-right text-sm text-neutral-950 dark:text-white" />
       <Progress.Track className="col-span-2 h-1 overflow-hidden bg-neutral-200 dark:bg-neutral-800">
         <Progress.Indicator className="bg-neutral-950 transition-[width] duration-500 dark:bg-white" />
       </Progress.Track>
diff --git a/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
index 733b98fd815..9571546c739 100644
--- a/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
@@ -11,11 +11,11 @@ export default function ExampleRadioGroup() {
       defaultValue="fuji-apple"
       className="flex flex-col items-start gap-1 text-neutral-950 dark:text-white"
     >
-      <div className="text-sm leading-5 font-bold" id={id}>
+      <div className="text-sm font-bold" id={id}>
         Best apple
       </div>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-neutral-950 dark:text-white">
+      <label className="flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white">
         <Radio.Root
           value="fuji-apple"
           className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
@@ -25,7 +25,7 @@ export default function ExampleRadioGroup() {
         Fuji
       </label>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-neutral-950 dark:text-white">
+      <label className="flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white">
         <Radio.Root
           value="gala-apple"
           className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
@@ -35,7 +35,7 @@ export default function ExampleRadioGroup() {
         Gala
       </label>
 
-      <label className="flex items-center gap-2 text-sm leading-5 font-normal text-neutral-950 dark:text-white">
+      <label className="flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white">
         <Radio.Root
           value="granny-smith-apple"
           className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index 94a450a37d1..f7f78142a2e 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -6,14 +6,14 @@ export default function ExampleSelectGrouped() {
   return (
     <Field.Root className="flex flex-col items-start gap-1">
       <Field.Label
-        className="cursor-default text-sm leading-5 font-bold text-neutral-950 dark:text-white"
+        className="cursor-default text-sm font-bold text-neutral-950 dark:text-white"
         nativeLabel={false}
         render={<div />}
       >
         Produce
       </Field.Label>
       <Select.Root items={groupedProduce}>
-        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-3 pr-2 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           <Select.Value
             className="data-[placeholder]:text-neutral-600 dark:data-[placeholder]:text-neutral-400"
             placeholder="Select produce"
@@ -39,7 +39,7 @@ export default function ExampleSelectGrouped() {
                         <Select.Item
                           key={item.value}
                           value={item.value}
-                          className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-hidden select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-neutral-950 data-[highlighted]:text-white dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-neutral-950"
+                          className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-neutral-950 data-[highlighted]:text-white dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-neutral-950"
                         >
                           <Select.ItemIndicator className="col-start-1">
                             <CheckIcon className="size-3" />
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index 53726e88593..097c9a9e5d4 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -13,10 +13,10 @@ export default function ExampleSelect() {
   return (
     <div className="flex flex-col items-start gap-1">
       <Select.Root items={apples}>
-        <Select.Label className="cursor-default text-sm leading-5 font-bold text-neutral-950 dark:text-white">
+        <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Apple
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-3 pr-2 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           <Select.Value
             className="data-[placeholder]:text-neutral-600 dark:data-[placeholder]:text-neutral-400"
             placeholder="Select apple"
@@ -36,7 +36,7 @@ export default function ExampleSelect() {
                   <Select.Item
                     key={label}
                     value={value}
-                    className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-hidden select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-neutral-950 data-[highlighted]:text-white dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-neutral-950"
+                    className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-neutral-950 data-[highlighted]:text-white dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-neutral-950"
                   >
                     <Select.ItemIndicator className="col-start-1">
                       <CheckIcon className="size-3" />
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index 2486c882e9d..00259bd961e 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -33,10 +33,10 @@ export default function MultiSelectExample() {
   return (
     <div className="flex flex-col items-start gap-1">
       <Select.Root multiple defaultValue={['javascript', 'typescript']}>
-        <Select.Label className="cursor-default text-sm leading-5 font-bold text-neutral-950 dark:text-white">
+        <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Languages
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-3 pr-2 text-sm leading-5 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-3 pr-2 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           <Select.Value className="data-[placeholder]:text-neutral-600 dark:data-[placeholder]:text-neutral-400">
             {renderValue}
           </Select.Value>
@@ -55,7 +55,7 @@ export default function MultiSelectExample() {
                 <Select.Item
                   key={value}
                   value={value}
-                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-hidden select-none scroll-my-1 group-data-[side=none]:pr-12 [@media(hover:hover)]:[&[data-highlighted]]:bg-neutral-950 [@media(hover:hover)]:[&[data-highlighted]]:text-white dark:[@media(hover:hover)]:[&[data-highlighted]]:bg-white dark:[@media(hover:hover)]:[&[data-highlighted]]:text-neutral-950"
+                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none scroll-my-1 group-data-[side=none]:pr-12 [@media(hover:hover)]:[&[data-highlighted]]:bg-neutral-950 [@media(hover:hover)]:[&[data-highlighted]]:text-white dark:[@media(hover:hover)]:[&[data-highlighted]]:bg-white dark:[@media(hover:hover)]:[&[data-highlighted]]:text-neutral-950"
                 >
                   <Select.ItemIndicator className="col-start-1">
                     <CheckIcon className="size-3" />
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index d4cb337b599..eb9f1419a4d 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -6,15 +6,15 @@ export default function ObjectValueSelect() {
   return (
     <div className="flex flex-col items-start gap-1">
       <Select.Root defaultValue={shippingMethods[0]} itemToStringValue={(item) => item.id}>
-        <Select.Label className="cursor-default text-sm leading-5 font-bold text-neutral-950 dark:text-white">
+        <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Shipping method
         </Select.Label>
-        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-start justify-between gap-3 pl-3 pr-2 py-1.5 text-sm leading-5 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-start justify-between gap-3 pl-3 pr-2 py-1.5 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           <Select.Value>
             {(method: ShippingMethod) => (
               <span className="flex flex-col items-start gap-0.5">
-                <span className="text-sm leading-5">{method.name}</span>
-                <span className="text-xs leading-4 text-neutral-600 dark:text-neutral-400">
+                <span className="text-sm">{method.name}</span>
+                <span className="text-xs text-neutral-600 dark:text-neutral-400">
                   {method.duration} ({method.price})
                 </span>
               </span>
@@ -35,14 +35,14 @@ export default function ObjectValueSelect() {
                   <Select.Item
                     key={method.id}
                     value={method}
-                    className="group/item grid cursor-default grid-cols-[0.75rem_1fr] items-start gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-hidden select-none group-data-[side=none]:pr-12 [@media(hover:hover)]:[&[data-highlighted]]:bg-neutral-950 [@media(hover:hover)]:[&[data-highlighted]]:text-white dark:[@media(hover:hover)]:[&[data-highlighted]]:bg-white dark:[@media(hover:hover)]:[&[data-highlighted]]:text-neutral-950"
+                    className="group/item grid cursor-default grid-cols-[0.75rem_1fr] items-start gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none group-data-[side=none]:pr-12 [@media(hover:hover)]:[&[data-highlighted]]:bg-neutral-950 [@media(hover:hover)]:[&[data-highlighted]]:text-white dark:[@media(hover:hover)]:[&[data-highlighted]]:bg-white dark:[@media(hover:hover)]:[&[data-highlighted]]:text-neutral-950"
                   >
                     <Select.ItemIndicator className="col-start-1 flex items-center justify-center self-start relative top-[0.4em]">
                       <CheckIcon className="size-3" />
                     </Select.ItemIndicator>
                     <Select.ItemText className="col-start-2 flex flex-col gap-0.5">
-                      <span className="text-sm leading-5">{method.name}</span>
-                      <span className="text-xs leading-4 text-neutral-600 [@media(hover:hover)]:group-data-[highlighted]/item:text-neutral-400 dark:text-neutral-400 dark:[@media(hover:hover)]:group-data-[highlighted]/item:text-neutral-600">
+                      <span className="text-sm">{method.name}</span>
+                      <span className="text-xs text-neutral-600 [@media(hover:hover)]:group-data-[highlighted]/item:text-neutral-400 dark:text-neutral-400 dark:[@media(hover:hover)]:group-data-[highlighted]/item:text-neutral-600">
                         {method.duration} ({method.price})
                       </span>
                     </Select.ItemText>
diff --git a/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
index 70d8b595dea..7c4ecbc6336 100644
--- a/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
@@ -2,7 +2,7 @@ import { Switch } from '@base-ui/react/switch';
 
 export default function ExampleSwitch() {
   return (
-    <label className="flex items-center gap-2 text-sm leading-5 font-normal text-neutral-900 dark:text-neutral-50">
+    <label className="flex items-center gap-2 text-sm font-normal text-neutral-900 dark:text-neutral-50">
       <Switch.Root
         defaultChecked
         className="box-border flex h-5 w-9 shrink-0 border border-neutral-900 bg-neutral-50 p-0.5 dark:border-neutral-50 dark:bg-neutral-900 data-checked:bg-neutral-900 dark:data-checked:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
index ea3e2dc9772..d796cf4c3c6 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleToolbar() {
           render={<Toggle />}
           aria-label="Align left"
           value="align-left"
-          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-[popup-open]:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-[popup-open]:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         >
           Align Left
         </Toolbar.Button>
@@ -20,7 +20,7 @@ export default function ExampleToolbar() {
           render={<Toggle />}
           aria-label="Align right"
           value="align-right"
-          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-[popup-open]:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-[popup-open]:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         >
           Align Right
         </Toolbar.Button>
@@ -28,13 +28,13 @@ export default function ExampleToolbar() {
       <Toolbar.Separator className="m-1 h-4 w-px bg-neutral-950 dark:bg-white" />
       <Toolbar.Group className="flex" aria-label="Numerical format">
         <Toolbar.Button
-          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent font-[inherit] text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-[popup-open]:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-[popup-open]:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           aria-label="Format as currency"
         >
           $
         </Toolbar.Button>
         <Toolbar.Button
-          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent font-[inherit] text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-[popup-open]:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-[popup-open]:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           aria-label="Format as percent"
         >
           %
@@ -44,7 +44,7 @@ export default function ExampleToolbar() {
       <Select.Root defaultValue="Helvetica">
         <Toolbar.Button
           render={<Select.Trigger />}
-          className="flex h-8 min-w-32 cursor-default items-center justify-between border-0 bg-transparent px-3 font-[inherit] text-sm leading-5 font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-[popup-open]:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-32 cursor-default items-center justify-between border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-[popup-open]:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         >
           <Select.Value />
           <Select.Icon className="flex">
@@ -56,7 +56,7 @@ export default function ExampleToolbar() {
             <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto border border-neutral-950 bg-white bg-clip-padding text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:translate-y-px data-[side=none]:scale-100 data-[side=none]:opacity-100 data-[side=none]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[side=none]:data-[starting-style]:scale-100 data-[side=none]:data-[starting-style]:opacity-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.Item
                 value="Helvetica"
-                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-none select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-neutral-950 data-[highlighted]:text-white pointer-coarse:py-2.5 dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-neutral-950"
+                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-neutral-950 data-[highlighted]:text-white pointer-coarse:py-2.5 dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-neutral-950"
               >
                 <Select.ItemIndicator className="col-start-1">
                   <CheckIcon className="block size-3" />
@@ -65,7 +65,7 @@ export default function ExampleToolbar() {
               </Select.Item>
               <Select.Item
                 value="Arial"
-                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm leading-5 outline-none select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-neutral-950 data-[highlighted]:text-white pointer-coarse:py-2.5 dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-neutral-950"
+                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-neutral-950 data-[highlighted]:text-white pointer-coarse:py-2.5 dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-neutral-950"
               >
                 <Select.ItemIndicator className="col-start-1">
                   <CheckIcon className="block size-3" />
@@ -78,7 +78,7 @@ export default function ExampleToolbar() {
       </Select.Root>
       <Toolbar.Separator className="m-1 h-4 w-px bg-neutral-950 dark:bg-white" />
       <Toolbar.Link
-        className="mr-[0.875rem] ml-auto flex-none self-center font-[inherit] text-sm leading-5 text-neutral-500 no-underline hover:text-blue-700 dark:text-neutral-400 dark:hover:text-blue-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="mr-[0.875rem] ml-auto flex-none self-center font-[inherit] text-sm text-neutral-500 no-underline hover:text-blue-700 dark:text-neutral-400 dark:hover:text-blue-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         href="#"
       >
         Edited 51m ago
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
index ddb5633f99e..ed5382dc05c 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -9,7 +9,7 @@ const iconButtonClass =
   'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const buttonClass =
-  'flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-5 font-normal text-neutral-950 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
+  'flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
   'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
index 4e431e5412c..7af1a50307c 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
@@ -45,7 +45,7 @@ function ExampleForm() {
 
       <Field.Root name="region">
         <Combobox.Root items={REGIONS} required>
-          <div className="relative flex flex-col gap-1 text-sm leading-5 text-neutral-900">
+          <div className="relative flex flex-col gap-1 text-sm text-neutral-900">
             <Field.Label>Region</Field.Label>
             <Combobox.Input placeholder="e.g. eu-central-1" />
             <div className="absolute right-2 bottom-0 flex h-10 items-center justify-center text-neutral-600">
@@ -95,8 +95,8 @@ function ExampleForm() {
                   {(image: Image) => {
                     return (
                       <Autocomplete.Item key={image.url} value={image}>
-                        <span className="text-base leading-6">{image.name}</span>
-                        <span className="font-mono whitespace-nowrap text-xs leading-4 opacity-80">
+                        <span className="text-base">{image.name}</span>
+                        <span className="font-mono whitespace-nowrap text-xs opacity-80">
                           {image.url}
                         </span>
                       </Autocomplete.Item>
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
index e4eaab3f203..76b9d68fb2d 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
@@ -95,7 +95,7 @@ function ReactHookForm() {
         }) => (
           <Field.Root name={name} invalid={invalid} touched={isTouched} dirty={isDirty}>
             <Combobox.Root items={REGIONS} value={value} onValueChange={onChange}>
-              <div className="relative flex flex-col gap-1 text-sm leading-5 text-neutral-900">
+              <div className="relative flex flex-col gap-1 text-sm text-neutral-900">
                 <Field.Label>Region</Field.Label>
                 <Combobox.Input placeholder="e.g. eu-central-1" ref={ref} onBlur={onBlur} />
                 <div className="absolute right-2 bottom-0 flex h-10 items-center justify-center text-neutral-600">
@@ -162,8 +162,8 @@ function ReactHookForm() {
                       {(image: Image) => {
                         return (
                           <Autocomplete.Item key={image.url} value={image}>
-                            <span className="text-base leading-6">{image.name}</span>
-                            <span className="font-mono whitespace-nowrap text-xs leading-4 opacity-80">
+                            <span className="text-base">{image.name}</span>
+                            <span className="font-mono whitespace-nowrap text-xs opacity-80">
                               {image.url}
                             </span>
                           </Autocomplete.Item>
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
index 7ba7b9a2883..2ab532daad4 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
@@ -130,7 +130,7 @@ function TanstackForm() {
                 value={field.state.value}
                 onValueChange={field.handleChange}
               >
-                <div className="relative flex flex-col gap-1 text-sm leading-5 text-neutral-900">
+                <div className="relative flex flex-col gap-1 text-sm text-neutral-900">
                   <Field.Label>Region</Field.Label>
                   <Combobox.Input placeholder="e.g. eu-central-1" onBlur={field.handleBlur} />
                   <div className="absolute right-2 bottom-0 flex h-10 items-center justify-center text-neutral-600">
@@ -199,8 +199,8 @@ function TanstackForm() {
                         {(image: Image) => {
                           return (
                             <Autocomplete.Item key={image.url} value={image}>
-                              <span className="text-base leading-6">{image.name}</span>
-                              <span className="font-mono whitespace-nowrap text-xs leading-4 opacity-80">
+                              <span className="text-base">{image.name}</span>
+                              <span className="font-mono whitespace-nowrap text-xs opacity-80">
                                 {image.url}
                               </span>
                             </Autocomplete.Item>
diff --git a/docs/src/app/(docs)/react/handbook/styling/page.mdx b/docs/src/app/(docs)/react/handbook/styling/page.mdx
index 51729b653d3..e18d90aa821 100644
--- a/docs/src/app/(docs)/react/handbook/styling/page.mdx
+++ b/docs/src/app/(docs)/react/handbook/styling/page.mdx
@@ -77,10 +77,10 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className="outline-none" sideOffset={8}>
           <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-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-neutral-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-neutral-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-neutral-900">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-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-neutral-900">
               Add to Library
             </Menu.Item>
-            <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-neutral-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-neutral-900">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-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-neutral-900">
               Add to Playlist
             </Menu.Item>
           </Menu.Popup>

From d8901c34af2ebf771d5c44a910a25aae63570097 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 30 Apr 2026 09:42:22 +0200
Subject: [PATCH 096/257] Drawer brutalist

---
 .../demos/hero/css-modules/index.module.css   |  57 ++++----
 .../drawer/demos/hero/tailwind/index.tsx      |  16 +--
 .../css-modules/index.module.css              |  75 +++++-----
 .../demos/indent-provider/tailwind/index.tsx  |  20 +--
 .../mobile-nav/css-modules/index.module.css   | 135 +++++++++---------
 .../demos/mobile-nav/css-modules/index.tsx    |  18 +--
 .../demos/mobile-nav/tailwind/index.tsx       |  48 +++----
 .../demos/nested/css-modules/index.module.css | 106 +++++++-------
 .../drawer/demos/nested/tailwind/index.tsx    |  42 +++---
 .../non-modal/css-modules/index.module.css    |  64 ++++-----
 .../drawer/demos/non-modal/tailwind/index.tsx |  16 +--
 .../position/css-modules/index.module.css     |  58 ++++----
 .../drawer/demos/position/tailwind/index.tsx  |  16 +--
 .../snap-points/css-modules/index.module.css  |  77 +++++-----
 .../demos/snap-points/tailwind/index.tsx      |  25 ++--
 .../swipe-area/css-modules/index.module.css   |  73 +++++-----
 .../demos/swipe-area/tailwind/index.tsx       |  24 ++--
 .../uncontained/css-modules/index.module.css  |  85 ++++++-----
 .../demos/uncontained/tailwind/index.tsx      |  16 +--
 19 files changed, 490 insertions(+), 481 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
index 1bdf27f86c3..e34d801e514 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
@@ -3,33 +3,36 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-neutral-50);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-neutral-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-neutral-100);
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
-  &:active {
-    background-color: var(--color-neutral-100);
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -90,9 +93,10 @@
   padding: 1.5rem;
   padding-right: calc(1.5rem + var(--bleed));
   margin-right: calc(-1 * var(--bleed));
-  outline: 1px solid var(--color-neutral-200);
-  background-color: var(--color-neutral-50);
-  color: var(--color-neutral-900);
+  border-left: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
+  box-shadow: -0.25rem 0 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
   overscroll-behavior: contain;
   touch-action: auto;
@@ -105,7 +109,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
+    box-shadow: none;
   }
 
   &[data-starting-style],
@@ -120,6 +124,7 @@
   @supports (-webkit-touch-callout: none) {
     --bleed: 0px;
     margin-right: 0;
+    border: 1px solid light-dark(var(--color-neutral-950), white);
     border-radius: 10px;
   }
 }
@@ -131,22 +136,22 @@
 }
 
 .Title {
-  margin-top: -0.375rem;
+  margin-top: 0;
   margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
 .Description {
   margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-neutral-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .Actions {
   display: flex;
   justify-content: flex-end;
-  gap: 1rem;
+  gap: 0.75rem;
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
index 7610998fc34..5e35c9fa805 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
@@ -3,20 +3,20 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawer() {
   return (
     <Drawer.Root swipeDirection="right">
-      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
+      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open drawer
       </Drawer.Trigger>
       <Drawer.Portal>
-        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
-        <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] fixed inset-0 flex items-stretch justify-end p-[var(--viewport-padding)]">
-          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] bg-neutral-50 p-6 pr-[calc(1.5rem+3rem)] text-neutral-900 outline outline-1 outline-neutral-200 overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[ending-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[starting-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-20px)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:pr-6 dark:outline-neutral-300">
+        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
+        <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] fixed inset-0 flex items-stretch justify-end p-(--viewport-padding)">
+          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 shadow-[-0.25rem_0_0_rgb(0_0_0_/_12%)] overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Drawer.Content className="mx-auto w-full max-w-[32rem]">
-              <Drawer.Title className="-mt-1.5 mb-1 text-lg font-bold">Drawer</Drawer.Title>
-              <Drawer.Description className="mb-6 text-base text-neutral-600">
+              <Drawer.Title className="mb-1 text-base font-bold">Drawer</Drawer.Title>
+              <Drawer.Description className="mb-6 text-sm text-neutral-600 dark:text-neutral-400">
                 This is a drawer that slides in from the side. You can swipe to dismiss it.
               </Drawer.Description>
-              <div className="flex justify-end gap-4">
-                <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
+              <div className="flex justify-end gap-3">
+                <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
index 3ebe871d7e8..5b88ca4f46c 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
@@ -6,34 +6,33 @@
 }
 
 .Indent {
-  --indent-progress: var(--drawer-swipe-progress);
-  --indent-radius: calc(1rem * (1 - var(--indent-progress)));
+  --indent-radius: calc(1rem * (1 - var(--drawer-swipe-progress)));
   --indent-transition: calc(1 - clamp(0, calc(var(--drawer-swipe-progress) * 100000), 1));
   position: relative;
-  min-height: 320px;
+  min-height: 20rem;
   transition:
     transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
     border-radius 0.25s cubic-bezier(0.32, 0.72, 0, 1);
   transform-origin: center top;
   will-change: transform;
-  border: 1px solid var(--color-neutral-200);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   contain: layout;
   padding: 1rem;
-  color: var(--color-neutral-900);
-  background-color: var(--color-neutral-50);
+  color: light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   transition-duration:
     calc(400ms * var(--indent-transition)), calc(250ms * var(--indent-transition));
 
   &[data-active] {
-    transform: scale(calc(0.98 + (0.02 * var(--indent-progress))))
-      translateY(calc(0.5rem * (1 - var(--indent-progress))));
+    transform: scale(calc(0.98 + (0.02 * var(--drawer-swipe-progress))))
+      translateY(calc(0.5rem * (1 - var(--drawer-swipe-progress))));
     border-top-left-radius: var(--indent-radius);
     border-top-right-radius: var(--indent-radius);
   }
 }
 
 .Center {
-  min-height: 320px;
+  min-height: 20rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -54,33 +53,36 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-neutral-50);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-neutral-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-neutral-100);
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
-  &:active {
-    background-color: var(--color-neutral-100);
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -129,10 +131,10 @@
   margin-bottom: calc(-1 * var(--bleed));
   padding: 1rem 1.5rem 1.5rem;
   padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + var(--bleed));
-  border-radius: 1rem 1rem 0 0;
-  outline: 1px solid var(--color-neutral-200);
-  background-color: var(--color-neutral-50);
-  color: var(--color-neutral-900);
+  border-top: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
+  box-shadow: 0 -0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
   overscroll-behavior: contain;
   transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
@@ -144,7 +146,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
+    box-shadow: none;
   }
 
   &[data-starting-style],
@@ -167,29 +169,28 @@
   width: 3rem;
   height: 0.25rem;
   margin: 0 auto 1rem;
-  border-radius: 9999px;
-  background-color: var(--color-neutral-300);
+  background-color: light-dark(var(--color-neutral-300), var(--color-neutral-700));
 }
 
 .Title {
   margin-top: 0;
   margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
   text-align: center;
 }
 
 .Description {
   margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-neutral-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
   text-align: center;
 }
 
 .Actions {
   display: flex;
   justify-content: center;
-  gap: 1rem;
+  gap: 0.75rem;
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
index ded707c095b..51ff8e1da01 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
@@ -9,26 +9,26 @@ export default function ExampleDrawer() {
     <Drawer.Provider>
       <div ref={setPortalContainer} className="[--bleed:3rem] relative w-full overflow-hidden">
         <Drawer.IndentBackground className="absolute inset-0 bg-black dark:bg-neutral-300" />
-        <Drawer.Indent className="[--indent-progress:var(--drawer-swipe-progress)] [--indent-radius:calc(1rem*(1-var(--indent-progress)))] [--indent-transition:calc(1-clamp(0,calc(var(--drawer-swipe-progress)*100000),1))] relative min-h-[320px] bg-neutral-50 border border-neutral-200 p-4 text-neutral-900 [transition:transform_0.4s_cubic-bezier(0.32,0.72,0,1),border-radius_0.25s_cubic-bezier(0.32,0.72,0,1)] origin-[center_top] will-change-transform [transform:scale(1)_translateY(0)] [transition-duration:calc(400ms*var(--indent-transition)),calc(250ms*var(--indent-transition))] data-[active]:[transform:scale(calc(0.98+(0.02*var(--indent-progress))))_translateY(calc(0.5rem*(1-var(--indent-progress))))] data-[active]:[border-top-left-radius:var(--indent-radius)] data-[active]:[border-top-right-radius:var(--indent-radius)]">
-          <div className="flex min-h-[320px] items-center justify-center">
+        <Drawer.Indent className="[--indent-radius:calc(1rem*(1-var(--drawer-swipe-progress)))] [--indent-transition:calc(1-clamp(0,calc(var(--drawer-swipe-progress)*100000),1))] relative min-h-80 border border-neutral-950 bg-white p-4 text-neutral-950 [transition:transform_0.4s_cubic-bezier(0.32,0.72,0,1),border-radius_0.25s_cubic-bezier(0.32,0.72,0,1)] origin-[center_top] will-change-transform [transform:scale(1)_translateY(0)] [transition-duration:calc(400ms*var(--indent-transition)),calc(250ms*var(--indent-transition))] data-active:transform-[scale(calc(0.98+(0.02*var(--drawer-swipe-progress))))_translateY(calc(0.5rem*(1-var(--drawer-swipe-progress))))] data-active:rounded-tl-(--indent-radius) data-active:rounded-tr-(--indent-radius) dark:border-white dark:bg-neutral-950 dark:text-white">
+          <div className="flex min-h-80 items-center justify-center">
             <Drawer.Root modal={false}>
-              <Drawer.Trigger className="box-border flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
+              <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Open drawer
               </Drawer.Trigger>
               <Drawer.Portal container={portalContainer}>
-                <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] absolute inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
+                <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] absolute inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
                 <Drawer.Viewport className="absolute inset-0 flex items-end justify-center">
-                  <Drawer.Popup className="box-border w-full max-h-[calc(80vh+var(--bleed))] -mb-[var(--bleed)] rounded-t-2xl outline outline-1 outline-neutral-200 bg-neutral-50 px-6 py-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+var(--bleed))] text-neutral-900 overflow-y-auto overscroll-contain transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] [transform:translateY(var(--drawer-swipe-movement-y))] data-[swiping]:select-none data-[ending-style]:[transform:translateY(calc(100%-var(--bleed)+2px))] data-[starting-style]:[transform:translateY(calc(100%-var(--bleed)+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:outline-neutral-300">
-                    <div className="mx-auto mb-4 h-1 w-12 rounded-full bg-neutral-300" />
+                  <Drawer.Popup className="w-full max-h-[calc(80vh+var(--bleed))] -mb-[var(--bleed)] border-t border-neutral-950 bg-white px-6 py-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+var(--bleed))] text-neutral-950 shadow-[0_-0.25rem_0_rgb(0_0_0_/_12%)] overflow-y-auto overscroll-contain transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] [transform:translateY(var(--drawer-swipe-movement-y))] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-starting-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+                    <div className="mx-auto mb-4 h-1 w-12 bg-neutral-300 dark:bg-neutral-700" />
                     <Drawer.Content className="mx-auto w-full max-w-[32rem]">
-                      <Drawer.Title className="mt-0 mb-1 text-lg font-bold tracking-[-0.0025em] text-center">
+                      <Drawer.Title className="mt-0 mb-1 text-base font-bold text-center">
                         Notifications
                       </Drawer.Title>
-                      <Drawer.Description className="mb-6 text-base text-neutral-600 text-center">
+                      <Drawer.Description className="mb-6 text-sm text-neutral-600 text-center dark:text-neutral-400">
                         You are all caught up. Good job!
                       </Drawer.Description>
-                      <div className="flex justify-center gap-4">
-                        <Drawer.Close className="box-border flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
+                      <div className="flex justify-center gap-3">
+                        <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                           Close
                         </Drawer.Close>
                       </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
index 8b7fe6852ec..464b93da13f 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
@@ -3,33 +3,36 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-neutral-50);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-neutral-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-neutral-100);
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
-  &:active {
-    background-color: var(--color-neutral-100);
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -39,9 +42,8 @@
   inset: 0;
   min-height: 100dvh;
   transition-duration: 600ms;
-  transition-property: -webkit-backdrop-filter, backdrop-filter, opacity;
+  transition-property: opacity;
   transition-timing-function: var(--ease-out-fast);
-  backdrop-filter: blur(1.5px);
   background-image: linear-gradient(to bottom, rgb(0 0 0 / 5%) 0, rgb(0 0 0 / 10%) 50%);
   opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));
 
@@ -55,7 +57,6 @@
 
   &[data-starting-style],
   &[data-ending-style] {
-    backdrop-filter: blur(0);
     opacity: 0;
   }
 
@@ -99,7 +100,7 @@
   min-height: 100%;
   padding-top: 2rem;
 
-  @media (min-width: 768px) {
+  @media (min-width: 42rem) {
     padding-top: 4rem;
     padding-bottom: 4rem;
     padding-inline: 4rem;
@@ -140,47 +141,27 @@
   display: flex;
   flex-direction: column;
   padding: 1rem 1.5rem 1.5rem;
-  border-top-left-radius: 1rem;
-  border-top-right-radius: 1rem;
-  outline: 1px solid var(--color-neutral-200);
-  background-color: var(--color-neutral-50);
-  box-shadow:
-    0 10px 64px -10px rgb(36 40 52 / 20%),
-    0 0.25px 0 1px var(--color-neutral-200);
-  color: var(--color-neutral-900);
+  border-top: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+  color: light-dark(var(--color-neutral-950), white);
   transition: box-shadow 350ms cubic-bezier(0.375, 0.015, 0.545, 0.455);
 }
 
 @media (prefers-color-scheme: dark) {
   .Panel {
-    outline: 1px solid var(--color-neutral-300);
-    box-shadow: 0 0 0 1px var(--color-neutral-200);
+    box-shadow: none;
   }
 }
 
 .Popup[data-ending-style] .Panel {
-  box-shadow:
-    0 10px 64px -10px rgb(36 40 52 / 0%),
-    0 0.25px 0 1px rgb(0 0 0 / 0%);
-}
-
-@media (prefers-color-scheme: dark) {
-  .Popup[data-ending-style] .Panel {
-    box-shadow: 0 0 0 1px rgb(0 0 0 / 0%);
-  }
-}
-
-@media (min-width: 768px) {
-  .Panel {
-    border-radius: 0.75rem;
-  }
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 0%);
 }
 
 .Header {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
-  align-items: center;
-  margin-bottom: 0.75rem;
+  align-items: start;
 }
 
 .HeaderSpacer {
@@ -188,11 +169,16 @@
   height: 2.25rem;
 }
 
+@media (min-width: 42rem) {
+  .Panel {
+    border: 1px solid light-dark(var(--color-neutral-950), white);
+  }
+}
+
 .Handle {
   width: 3rem;
   height: 0.25rem;
-  border-radius: 9999px;
-  background-color: var(--color-neutral-300);
+  background-color: light-dark(var(--color-neutral-300), var(--color-neutral-700));
   justify-self: center;
 }
 
@@ -202,40 +188,39 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 9999px;
-  border: 1px solid var(--color-neutral-200);
-  background-color: var(--color-neutral-50);
-  color: var(--color-neutral-900);
+  border: 0;
+  background-color: transparent;
+  color: light-dark(var(--color-neutral-950), white);
   justify-self: end;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-100);
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
 .Title {
   margin: 0 0 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
 .Description {
   margin: 0 0 1.25rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-neutral-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .ScrollArea {
@@ -263,16 +248,32 @@
 }
 
 .Link {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
   width: 100%;
-  padding: 0.75rem 1rem;
-  border-radius: 0.75rem;
+  height: 3rem;
+  padding: 0 1rem;
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   color: inherit;
   text-decoration: none;
-  background-color: var(--color-neutral-100);
+  background-color: light-dark(white, var(--color-neutral-950));
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    }
+  }
+
+  &:active {
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -300,7 +301,7 @@
     opacity: 0;
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 42rem) {
     width: 0.4375rem;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.tsx
index d667272cf6c..d096abfa19c 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.tsx
@@ -67,14 +67,16 @@ export default function ExampleDrawerMobileNav() {
                       <div aria-hidden className={styles.HeaderSpacer} />
                       <div className={styles.Handle} />
                       <Drawer.Close aria-label="Close menu" className={styles.CloseButton}>
-                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-                          <path
-                            d="M0.75 0.75L6 6M11.25 11.25L6 6M6 6L0.75 11.25M6 6L11.25 0.75"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
+                        <svg
+                          width="16"
+                          height="16"
+                          viewBox="0 0 12 12"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="1"
+                        >
+                          <path d="M6 0.5V11.5" transform="rotate(45 6 6)" />
+                          <path d="M0.5 6H11.5" transform="rotate(45 6 6)" />
                         </svg>
                       </Drawer.Close>
                     </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
index 31f1f1832ed..318b790bea9 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
@@ -53,47 +53,47 @@ const LONG_LIST = [
 export default function ExampleDrawerMobileNav() {
   return (
     <Drawer.Root>
-      <Drawer.Trigger className="box-border flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 m-0 outline-none text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 active:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1">
+      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open mobile menu
       </Drawer.Trigger>
       <Drawer.Portal>
-        <Drawer.Backdrop className="[--backdrop-opacity:1] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-[100dvh] bg-[linear-gradient(to_bottom,rgb(0_0_0/5%)_0,rgb(0_0_0/10%)_50%)] opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-[backdrop-filter,opacity] duration-[600ms] ease-[var(--ease-out-fast)] backdrop-blur-[1.5px] supports-[-webkit-touch-callout:none]:absolute data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[starting-style]:backdrop-blur-0 data-[ending-style]:backdrop-blur-0 data-[ending-style]:duration-[350ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)]" />
+        <Drawer.Backdrop className="[--backdrop-opacity:1] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-[linear-gradient(to_bottom,rgb(0_0_0/5%)_0,rgb(0_0_0/10%)_50%)] opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-600 ease-[var(--ease-out-fast)] supports-[-webkit-touch-callout:none]:absolute data-starting-style:opacity-0 data-ending-style:opacity-0 data-ending-style:duration-350 data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)]" />
         <Drawer.Viewport className="group fixed inset-0">
           <ScrollArea.Root
             style={{ position: undefined }}
-            className="box-border h-full overscroll-contain transition-[transform,translate] duration-[600ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] group-data-[starting-style]:translate-y-[100dvh] group-data-[ending-style]:pointer-events-none"
+            className="box-border h-full overscroll-contain transition-transform duration-600 ease-[cubic-bezier(0.45,1.005,0,1.005)] group-data-starting-style:translate-y-[100dvh] group-data-ending-style:pointer-events-none"
           >
             <ScrollArea.Viewport className="box-border h-full overscroll-contain touch-auto">
-              <ScrollArea.Content className="flex min-h-full items-end justify-center pt-8 md:py-16 md:px-16">
-                <Drawer.Popup className="group box-border w-full max-w-[42rem] outline-none transition-transform duration-[800ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] [transform:translateY(var(--drawer-swipe-movement-y))] data-[swiping]:select-none data-[ending-style]:[transform:translateY(calc(max(100dvh,100%)+2px))] data-[ending-style]:duration-[350ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)]">
+              <ScrollArea.Content className="flex min-h-full items-end justify-center pt-8 min-[42rem]:px-16 min-[42rem]:py-16">
+                <Drawer.Popup className="group box-border w-full max-w-[42rem] outline-none transition-transform duration-600 ease-[cubic-bezier(0.45,1.005,0,1.005)] [transform:translateY(var(--drawer-swipe-movement-y))] data-swiping:select-none data-ending-style:[transform:translateY(calc(max(100dvh,100%)+2px))] data-ending-style:duration-350 data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] motion-reduce:transition-none">
                   <nav
                     aria-label="Navigation"
-                    className="relative flex flex-col rounded-t-2xl bg-neutral-50 px-6 pt-4 pb-6 text-neutral-900 shadow-[0_10px_64px_-10px_rgb(36_40_52/20%),0_0.25px_0_1px_oklch(12%_9%_264deg/7%)] outline outline-1 outline-neutral-200 transition-shadow duration-[350ms] ease-[cubic-bezier(0.375,0.015,0.545,0.455)] group-data-[ending-style]:shadow-[0_10px_64px_-10px_rgb(36_40_52/0%),0_0.25px_0_1px_rgb(0_0_0/0%)] dark:outline-neutral-300 dark:shadow-[0_0_0_1px_oklch(29%_0.75%_264deg/80%)] dark:group-data-[ending-style]:shadow-[0_0_0_1px_rgb(0_0_0/0%)] md:rounded-xl"
+                    className="relative flex flex-col border-t border-neutral-950 bg-white px-6 pt-4 pb-6 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-shadow duration-350 ease-[cubic-bezier(0.375,0.015,0.545,0.455)] group-data-ending-style:shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_0%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none min-[42rem]:border"
                   >
-                    <div className="mb-3 grid grid-cols-[1fr_auto_1fr] items-center">
+                    <div className="grid grid-cols-[1fr_auto_1fr] items-start">
                       <div aria-hidden className="h-9 w-9" />
-                      <div className="h-1 w-12 justify-self-center rounded-full bg-neutral-300" />
+                      <div className="h-1 w-12 justify-self-center bg-neutral-300 dark:bg-neutral-700" />
                       <Drawer.Close
                         aria-label="Close menu"
-                        className="flex h-9 w-9 items-center justify-center justify-self-end rounded-full border border-neutral-200 bg-neutral-50 text-neutral-900 hover:bg-neutral-100 active:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1"
+                        className="flex h-9 w-9 items-center justify-center justify-self-end border-0 bg-transparent text-neutral-950 hover:bg-neutral-100 active:bg-neutral-200 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
                       >
-                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-                          <path
-                            d="M0.75 0.75L6 6M11.25 11.25L6 6M6 6L0.75 11.25M6 6L11.25 0.75"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
+                        <svg
+                          width="16"
+                          height="16"
+                          viewBox="0 0 12 12"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="1"
+                        >
+                          <path d="M6 0.5V11.5" transform="rotate(45 6 6)" />
+                          <path d="M0.5 6H11.5" transform="rotate(45 6 6)" />
                         </svg>
                       </Drawer.Close>
                     </div>
 
                     <Drawer.Content className="w-full">
-                      <Drawer.Title className="m-0 mb-1 text-lg font-bold tracking-[-0.0025em]">
-                        Menu
-                      </Drawer.Title>
-                      <Drawer.Description className="m-0 mb-5 text-base text-neutral-600">
+                      <Drawer.Title className="m-0 mb-1 text-base font-bold">Menu</Drawer.Title>
+                      <Drawer.Description className="m-0 mb-5 text-sm text-neutral-600 dark:text-neutral-400">
                         Scroll the long list. Flick down from the top to dismiss.
                       </Drawer.Description>
 
@@ -102,7 +102,7 @@ export default function ExampleDrawerMobileNav() {
                           {ITEMS.map((item) => (
                             <li key={item.label} className="flex">
                               <a
-                                className="w-full rounded-xl bg-neutral-100 px-4 py-3 text-neutral-900 no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1"
+                                className="flex h-12 w-full items-center border border-neutral-950 bg-white px-4 text-sm text-neutral-950 no-underline hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
                                 href={item.href}
                               >
                                 {item.label}
@@ -118,7 +118,7 @@ export default function ExampleDrawerMobileNav() {
                           {LONG_LIST.map((item) => (
                             <li key={item.label} className="flex">
                               <a
-                                className="w-full rounded-xl bg-neutral-100 px-4 py-3 text-neutral-900 no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1"
+                                className="flex h-12 w-full items-center border border-neutral-950 bg-white px-4 text-sm text-neutral-950 no-underline hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
                                 href={item.href}
                               >
                                 {item.label}
@@ -132,7 +132,7 @@ export default function ExampleDrawerMobileNav() {
                 </Drawer.Popup>
               </ScrollArea.Content>
             </ScrollArea.Viewport>
-            <ScrollArea.Scrollbar className="pointer-events-none absolute m-[0.4rem] flex w-[0.25rem] justify-center rounded-[1rem] opacity-0 transition-opacity duration-[250ms] data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-[75ms] data-[scrolling]:delay-[0ms] hover:pointer-events-auto hover:opacity-100 hover:duration-[75ms] hover:delay-[0ms] md:w-[0.4375rem] data-[ending-style]:opacity-0 data-[ending-style]:duration-[250ms]">
+            <ScrollArea.Scrollbar className="pointer-events-none absolute m-[0.4rem] flex w-[0.25rem] justify-center rounded-[1rem] opacity-0 transition-opacity duration-250 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-75 data-scrolling:delay-[0ms] hover:pointer-events-auto hover:opacity-100 hover:duration-75 hover:delay-[0ms] data-ending-style:opacity-0 data-ending-style:duration-250 min-[42rem]:w-[0.4375rem]">
               <ScrollArea.Thumb className="w-full rounded-[inherit] bg-neutral-500 before:absolute before:content-[''] before:top-1/2 before:left-1/2 before:h-[calc(100%+1rem)] before:w-[calc(100%+1rem)] before:-translate-x-1/2 before:-translate-y-1/2" />
             </ScrollArea.Scrollbar>
           </ScrollArea.Root>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
index 839c780ce90..eb1e506b4ed 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
@@ -3,77 +3,69 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-neutral-50);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-neutral-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-neutral-100);
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
-  &:active {
-    background-color: var(--color-neutral-100);
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
 .GhostButton {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 2rem;
+  padding: 0 0.75rem;
+  margin: 0;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  background-color: transparent;
-  color: var(--color-blue);
-  border-radius: 0.25rem;
-  padding: 0.125rem 0.375rem;
-  margin: -0.125rem -0.375rem;
+  line-height: 1.25rem;
+  background-color: light-dark(var(--color-neutral-50), var(--color-neutral-900));
+  color: light-dark(var(--color-neutral-950), white);
   border: 0;
   outline: 0;
 
   @media (hover: hover) {
     &:hover {
-      background-color: color-mix(in oklch, var(--color-blue), transparent 95%);
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active {
-    background-color: color-mix(in oklch, var(--color-blue), transparent 90%);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    @media (hover: hover) {
-      &:hover {
-        background-color: color-mix(in oklch, var(--color-blue), transparent 85%);
-      }
-    }
-
-    &:active {
-      background-color: color-mix(in oklch, var(--color-blue), transparent 75%);
-    }
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -145,10 +137,10 @@
   margin-bottom: calc(-1 * var(--bleed));
   padding: 1rem 1.5rem 1.5rem;
   padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + var(--bleed));
-  border-radius: 1rem 1rem 0 0;
-  outline: 1px solid var(--color-neutral-200);
-  background-color: var(--color-neutral-50);
-  color: var(--color-neutral-900);
+  border-top: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
+  box-shadow: 0 -0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
   overscroll-behavior: contain;
   transform-origin: 50% calc(100% - var(--bleed));
@@ -169,7 +161,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
+    box-shadow: none;
   }
 
   &::after {
@@ -221,8 +213,7 @@
   width: 3rem;
   height: 0.25rem;
   margin: 0 auto 1rem;
-  border-radius: 9999px;
-  background-color: var(--color-neutral-300);
+  background-color: light-dark(var(--color-neutral-300), var(--color-neutral-700));
   transition: opacity 0.2s;
 
   [data-nested-drawer-open] & {
@@ -237,17 +228,17 @@
 .Title {
   margin-top: 0;
   margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
   text-align: center;
 }
 
 .Description {
   margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-neutral-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
   text-align: center;
 }
 
@@ -265,7 +256,7 @@
 .List {
   margin: 0 0 1.5rem;
   padding-left: 1.25rem;
-  color: var(--color-neutral-700);
+  color: light-dark(var(--color-neutral-700), var(--color-neutral-300));
 }
 
 .Field {
@@ -278,17 +269,16 @@
   font-size: 0.925rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-700);
+  color: light-dark(var(--color-neutral-700), var(--color-neutral-300));
 }
 
 .Input,
 .Textarea {
   box-sizing: border-box;
   width: 100%;
-  border-radius: 0.375rem;
-  border: 1px solid var(--color-neutral-200);
-  background-color: var(--color-neutral-50);
-  color: var(--color-neutral-900);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   padding: 0.5rem 0.625rem;
   font: inherit;
 }
@@ -299,6 +289,6 @@
 
 .Input:focus-visible,
 .Textarea:focus-visible {
-  outline: 2px solid var(--color-blue);
-  outline-offset: -1px;
+  outline: 2px solid var(--color-blue-800);
+  outline-offset: -2px;
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
index 7a23725a97c..97ddddc3eae 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
@@ -4,17 +4,17 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawerNested() {
   return (
     <Drawer.Root>
-      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
+      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open drawer stack
       </Drawer.Trigger>
       <Drawer.Portal>
-        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
+        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
         <Drawer.Viewport className="fixed inset-0 flex items-end justify-center">
           <Drawer.Popup className={popupClassName}>
             <div className={handleClassName} />
             <Drawer.Content className={contentClassName}>
-              <Drawer.Title className="mb-1 text-lg font-bold text-center">Account</Drawer.Title>
-              <Drawer.Description className="mb-6 text-base text-neutral-600 text-center">
+              <Drawer.Title className="mb-1 text-base font-bold text-center">Account</Drawer.Title>
+              <Drawer.Description className="mb-6 text-sm text-neutral-600 text-center dark:text-neutral-400">
                 Nested drawers can be styled to stack, while each drawer remains independently focus
                 managed.
               </Drawer.Description>
@@ -22,7 +22,7 @@ export default function ExampleDrawerNested() {
               <div className="flex items-center justify-end gap-4">
                 <div className="mr-auto">
                   <Drawer.Root>
-                    <Drawer.Trigger className="text-base text-blue-800 rounded px-1.5 py-0.5 -m-0.5 hover:bg-blue-800/5 active:bg-blue-800/10 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800">
+                    <Drawer.Trigger className="flex h-8 items-center justify-center bg-neutral-50 px-3 text-sm font-normal text-neutral-950 hover:bg-neutral-100 active:bg-neutral-200 dark:bg-neutral-900 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                       Security settings
                     </Drawer.Trigger>
                     <Drawer.Portal>
@@ -30,14 +30,14 @@ export default function ExampleDrawerNested() {
                         <Drawer.Popup className={popupClassName}>
                           <div className={handleClassName} />
                           <Drawer.Content className={contentClassName}>
-                            <Drawer.Title className="mb-1 text-lg font-bold text-center">
+                            <Drawer.Title className="mb-1 text-base font-bold text-center">
                               Security
                             </Drawer.Title>
-                            <Drawer.Description className="mb-6 text-base text-neutral-600 text-center">
+                            <Drawer.Description className="mb-6 text-sm text-neutral-600 text-center dark:text-neutral-400">
                               Review sign-in activity and update your security preferences.
                             </Drawer.Description>
 
-                            <ul className="mb-6 list-disc pl-5 text-neutral-700">
+                            <ul className="mb-6 list-disc pl-5 text-neutral-700 dark:text-neutral-300">
                               <li>Passkeys enabled</li>
                               <li>2FA via authenticator app</li>
                               <li>3 signed-in devices</li>
@@ -46,7 +46,7 @@ export default function ExampleDrawerNested() {
                             <div className="flex items-center justify-end gap-4">
                               <div className="mr-auto">
                                 <Drawer.Root>
-                                  <Drawer.Trigger className="text-base text-blue-800 rounded px-1.5 py-0.5 -m-0.5 hover:bg-blue-800/5 active:bg-blue-800/10 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800">
+                                  <Drawer.Trigger className="flex h-8 items-center justify-center bg-neutral-50 px-3 text-sm font-normal text-neutral-950 hover:bg-neutral-100 active:bg-neutral-200 dark:bg-neutral-900 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                                     Advanced options
                                   </Drawer.Trigger>
                                   <Drawer.Portal>
@@ -54,45 +54,45 @@ export default function ExampleDrawerNested() {
                                       <Drawer.Popup className={popupClassName}>
                                         <div className={handleClassName} />
                                         <Drawer.Content className={contentClassName}>
-                                          <Drawer.Title className="mb-1 text-lg font-bold text-center">
+                                          <Drawer.Title className="mb-1 text-base font-bold text-center">
                                             Advanced
                                           </Drawer.Title>
-                                          <Drawer.Description className="mb-6 text-base text-neutral-600 text-center">
+                                          <Drawer.Description className="mb-6 text-sm text-neutral-600 text-center dark:text-neutral-400">
                                             This drawer is taller to demonstrate variable-height
                                             stacking.
                                           </Drawer.Description>
 
                                           <div className="grid gap-1.5 mb-4">
                                             <label
-                                              className="text-sm font-bold text-neutral-700"
+                                              className="text-sm font-bold text-neutral-700 dark:text-neutral-300"
                                               htmlFor="device-name-tw"
                                             >
                                               Device name
                                             </label>
                                             <input
                                               id="device-name-tw"
-                                              className="w-full rounded-md border border-neutral-200 bg-neutral-50 px-2.5 py-2 text-neutral-900 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 font-normal"
+                                              className="w-full border border-neutral-950 bg-white px-2.5 py-2 font-normal text-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
                                               defaultValue="Personal laptop"
                                             />
                                           </div>
 
                                           <div className="grid gap-1.5 mb-4">
                                             <label
-                                              className="text-sm font-bold text-neutral-700"
+                                              className="text-sm font-bold text-neutral-700 dark:text-neutral-300"
                                               htmlFor="notes-tw"
                                             >
                                               Notes
                                             </label>
                                             <textarea
                                               id="notes-tw"
-                                              className="w-full rounded-md border border-neutral-200 bg-neutral-50 px-2.5 py-2 text-neutral-900 resize-y focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 font-normal"
+                                              className="w-full resize-y border border-neutral-950 bg-white px-2.5 py-2 font-normal text-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
                                               defaultValue="Rotate recovery codes and revoke older sessions."
                                               rows={3}
                                             />
                                           </div>
 
                                           <div className="flex justify-end">
-                                            <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
+                                            <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                                               Done
                                             </Drawer.Close>
                                           </div>
@@ -103,7 +103,7 @@ export default function ExampleDrawerNested() {
                                 </Drawer.Root>
                               </div>
 
-                              <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
+                              <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                                 Close
                               </Drawer.Close>
                             </div>
@@ -114,7 +114,7 @@ export default function ExampleDrawerNested() {
                   </Drawer.Root>
                 </div>
 
-                <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
+                <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                   Close
                 </Drawer.Close>
               </div>
@@ -127,10 +127,10 @@ export default function ExampleDrawerNested() {
 }
 
 const popupClassName =
-  "[--bleed:3rem] [--peek:1rem] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))] group/popup relative -mb-[3rem] w-full max-h-[calc(80vh+3rem)] [height:var(--drawer-height,auto)] rounded-t-2xl bg-neutral-50 px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] text-neutral-900 outline outline-1 outline-neutral-200 overflow-y-auto overscroll-contain touch-auto [transform-origin:50%_calc(100%-var(--bleed))] [transform:translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] after:absolute after:inset-0 after:rounded-[inherit] after:bg-transparent after:pointer-events-none after:content-[''] after:transition-[background-color] after:duration-[450ms] after:ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[swiping]:duration-0 data-[nested-drawer-swiping]:duration-0 data-[starting-style]:[transform:translateY(calc(100%-var(--bleed)+2px))] data-[ending-style]:[transform:translateY(calc(100%-var(--bleed)+2px))] data-[ending-style]:opacity-[0.9999] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[ending-style]:data-[swiping]:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[ending-style]:data-[nested-drawer-swiping]:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[nested-drawer-open]:h-[calc(var(--height)+var(--bleed))] data-[nested-drawer-open]:overflow-hidden data-[nested-drawer-open]:after:bg-black/5 dark:outline-neutral-300 [transition:transform_450ms_cubic-bezier(0.32,0.72,0,1),height_450ms_cubic-bezier(0.32,0.72,0,1),opacity_450ms_cubic-bezier(0.32,0.72,0,1)]";
+  "[--bleed:3rem] [--peek:1rem] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))] group/popup relative -mb-[3rem] w-full max-h-[calc(80vh+3rem)] [height:var(--drawer-height,auto)] border-t border-neutral-950 bg-white px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] text-neutral-950 shadow-[0_-0.25rem_0_rgb(0_0_0_/_12%)] overflow-y-auto overscroll-contain touch-auto [transform-origin:50%_calc(100%-var(--bleed))] [transform:translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] after:absolute after:inset-0 after:rounded-[inherit] after:bg-transparent after:pointer-events-none after:content-[''] after:transition-[background-color] after:duration-[450ms] after:ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-swiping:duration-0 data-nested-drawer-swiping:duration-0 data-starting-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-open:h-[calc(var(--height)+var(--bleed))] data-nested-drawer-open:overflow-hidden data-nested-drawer-open:after:bg-black/5 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none [transition:transform_450ms_cubic-bezier(0.32,0.72,0,1),height_450ms_cubic-bezier(0.32,0.72,0,1),opacity_450ms_cubic-bezier(0.32,0.72,0,1)]";
 
 const contentClassName =
-  'mx-auto w-full max-w-[32rem] transition-opacity duration-[300ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] group-data-[nested-drawer-open]/popup:opacity-0 group-data-[nested-drawer-swiping]/popup:opacity-100';
+  'mx-auto w-full max-w-[32rem] transition-opacity duration-[300ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] group-data-nested-drawer-open/popup:opacity-0 group-data-nested-drawer-swiping/popup:opacity-100';
 
 const handleClassName =
-  'mx-auto mb-4 h-1 w-12 rounded-full bg-neutral-300 transition-opacity duration-[200ms] group-data-[nested-drawer-open]/popup:opacity-0 group-data-[nested-drawer-swiping]/popup:opacity-100';
+  'mx-auto mb-4 h-1 w-12 bg-neutral-300 transition-opacity duration-[200ms] group-data-nested-drawer-open/popup:opacity-0 group-data-nested-drawer-swiping/popup:opacity-100 dark:bg-neutral-700';
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
index d1d9e955a67..27f40d9af76 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
@@ -3,33 +3,36 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-neutral-50);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-neutral-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-neutral-100);
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
-  &:active {
-    background-color: var(--color-neutral-100);
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -91,16 +94,14 @@
   padding: 1.5rem;
   padding-right: calc(1.5rem + var(--bleed));
   margin-right: calc(-1 * var(--bleed));
-  outline: 1px solid var(--color-neutral-200);
-  background-color: var(--color-neutral-50);
-  color: var(--color-neutral-900);
+  border-left: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   overflow-y: auto;
   overscroll-behavior: contain;
   touch-action: auto;
   pointer-events: auto;
-  box-shadow:
-    0 -16px 48px rgb(0 0 0 / 0.12),
-    0 6px 18px rgb(0 0 0 / 0.06);
+  box-shadow: -0.25rem 0 0 rgb(0 0 0 / 12%);
   transition:
     transform 450ms cubic-bezier(0.32, 0.72, 0, 1),
     box-shadow 450ms cubic-bezier(0.32, 0.72, 0, 1);
@@ -112,15 +113,13 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
+    box-shadow: none;
   }
 
   &[data-starting-style],
   &[data-ending-style] {
     transform: translateX(calc(100% - var(--bleed) + var(--viewport-padding) + 2px));
-    box-shadow:
-      0 -16px 48px rgb(0 0 0 / 0),
-      0 6px 18px rgb(0 0 0 / 0);
+    box-shadow: -0.25rem 0 0 rgb(0 0 0 / 0%);
   }
 
   &[data-ending-style] {
@@ -130,6 +129,7 @@
   @supports (-webkit-touch-callout: none) {
     --bleed: 0px;
     margin-right: 0;
+    border: 1px solid light-dark(var(--color-neutral-950), white);
     border-radius: 10px;
   }
 }
@@ -141,22 +141,22 @@
 }
 
 .Title {
-  margin-top: -0.375rem;
+  margin-top: 0;
   margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
 .Description {
   margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-neutral-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .Actions {
   display: flex;
   justify-content: flex-end;
-  gap: 1rem;
+  gap: 0.75rem;
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
index 7586e77626c..991c6d87a66 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
@@ -3,22 +3,20 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawer() {
   return (
     <Drawer.Root swipeDirection="right" modal={false} disablePointerDismissal>
-      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
+      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open non-modal drawer
       </Drawer.Trigger>
       <Drawer.Portal>
-        <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] fixed inset-0 flex items-stretch justify-end p-[var(--viewport-padding)] pointer-events-none">
-          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] pointer-events-auto h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] bg-neutral-50 p-6 pr-[calc(1.5rem+3rem)] text-neutral-900 outline outline-1 outline-neutral-200 overflow-y-auto overscroll-contain touch-auto shadow-[0_-16px_48px_rgb(0_0_0/0.12),0_6px_18px_rgb(0_0_0/0.06)] data-[starting-style]:shadow-[0_-16px_48px_rgb(0_0_0/0),0_6px_18px_rgb(0_0_0/0)] data-[ending-style]:shadow-[0_-16px_48px_rgb(0_0_0/0),0_6px_18px_rgb(0_0_0/0)] [transform:translateX(var(--drawer-swipe-movement-x))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[ending-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[starting-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-20px)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:pr-6 dark:outline-neutral-300">
+        <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] fixed inset-0 flex items-stretch justify-end p-(--viewport-padding) pointer-events-none">
+          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] pointer-events-auto h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 shadow-[-0.25rem_0_0_rgb(0_0_0_/_12%)] overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:shadow-[-0.25rem_0_0_rgb(0_0_0_/_0%)] data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:shadow-[-0.25rem_0_0_rgb(0_0_0_/_0%)] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Drawer.Content className="mx-auto w-full max-w-[32rem]">
-              <Drawer.Title className="-mt-1.5 mb-1 text-lg font-bold">
-                Non-modal drawer
-              </Drawer.Title>
-              <Drawer.Description className="mb-6 text-base text-neutral-600">
+              <Drawer.Title className="mb-1 text-base font-bold">Non-modal drawer</Drawer.Title>
+              <Drawer.Description className="mb-6 text-sm text-neutral-600 dark:text-neutral-400">
                 This drawer does not trap focus and ignores outside clicks. Use the close button or
                 swipe to dismiss it.
               </Drawer.Description>
-              <div className="flex justify-end gap-4">
-                <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
+              <div className="flex justify-end gap-3">
+                <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
index f48c29f6fea..51ef508466a 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
@@ -3,33 +3,36 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-neutral-50);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-neutral-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-neutral-100);
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
-  &:active {
-    background-color: var(--color-neutral-100);
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -79,10 +82,10 @@
   margin-bottom: calc(-1 * var(--bleed));
   padding: 1rem 1.5rem 1.5rem;
   padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + var(--bleed));
-  border-radius: 1rem 1rem 0 0;
-  outline: 1px solid var(--color-neutral-200);
-  background-color: var(--color-neutral-50);
-  color: var(--color-neutral-900);
+  border-top: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
+  box-shadow: 0 -0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
   overscroll-behavior: contain;
   transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
@@ -94,7 +97,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
+    box-shadow: none;
   }
 
   &[data-starting-style],
@@ -117,29 +120,28 @@
   width: 3rem;
   height: 0.25rem;
   margin: 0 auto 1rem;
-  border-radius: 9999px;
-  background-color: var(--color-neutral-300);
+  background-color: light-dark(var(--color-neutral-300), var(--color-neutral-700));
 }
 
 .Title {
   margin-top: 0;
   margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
   text-align: center;
 }
 
 .Description {
   margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-neutral-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
   text-align: center;
 }
 
 .Actions {
   display: flex;
   justify-content: center;
-  gap: 1rem;
+  gap: 0.75rem;
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
index f7f686c0744..9d9c3d621d9 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
@@ -3,23 +3,23 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawer() {
   return (
     <Drawer.Root>
-      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
+      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open bottom drawer
       </Drawer.Trigger>
       <Drawer.Portal>
-        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
+        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
         <Drawer.Viewport className="fixed inset-0 flex items-end justify-center">
-          <Drawer.Popup className="-mb-[3rem] w-full max-h-[calc(80vh+3rem)] rounded-t-2xl bg-neutral-50 px-6 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] pt-4 text-neutral-900 outline outline-1 outline-neutral-200 overflow-y-auto overscroll-contain touch-auto [transform:translateY(var(--drawer-swipe-movement-y))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[ending-style]:[transform:translateY(calc(100%-3rem+2px))] data-[starting-style]:[transform:translateY(calc(100%-3rem+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:outline-neutral-300">
-            <div className="w-12 h-1 mx-auto mb-4 rounded-full bg-neutral-300" />
+          <Drawer.Popup className="-mb-[3rem] w-full max-h-[calc(80vh+3rem)] border-t border-neutral-950 bg-white px-6 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] pt-4 text-neutral-950 shadow-[0_-0.25rem_0_rgb(0_0_0_/_12%)] overflow-y-auto overscroll-contain touch-auto [transform:translateY(var(--drawer-swipe-movement-y))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%-3rem+2px))] data-starting-style:[transform:translateY(calc(100%-3rem+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <div className="mx-auto mb-4 h-1 w-12 bg-neutral-300 dark:bg-neutral-700" />
             <Drawer.Content className="mx-auto w-full max-w-[32rem]">
-              <Drawer.Title className="mb-1 text-lg font-bold text-center">
+              <Drawer.Title className="mb-1 text-base font-bold text-center">
                 Notifications
               </Drawer.Title>
-              <Drawer.Description className="mb-6 text-base text-neutral-600 text-center">
+              <Drawer.Description className="mb-6 text-sm text-neutral-600 text-center dark:text-neutral-400">
                 You are all caught up. Good job!
               </Drawer.Description>
-              <div className="flex justify-center gap-4">
-                <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
+              <div className="flex justify-center gap-3">
+                <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
index 86fdb6ce0b0..5a9b216472c 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
@@ -3,33 +3,36 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-neutral-50);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-neutral-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-neutral-100);
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
-  &:active {
-    background-color: var(--color-neutral-100);
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -74,7 +77,7 @@
 
 .Content {
   width: 100%;
-  max-width: 350px;
+  max-width: 22.5rem;
   margin: 0 auto;
 }
 
@@ -87,15 +90,12 @@
   width: 100%;
   max-height: calc(100dvh - var(--top-margin));
   padding-bottom: max(0px, calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y)));
-  border-radius: 1rem 1rem 0 0;
-  outline: 1px solid var(--color-neutral-200);
-  background-color: var(--color-neutral-50);
-  color: var(--color-neutral-900);
+  border-top: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   overflow: visible;
   touch-action: none;
-  box-shadow:
-    0 -16px 48px rgb(0 0 0 / 0.12),
-    0 6px 18px rgb(0 0 0 / 0.06);
+  box-shadow: 0 -0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 450ms cubic-bezier(0.32, 0.72, 0, 1),
     box-shadow 450ms cubic-bezier(0.32, 0.72, 0, 1);
@@ -117,16 +117,14 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
+    box-shadow: none;
   }
 
   &[data-starting-style],
   &[data-ending-style] {
     transform: translateY(calc(100% + 2px));
     padding-bottom: 0;
-    box-shadow:
-      0 -16px 48px rgb(0 0 0 / 0),
-      0 6px 18px rgb(0 0 0 / 0);
+    box-shadow: 0 -0.25rem 0 rgb(0 0 0 / 0%);
   }
 
   &[data-ending-style] {
@@ -136,13 +134,9 @@
 
 .DragArea {
   flex-shrink: 0;
-  padding: 0.875rem 1.5rem 0.75rem;
-  border-bottom: 1px solid var(--color-neutral-200);
+  padding: 0.875rem 1.5rem 1rem;
+  border-bottom: 1px solid light-dark(var(--color-neutral-300), var(--color-neutral-700));
   touch-action: none;
-
-  @media (prefers-color-scheme: dark) {
-    border-bottom-color: var(--color-neutral-300);
-  }
 }
 
 .Scroll {
@@ -159,14 +153,13 @@
   height: 0.25rem;
   margin: 0 auto 0.625rem;
   flex-shrink: 0;
-  border-radius: 9999px;
-  background-color: var(--color-neutral-300);
+  background-color: light-dark(var(--color-neutral-300), var(--color-neutral-700));
 }
 
 .Title {
   margin: 0;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
   text-align: center;
   cursor: default;
@@ -174,9 +167,9 @@
 
 .Description {
   margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-neutral-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
   text-align: center;
 }
 
@@ -196,9 +189,7 @@
 
 .Card {
   height: 3rem;
-  border-radius: 0.75rem;
-  border: 1px solid var(--color-neutral-200);
-  background-color: var(--color-neutral-100);
+  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
index 398d969e9c4..023fafec5e3 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
@@ -14,37 +14,34 @@ const snapPoints = [...VISIBLE_SNAP_POINTS_REM.map(toViewportSnapPoint), 1];
 export default function ExampleDrawerSnapPoints() {
   return (
     <Drawer.Root snapPoints={snapPoints}>
-      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
+      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open snap drawer
       </Drawer.Trigger>
       <Drawer.Portal>
-        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
+        <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
         <Drawer.Viewport className="fixed inset-0 flex items-end justify-center touch-none">
           <Drawer.Popup
-            className="relative flex w-full max-h-[calc(100dvh-var(--top-margin))] min-h-0 flex-col overflow-visible rounded-t-2xl bg-neutral-50 text-neutral-900 outline outline-1 outline-neutral-200 touch-none shadow-[0_-16px_48px_rgb(0_0_0/0.12),0_6px_18px_rgb(0_0_0/0.06)] [--bleed:3rem] [padding-bottom:max(0px,calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] [transform:translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-[var(--bleed)] after:bg-neutral-50 after:content-[''] data-[swiping]:select-none data-[ending-style]:[transform:translateY(calc(100%+2px))] data-[starting-style]:[transform:translateY(calc(100%+2px))] data-[starting-style]:[padding-bottom:0] data-[ending-style]:[padding-bottom:0] data-[starting-style]:shadow-[0_-16px_48px_rgb(0_0_0/0),0_6px_18px_rgb(0_0_0/0)] data-[ending-style]:shadow-[0_-16px_48px_rgb(0_0_0/0),0_6px_18px_rgb(0_0_0/0)] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:outline-neutral-300"
+            className="relative flex w-full max-h-[calc(100dvh-var(--top-margin))] min-h-0 flex-col overflow-visible border-t border-neutral-950 bg-white text-neutral-950 touch-none shadow-[0_-0.25rem_0_rgb(0_0_0_/_12%)] [--bleed:3rem] [padding-bottom:max(0px,calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] [transform:translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-[var(--bleed)] after:bg-[inherit] after:content-[''] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%+2px))] data-starting-style:[transform:translateY(calc(100%+2px))] data-starting-style:[padding-bottom:0] data-ending-style:[padding-bottom:0] data-starting-style:shadow-[0_-0.25rem_0_rgb(0_0_0_/_0%)] data-ending-style:shadow-[0_-0.25rem_0_rgb(0_0_0_/_0%)] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             style={{ '--top-margin': `${TOP_MARGIN_REM}rem` } as React.CSSProperties}
           >
-            <div className="shrink-0 border-b border-neutral-200 px-6 pt-3.5 pb-3 touch-none dark:border-neutral-300">
-              <div className="mx-auto h-1 w-12 rounded-full bg-neutral-300" />
-              <Drawer.Title className="mt-2.5 cursor-default text-center text-lg font-bold">
+            <div className="shrink-0 border-b border-neutral-300 px-6 pt-3.5 pb-4 touch-none dark:border-neutral-700">
+              <div className="mx-auto mb-2.5 h-1 w-12 shrink-0 bg-neutral-300 dark:bg-neutral-700" />
+              <Drawer.Title className="cursor-default text-center text-base font-bold">
                 Snap points
               </Drawer.Title>
             </div>
             <Drawer.Content className="min-h-0 flex-1 overflow-y-auto overscroll-contain touch-auto px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px))]">
-              <div className="mx-auto w-full max-w-[350px]">
-                <Drawer.Description className="mb-4 text-base text-neutral-600 text-center">
+              <div className="mx-auto w-full max-w-90">
+                <Drawer.Description className="mb-4 text-sm text-neutral-600 text-center dark:text-neutral-400">
                   Drag the sheet to snap between a compact peek and a near full-height view.
                 </Drawer.Description>
                 <div className="grid gap-3 mb-6" aria-hidden>
                   {Array.from({ length: 20 }, (_, index) => (
-                    <div
-                      key={index}
-                      className="h-12 rounded-xl border border-neutral-200 bg-neutral-100"
-                    />
+                    <div key={index} className="h-12 bg-neutral-200 dark:bg-neutral-700" />
                   ))}
                 </div>
-                <div className="flex items-center justify-end gap-4">
-                  <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
+                <div className="flex items-center justify-end gap-3">
+                  <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                     Close
                   </Drawer.Close>
                 </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
index a308732d5d3..0a6091be579 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
@@ -1,15 +1,15 @@
 .Root {
   position: relative;
   width: 100%;
-  min-height: 320px;
+  min-height: 20rem;
   overflow: hidden;
-  border: 1px solid var(--color-neutral-200);
-  background-color: var(--color-neutral-50);
-  color: var(--color-neutral-900);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Center {
-  min-height: 320px;
+  min-height: 20rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -26,9 +26,9 @@
 
 .Hint {
   margin: 0;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-neutral-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
   text-align: center;
   padding-right: 3rem;
 }
@@ -67,33 +67,36 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-neutral-50);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-neutral-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-neutral-100);
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
-  &:active {
-    background-color: var(--color-neutral-100);
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -150,9 +153,10 @@
   padding: 1.5rem;
   padding-right: calc(1.5rem + var(--bleed));
   margin-right: calc(-1 * var(--bleed));
-  outline: 1px solid var(--color-neutral-200);
-  background-color: var(--color-neutral-50);
-  color: var(--color-neutral-900);
+  border-left: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
+  box-shadow: -0.25rem 0 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
   touch-action: auto;
   transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
@@ -164,7 +168,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
+    box-shadow: none;
   }
 
   &[data-starting-style],
@@ -179,6 +183,7 @@
   @supports (-webkit-touch-callout: none) {
     --bleed: 0px;
     margin-right: 0;
+    border: 1px solid light-dark(var(--color-neutral-950), white);
     border-radius: 10px;
   }
 }
@@ -190,22 +195,22 @@
 }
 
 .Title {
-  margin-top: -0.375rem;
+  margin-top: 0;
   margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
 .Description {
   margin: 0 0 1.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-neutral-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .Actions {
   display: flex;
   justify-content: flex-end;
-  gap: 1rem;
+  gap: 0.75rem;
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
index 9683c13efb2..52e9e3b190b 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
@@ -8,30 +8,30 @@ export default function ExampleDrawerSwipeArea() {
   return (
     <div
       ref={setPortalContainer}
-      className="relative min-h-[320px] w-full overflow-hidden border border-neutral-200 bg-neutral-50 text-neutral-900"
+      className="relative min-h-80 w-full overflow-hidden border border-neutral-950 bg-white text-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white"
     >
       <Drawer.Root swipeDirection="right" modal={false}>
-        <Drawer.SwipeArea className="absolute inset-y-0 right-0 z-10 box-border w-10 border-l-2 border-dashed border-blue-800 bg-blue-800/10">
-          <span className="pointer-events-none absolute right-0 top-1/2 mr-2 -translate-y-1/2 -rotate-90 origin-center whitespace-nowrap text-xs font-bold tracking-[0.12em] text-blue-800 uppercase">
+        <Drawer.SwipeArea className="absolute inset-y-0 right-0 z-[1] box-border w-10 border-l-2 border-dashed border-blue-800 bg-blue-800/10 dark:border-blue-500 dark:bg-blue-500/10">
+          <span className="pointer-events-none absolute right-0 top-1/2 z-0 mr-2 -translate-y-1/2 -rotate-90 origin-center whitespace-nowrap text-xs font-bold tracking-[0.12em] text-blue-800 uppercase dark:text-blue-500">
             Swipe here
           </span>
         </Drawer.SwipeArea>
-        <div className="flex min-h-[320px] flex-col items-center justify-center gap-3 px-4 text-center">
-          <p className="text-base text-neutral-600 text-center pr-12">
+        <div className="flex min-h-80 flex-col items-center justify-center gap-3 p-4 text-center">
+          <p className="text-sm text-neutral-600 text-center dark:text-neutral-400 pr-12">
             Swipe from the right edge to open the drawer.
           </p>
         </div>
         <Drawer.Portal container={portalContainer}>
-          <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] absolute inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
-          <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] absolute inset-0 z-20 flex items-stretch justify-end p-[var(--viewport-padding)]">
-            <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] bg-neutral-50 p-6 pr-[calc(1.5rem+3rem)] text-neutral-900 outline outline-1 outline-neutral-200 overflow-y-auto touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[ending-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[starting-style]:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-20px)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:pr-6 dark:outline-neutral-300">
+          <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] absolute inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
+          <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] absolute inset-0 z-20 flex items-stretch justify-end p-(--viewport-padding)">
+            <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 shadow-[-0.25rem_0_0_rgb(0_0_0_/_12%)] overflow-y-auto touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Drawer.Content className="mx-auto w-full max-w-[32rem]">
-                <Drawer.Title className="-mt-1.5 mb-1 text-lg font-bold">Library</Drawer.Title>
-                <Drawer.Description className="mb-6 text-base text-neutral-600">
+                <Drawer.Title className="mb-1 text-base font-bold">Library</Drawer.Title>
+                <Drawer.Description className="mb-6 text-sm text-neutral-600 dark:text-neutral-400">
                   Swipe from the edge whenever you want to jump back into your playlists.
                 </Drawer.Description>
-                <div className="flex justify-end gap-4">
-                  <Drawer.Close className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
+                <div className="flex justify-end gap-3">
+                  <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                     Close
                   </Drawer.Close>
                 </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
index d1fbd20f27e..ba6dc25374d 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
@@ -3,29 +3,36 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
-  outline: 0;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-neutral-50);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-neutral-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-neutral-100);
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  }
+
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -74,7 +81,7 @@
 .Popup {
   box-sizing: border-box;
   width: 100%;
-  max-width: 28rem;
+  max-width: 20rem;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
@@ -101,14 +108,14 @@
 
 .Surface {
   pointer-events: auto;
-  border-radius: 1rem;
-  outline: 1px solid var(--color-neutral-200);
-  background-color: var(--color-neutral-50);
-  color: var(--color-neutral-900);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow: hidden;
 
   @media (prefers-color-scheme: dark) {
-    outline-color: var(--color-neutral-300);
+    box-shadow: none;
   }
 }
 
@@ -119,70 +126,80 @@
 }
 
 .Action:not(:first-child) {
-  border-top: 1px solid var(--color-neutral-200);
+  border-top: 1px solid light-dark(var(--color-neutral-950), white);
 }
 
 .ActionButton {
   box-sizing: border-box;
   width: 100%;
+  height: 2.5rem;
   margin: 0;
-  padding: 1rem 1.25rem;
+  padding: 0 1.25rem;
   border: 0;
   background-color: transparent;
   font-family: inherit;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   text-align: center;
   color: inherit;
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
+  &:active {
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  }
+
   &:focus-visible {
     outline: 0;
-    background-color: var(--color-neutral-100);
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 }
 
 .DangerSurface {
   pointer-events: auto;
-  border-radius: 1rem;
-  outline: 1px solid var(--color-neutral-200);
-  background-color: var(--color-neutral-50);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow: hidden;
 
   @media (prefers-color-scheme: dark) {
-    outline-color: var(--color-neutral-300);
+    box-shadow: none;
   }
 }
 
 .DangerButton {
   box-sizing: border-box;
   width: 100%;
+  height: 2.5rem;
   margin: 0;
-  padding: 1rem 1.25rem;
+  padding: 0 1.25rem;
   border: 0;
   background-color: transparent;
   font-family: inherit;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   text-align: center;
   color: var(--color-red);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
+  &:active {
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  }
+
   &:focus-visible {
     outline: 0;
-    background-color: var(--color-neutral-100);
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
index 4e8337e48a5..6e8b845a3cc 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
@@ -9,21 +9,21 @@ export default function ExampleDrawerUncontained() {
 
   return (
     <Drawer.Root open={open} onOpenChange={setOpen}>
-      <Drawer.Trigger className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800">
+      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open action sheet
       </Drawer.Trigger>
       <Drawer.Portal>
-        <Drawer.Backdrop className="[--backdrop-opacity:0.4] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute dark:[--backdrop-opacity:0.7]" />
+        <Drawer.Backdrop className="[--backdrop-opacity:0.4] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-starting-style:opacity-0 data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute dark:[--backdrop-opacity:0.7]" />
         <Drawer.Viewport className="fixed inset-0 flex items-end justify-center">
-          <Drawer.Popup className="box-border pointer-events-none flex w-full max-w-[28rem] flex-col gap-3 px-4 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] outline-none focus-visible:outline-none [transform:translateY(var(--drawer-swipe-movement-y))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[starting-style]:[transform:translateY(calc(100%+1rem+2px))] data-[ending-style]:[transform:translateY(calc(100%+1rem+2px))] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)]">
-            <Drawer.Content className="pointer-events-auto overflow-hidden rounded-2xl bg-neutral-50 text-neutral-900 outline outline-1 outline-neutral-200 dark:outline-neutral-300">
+          <Drawer.Popup className="pointer-events-none flex w-full max-w-[20rem] flex-col gap-3 px-4 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] outline-none focus-visible:outline-none [transform:translateY(var(--drawer-swipe-movement-y))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-starting-style:[transform:translateY(calc(100%+1rem+2px))] data-ending-style:[transform:translateY(calc(100%+1rem+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)]">
+            <Drawer.Content className="pointer-events-auto overflow-hidden border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Drawer.Title className="sr-only">Profile actions</Drawer.Title>
               <Drawer.Description className="sr-only">
                 Choose an action for this user.
               </Drawer.Description>
 
               <ul
-                className="m-0 list-none divide-y divide-neutral-200 p-0"
+                className="m-0 list-none divide-y divide-neutral-950 p-0 dark:divide-white"
                 aria-label="Profile actions"
               >
                 {ACTIONS.map((action, index) => (
@@ -33,7 +33,7 @@ export default function ExampleDrawerUncontained() {
                     )}
                     <button
                       type="button"
-                      className="block w-full border-0 bg-transparent px-5 py-4 text-center text-base text-neutral-900 select-none hover:bg-neutral-100 focus-visible:bg-neutral-100 focus-visible:outline-none"
+                      className="h-10 w-full border-0 bg-transparent px-5 text-center text-sm text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:bg-neutral-100 focus-visible:outline-none dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:focus-visible:bg-neutral-800"
                       onClick={() => setOpen(false)}
                     >
                       {action}
@@ -42,10 +42,10 @@ export default function ExampleDrawerUncontained() {
                 ))}
               </ul>
             </Drawer.Content>
-            <div className="pointer-events-auto overflow-hidden rounded-2xl bg-neutral-50 outline outline-1 outline-neutral-200 dark:outline-neutral-300">
+            <div className="pointer-events-auto overflow-hidden border border-neutral-950 bg-white shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:shadow-none">
               <button
                 type="button"
-                className="block w-full border-0 bg-transparent px-5 py-4 text-center text-base text-red-700 select-none hover:bg-neutral-100 focus-visible:bg-neutral-100 focus-visible:outline-none"
+                className="h-10 w-full border-0 bg-transparent px-5 text-center text-sm text-red-700 select-none dark:text-red-400 hover:bg-neutral-100 active:bg-neutral-200 focus-visible:bg-neutral-100 focus-visible:outline-none dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:focus-visible:bg-neutral-800"
                 onClick={() => setOpen(false)}
               >
                 Block User

From c7908636fd94200779db3f27baf2e6301e75118d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 30 Apr 2026 09:52:55 +0200
Subject: [PATCH 097/257] Drawer: remove outline

---
 .../components/drawer/demos/hero/css-modules/index.module.css   | 1 +
 .../react/components/drawer/demos/hero/tailwind/index.tsx       | 2 +-
 .../drawer/demos/indent-provider/css-modules/index.module.css   | 1 +
 .../components/drawer/demos/indent-provider/tailwind/index.tsx  | 2 +-
 .../components/drawer/demos/nested/css-modules/index.module.css | 1 +
 .../react/components/drawer/demos/nested/tailwind/index.tsx     | 2 +-
 .../drawer/demos/non-modal/css-modules/index.module.css         | 1 +
 .../react/components/drawer/demos/non-modal/tailwind/index.tsx  | 2 +-
 .../drawer/demos/position/css-modules/index.module.css          | 1 +
 .../react/components/drawer/demos/position/tailwind/index.tsx   | 2 +-
 .../drawer/demos/snap-points/css-modules/index.module.css       | 1 +
 .../components/drawer/demos/snap-points/tailwind/index.tsx      | 2 +-
 .../drawer/demos/swipe-area/css-modules/index.module.css        | 1 +
 .../react/components/drawer/demos/swipe-area/tailwind/index.tsx | 2 +-
 14 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
index e34d801e514..cd55975c1ff 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
@@ -96,6 +96,7 @@
   border-left: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
+  outline: 0;
   box-shadow: -0.25rem 0 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
   overscroll-behavior: contain;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
index 5e35c9fa805..c08d854f294 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleDrawer() {
       <Drawer.Portal>
         <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
         <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] fixed inset-0 flex items-stretch justify-end p-(--viewport-padding)">
-          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 shadow-[-0.25rem_0_0_rgb(0_0_0_/_12%)] overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[-0.25rem_0_0_rgb(0_0_0_/_12%)] overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Drawer.Content className="mx-auto w-full max-w-[32rem]">
               <Drawer.Title className="mb-1 text-base font-bold">Drawer</Drawer.Title>
               <Drawer.Description className="mb-6 text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
index 5b88ca4f46c..ea03271b886 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
@@ -134,6 +134,7 @@
   border-top: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
+  outline: 0;
   box-shadow: 0 -0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
   overscroll-behavior: contain;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
index 51ff8e1da01..2af3e365807 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function ExampleDrawer() {
               <Drawer.Portal container={portalContainer}>
                 <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] absolute inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
                 <Drawer.Viewport className="absolute inset-0 flex items-end justify-center">
-                  <Drawer.Popup className="w-full max-h-[calc(80vh+var(--bleed))] -mb-[var(--bleed)] border-t border-neutral-950 bg-white px-6 py-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+var(--bleed))] text-neutral-950 shadow-[0_-0.25rem_0_rgb(0_0_0_/_12%)] overflow-y-auto overscroll-contain transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] [transform:translateY(var(--drawer-swipe-movement-y))] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-starting-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+                  <Drawer.Popup className="w-full max-h-[calc(80vh+var(--bleed))] -mb-[var(--bleed)] border-t border-neutral-950 bg-white px-6 py-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+var(--bleed))] text-neutral-950 outline-none shadow-[0_-0.25rem_0_rgb(0_0_0_/_12%)] overflow-y-auto overscroll-contain transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] [transform:translateY(var(--drawer-swipe-movement-y))] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-starting-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
                     <div className="mx-auto mb-4 h-1 w-12 bg-neutral-300 dark:bg-neutral-700" />
                     <Drawer.Content className="mx-auto w-full max-w-[32rem]">
                       <Drawer.Title className="mt-0 mb-1 text-base font-bold text-center">
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
index eb1e506b4ed..f9f237e27e2 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
@@ -140,6 +140,7 @@
   border-top: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
+  outline: 0;
   box-shadow: 0 -0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
   overscroll-behavior: contain;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
index 97ddddc3eae..55dc45f2532 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
@@ -127,7 +127,7 @@ export default function ExampleDrawerNested() {
 }
 
 const popupClassName =
-  "[--bleed:3rem] [--peek:1rem] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))] group/popup relative -mb-[3rem] w-full max-h-[calc(80vh+3rem)] [height:var(--drawer-height,auto)] border-t border-neutral-950 bg-white px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] text-neutral-950 shadow-[0_-0.25rem_0_rgb(0_0_0_/_12%)] overflow-y-auto overscroll-contain touch-auto [transform-origin:50%_calc(100%-var(--bleed))] [transform:translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] after:absolute after:inset-0 after:rounded-[inherit] after:bg-transparent after:pointer-events-none after:content-[''] after:transition-[background-color] after:duration-[450ms] after:ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-swiping:duration-0 data-nested-drawer-swiping:duration-0 data-starting-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-open:h-[calc(var(--height)+var(--bleed))] data-nested-drawer-open:overflow-hidden data-nested-drawer-open:after:bg-black/5 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none [transition:transform_450ms_cubic-bezier(0.32,0.72,0,1),height_450ms_cubic-bezier(0.32,0.72,0,1),opacity_450ms_cubic-bezier(0.32,0.72,0,1)]";
+  "[--bleed:3rem] [--peek:1rem] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))] group/popup relative -mb-[3rem] w-full max-h-[calc(80vh+3rem)] [height:var(--drawer-height,auto)] border-t border-neutral-950 bg-white px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] text-neutral-950 outline-none shadow-[0_-0.25rem_0_rgb(0_0_0_/_12%)] overflow-y-auto overscroll-contain touch-auto [transform-origin:50%_calc(100%-var(--bleed))] [transform:translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] after:absolute after:inset-0 after:rounded-[inherit] after:bg-transparent after:pointer-events-none after:content-[''] after:transition-[background-color] after:duration-[450ms] after:ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-swiping:duration-0 data-nested-drawer-swiping:duration-0 data-starting-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-open:h-[calc(var(--height)+var(--bleed))] data-nested-drawer-open:overflow-hidden data-nested-drawer-open:after:bg-black/5 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none [transition:transform_450ms_cubic-bezier(0.32,0.72,0,1),height_450ms_cubic-bezier(0.32,0.72,0,1),opacity_450ms_cubic-bezier(0.32,0.72,0,1)]";
 
 const contentClassName =
   'mx-auto w-full max-w-[32rem] transition-opacity duration-[300ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] group-data-nested-drawer-open/popup:opacity-0 group-data-nested-drawer-swiping/popup:opacity-100';
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
index 27f40d9af76..21e6f9f4aae 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
@@ -97,6 +97,7 @@
   border-left: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
+  outline: 0;
   overflow-y: auto;
   overscroll-behavior: contain;
   touch-action: auto;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
index 991c6d87a66..12abe8b4a74 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleDrawer() {
       </Drawer.Trigger>
       <Drawer.Portal>
         <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] fixed inset-0 flex items-stretch justify-end p-(--viewport-padding) pointer-events-none">
-          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] pointer-events-auto h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 shadow-[-0.25rem_0_0_rgb(0_0_0_/_12%)] overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:shadow-[-0.25rem_0_0_rgb(0_0_0_/_0%)] data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:shadow-[-0.25rem_0_0_rgb(0_0_0_/_0%)] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] pointer-events-auto h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[-0.25rem_0_0_rgb(0_0_0_/_12%)] overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:shadow-[-0.25rem_0_0_rgb(0_0_0_/_0%)] data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:shadow-[-0.25rem_0_0_rgb(0_0_0_/_0%)] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Drawer.Content className="mx-auto w-full max-w-[32rem]">
               <Drawer.Title className="mb-1 text-base font-bold">Non-modal drawer</Drawer.Title>
               <Drawer.Description className="mb-6 text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
index 51ef508466a..5a182950bb8 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
@@ -85,6 +85,7 @@
   border-top: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
+  outline: 0;
   box-shadow: 0 -0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
   overscroll-behavior: contain;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
index 9d9c3d621d9..a0997002eb5 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleDrawer() {
       <Drawer.Portal>
         <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
         <Drawer.Viewport className="fixed inset-0 flex items-end justify-center">
-          <Drawer.Popup className="-mb-[3rem] w-full max-h-[calc(80vh+3rem)] border-t border-neutral-950 bg-white px-6 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] pt-4 text-neutral-950 shadow-[0_-0.25rem_0_rgb(0_0_0_/_12%)] overflow-y-auto overscroll-contain touch-auto [transform:translateY(var(--drawer-swipe-movement-y))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%-3rem+2px))] data-starting-style:[transform:translateY(calc(100%-3rem+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Drawer.Popup className="-mb-[3rem] w-full max-h-[calc(80vh+3rem)] border-t border-neutral-950 bg-white px-6 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] pt-4 text-neutral-950 outline-none shadow-[0_-0.25rem_0_rgb(0_0_0_/_12%)] overflow-y-auto overscroll-contain touch-auto [transform:translateY(var(--drawer-swipe-movement-y))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%-3rem+2px))] data-starting-style:[transform:translateY(calc(100%-3rem+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <div className="mx-auto mb-4 h-1 w-12 bg-neutral-300 dark:bg-neutral-700" />
             <Drawer.Content className="mx-auto w-full max-w-[32rem]">
               <Drawer.Title className="mb-1 text-base font-bold text-center">
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
index 5a9b216472c..653c830ff00 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
@@ -93,6 +93,7 @@
   border-top: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
+  outline: 0;
   overflow: visible;
   touch-action: none;
   box-shadow: 0 -0.25rem 0 rgb(0 0 0 / 12%);
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
index 023fafec5e3..b3816c88a73 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
@@ -21,7 +21,7 @@ export default function ExampleDrawerSnapPoints() {
         <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
         <Drawer.Viewport className="fixed inset-0 flex items-end justify-center touch-none">
           <Drawer.Popup
-            className="relative flex w-full max-h-[calc(100dvh-var(--top-margin))] min-h-0 flex-col overflow-visible border-t border-neutral-950 bg-white text-neutral-950 touch-none shadow-[0_-0.25rem_0_rgb(0_0_0_/_12%)] [--bleed:3rem] [padding-bottom:max(0px,calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] [transform:translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-[var(--bleed)] after:bg-[inherit] after:content-[''] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%+2px))] data-starting-style:[transform:translateY(calc(100%+2px))] data-starting-style:[padding-bottom:0] data-ending-style:[padding-bottom:0] data-starting-style:shadow-[0_-0.25rem_0_rgb(0_0_0_/_0%)] data-ending-style:shadow-[0_-0.25rem_0_rgb(0_0_0_/_0%)] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+            className="relative flex w-full max-h-[calc(100dvh-var(--top-margin))] min-h-0 flex-col overflow-visible border-t border-neutral-950 bg-white text-neutral-950 outline-none touch-none shadow-[0_-0.25rem_0_rgb(0_0_0_/_12%)] [--bleed:3rem] [padding-bottom:max(0px,calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] [transform:translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-[var(--bleed)] after:bg-[inherit] after:content-[''] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%+2px))] data-starting-style:[transform:translateY(calc(100%+2px))] data-starting-style:[padding-bottom:0] data-ending-style:[padding-bottom:0] data-starting-style:shadow-[0_-0.25rem_0_rgb(0_0_0_/_0%)] data-ending-style:shadow-[0_-0.25rem_0_rgb(0_0_0_/_0%)] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             style={{ '--top-margin': `${TOP_MARGIN_REM}rem` } as React.CSSProperties}
           >
             <div className="shrink-0 border-b border-neutral-300 px-6 pt-3.5 pb-4 touch-none dark:border-neutral-700">
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
index 0a6091be579..8aa3bc536c4 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
@@ -156,6 +156,7 @@
   border-left: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
+  outline: 0;
   box-shadow: -0.25rem 0 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
   touch-action: auto;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
index 52e9e3b190b..53782a59767 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleDrawerSwipeArea() {
         <Drawer.Portal container={portalContainer}>
           <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] absolute inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
           <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] absolute inset-0 z-20 flex items-stretch justify-end p-(--viewport-padding)">
-            <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 shadow-[-0.25rem_0_0_rgb(0_0_0_/_12%)] overflow-y-auto touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[-0.25rem_0_0_rgb(0_0_0_/_12%)] overflow-y-auto touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Drawer.Content className="mx-auto w-full max-w-[32rem]">
                 <Drawer.Title className="mb-1 text-base font-bold">Library</Drawer.Title>
                 <Drawer.Description className="mb-6 text-sm text-neutral-600 dark:text-neutral-400">

From 35e39f484bccee6fc4e1568b37e3a1b632d47aa9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 30 Apr 2026 12:43:23 +0200
Subject: [PATCH 098/257] Autocomplete brutalist

---
 .../demos/async/css-modules/index.module.css  |  57 +++----
 .../demos/async/tailwind/index.tsx            |  12 +-
 .../css-modules/index.module.css              |  58 +++----
 .../demos/auto-highlight/tailwind/index.tsx   |  14 +-
 .../css-modules/index.module.css              |  90 +++++------
 .../demos/command-palette/tailwind/index.tsx  |  28 ++--
 .../css-modules/index.module.css              |  60 +++----
 .../demos/fuzzy-matching/tailwind/index.tsx   |  14 +-
 .../demos/grid/css-modules/index.module.css   | 146 +++++++++---------
 .../demos/grid/tailwind/index.tsx             |  26 ++--
 .../grouped/css-modules/index.module.css      |  68 ++++----
 .../demos/grouped/tailwind/index.tsx          |  14 +-
 .../demos/hero/css-modules/index.module.css   |  59 +++----
 .../demos/hero/tailwind/index.tsx             |  14 +-
 .../demos/inline/css-modules/index.module.css |  51 +++---
 .../demos/inline/tailwind/index.tsx           |  12 +-
 .../demos/limit/css-modules/index.module.css  |  61 +++-----
 .../demos/limit/tailwind/index.tsx            |  12 +-
 .../virtualized/css-modules/index.module.css  |  57 +++----
 .../demos/virtualized/tailwind/index.tsx      |  10 +-
 20 files changed, 375 insertions(+), 488 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
index 7087bf585b3..2a016ad1b0b 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
@@ -1,25 +1,20 @@
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-200);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 16rem;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: transparent;
+  color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
   &:focus {
-    border-color: var(--color-blue);
-    outline: 1px solid var(--color-blue);
-  }
-
-  @media (min-width: 500px) {
-    width: 20rem;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -30,7 +25,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Positioner {
@@ -40,9 +35,8 @@
 .Popup {
   box-sizing: border-box;
   padding-block: 0.5rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
   max-height: min(var(--available-height), 23rem);
   max-width: var(--available-width);
@@ -50,16 +44,11 @@
   scroll-padding-block: 0.5rem;
   overscroll-behavior: contain;
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-neutral-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-neutral-200),
-      0 4px 6px -4px var(--color-neutral-200);
-  }
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
-    outline-offset: -1px;
+    box-shadow: none;
   }
 }
 
@@ -69,16 +58,16 @@
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-left: 1rem;
+  padding-left: 0.5rem;
   padding-right: 2rem;
   display: flex;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-neutral-50);
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &[data-highlighted]::before {
@@ -86,9 +75,8 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-neutral-900);
+    inset-inline: 0;
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 }
 
@@ -115,18 +103,17 @@
   align-items: center;
   gap: 0.5rem;
   padding-block: 0.25rem;
-  padding-left: 1rem;
+  padding-left: 0.5rem;
   padding-right: 2rem;
   font-size: 0.875rem;
-  text-align: center;
-  color: var(--color-neutral-600);
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
 
 .Spinner {
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border: 2px solid var(--color-neutral-200);
+  border: 2px solid light-dark(var(--color-neutral-200), var(--color-neutral-800));
   border-top: 2px solid var(--color-neutral-600);
   border-radius: 50%;
   animation: spin 1s linear infinite;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
index e58d942f657..e9d365cd34f 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function ExampleAsyncAutocomplete() {
       return (
         <React.Fragment>
           <div
-            className="size-4 rounded-full border-2 border-neutral-200 border-t-neutral-600 animate-spin"
+            className="size-4 animate-spin rounded-full border-2 border-neutral-300 border-t-neutral-600 dark:border-neutral-800 dark:border-t-neutral-400"
             aria-hidden
           />
           Searching…
@@ -77,23 +77,23 @@ export default function ExampleAsyncAutocomplete() {
       itemToStringValue={(item) => item.title}
       filter={null}
     >
-      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-950 dark:text-white">
         Search movies by name or year
         <Autocomplete.Input
           placeholder="e.g. Pulp Fiction or 1994"
-          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-neutral-200 pl-3.5 text-base font-normal text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="h-8 w-[16rem] border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
         />
       </label>
 
       <Autocomplete.Portal hidden={!status}>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4} align="start">
           <Autocomplete.Popup
-            className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-[canvas] py-2 text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300"
+            className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain border border-neutral-950 bg-white py-2 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-busy={isPending || undefined}
           >
             <Autocomplete.Status>
               {status && (
-                <div className="flex items-center gap-2 py-1 pl-4 pr-8 text-sm text-neutral-600">
+                <div className="flex items-center gap-2 py-1 pr-8 pl-2 text-sm text-neutral-500 dark:text-neutral-400">
                   {status}
                 </div>
               )}
@@ -102,7 +102,7 @@ export default function ExampleAsyncAutocomplete() {
               {(movie: Movie) => (
                 <Autocomplete.Item
                   key={movie.id}
-                  className="flex cursor-default py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900"
+                  className="flex cursor-default py-2 pr-8 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                   value={movie}
                 >
                   <span className="flex w-full flex-col gap-1">
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
index faeceeecbe7..08105e55359 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
@@ -1,25 +1,20 @@
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-200);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 16rem;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: transparent;
+  color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
   &:focus {
-    border-color: var(--color-blue);
-    outline: 1px solid var(--color-blue);
-  }
-
-  @media (min-width: 500px) {
-    width: 20rem;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -30,7 +25,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Positioner {
@@ -39,23 +34,17 @@
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
   max-height: 23rem;
   max-width: var(--available-width);
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-neutral-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-neutral-200),
-      0 4px 6px -4px var(--color-neutral-200);
-  }
+  overflow: clip;
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
-    outline-offset: -1px;
+    box-shadow: none;
   }
 }
 
@@ -79,16 +68,16 @@
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-left: 1rem;
+  padding-left: 0.5rem;
   padding-right: 2rem;
   display: flex;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-neutral-50);
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &[data-highlighted]::before {
@@ -96,16 +85,15 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-neutral-900);
+    inset-inline: 0;
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 }
 
 .Empty {
   box-sizing: border-box;
-  padding: 1rem;
-  font-size: 0.925rem;
+  padding: 1rem 1rem 1rem 0.5rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-600);
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
index 9bbc58d93fc..14be9b0132b 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
@@ -4,25 +4,27 @@ import { Autocomplete } from '@base-ui/react/autocomplete';
 export default function ExampleAutocompleteAutoHighlight() {
   return (
     <Autocomplete.Root items={tags} autoHighlight>
-      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-950 dark:text-white">
         Auto highlight on type
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-neutral-200 pl-3.5 text-base font-normal text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="h-8 w-[16rem] border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
         />
       </label>
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] rounded-md bg-[canvas] text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
-              <div className="p-4 text-[0.925rem] leading-4 text-neutral-600">No tags found.</div>
+              <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
+                No tags found.
+              </div>
             </Autocomplete.Empty>
-            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-[empty]:p-0">
+            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-empty:p-0">
               {(tag: Tag) => (
                 <Autocomplete.Item
                   key={tag.id}
-                  className="flex cursor-default items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900"
+                  className="flex cursor-default items-center gap-2 py-2 pr-8 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                   value={tag}
                 >
                   {tag.value}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
index 5bb73e637e4..d7f144185a7 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
@@ -7,30 +7,29 @@
   padding: 0 0.875rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-neutral-50);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5rem;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
   cursor: default;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-100);
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -66,9 +65,8 @@
   position: relative;
   width: calc(100vw - 1rem);
   max-width: 28rem;
-  border-radius: 1rem;
-  background-color: white;
-  color: var(--color-neutral-900);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   transition:
     transform 150ms,
     opacity 150ms;
@@ -83,41 +81,33 @@
     transform: translateY(-1rem) scale(0.95);
   }
 
-  outline: 1px solid rgb(0 0 0 / 0.04);
-  box-shadow:
-    0 0.5px 1px rgb(0 0 0 / 0.12),
-    0 1px 3px -1px rgb(0 0 0 / 0.04),
-    0 2px 4px -1px rgb(0 0 0 / 0.04),
-    0 4px 8px -2px rgb(0 0 0 / 0.04),
-    0 12px 14px -4px rgb(0 0 0 / 0.04),
-    0 24px 64px -8px rgb(0 0 0 / 0.04),
-    0 40px 48px -32px rgb(0 0 0 / 0.04);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    background-color: oklch(20% 0.5% 264deg);
-    outline: 1px solid rgb(255 255 255 / 0.25);
+    box-shadow: none;
   }
 }
 
 .Input {
   box-sizing: border-box;
-  padding: 1rem;
+  padding-inline: 0.5rem;
   margin: 0;
   border: none;
-  border-bottom: 1px solid var(--color-neutral-100);
+  border-bottom: 1px solid light-dark(var(--color-neutral-950), white);
   width: 100%;
-  height: auto;
+  height: 2rem;
   border-radius: 0;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   background-color: transparent;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
   letter-spacing: 0.016em;
   outline: none;
 
   &::placeholder {
     font-weight: 400;
-    color: var(--color-neutral-500);
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
   &:focus {
@@ -143,8 +133,8 @@
   scroll-padding-block: 0.25rem;
 
   &:focus-visible {
-    outline: 1px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -172,12 +162,12 @@
   display: flex;
   align-items: center;
   min-height: 2rem;
-  padding: 0 0.875rem;
+  padding: 0 0.5rem;
   font-size: 0.9375rem;
   letter-spacing: 0.00625em;
   line-height: 1;
   font-weight: 400;
-  color: var(--color-neutral-600);
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
 
 .Item {
@@ -187,19 +177,18 @@
   user-select: none;
   scroll-margin-block: 0.25rem;
   min-height: 2rem;
-  padding: 0 0.75rem 0 2.25rem;
-  border-radius: 0.375rem;
+  padding: 0 0.75rem 0 0.5rem;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 0.5rem;
   align-items: center;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   letter-spacing: 0.016em;
   line-height: 1.25;
   font-weight: 400;
 
   &[data-highlighted] {
-    background-color: var(--color-neutral-100);
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 }
 
@@ -213,12 +202,12 @@
 
 .ItemType {
   font-size: 0.875rem;
-  color: var(--color-neutral-500);
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   letter-spacing: 0.00625em;
   white-space: nowrap;
 
   [data-highlighted] & {
-    color: var(--color-neutral-700);
+    color: light-dark(var(--color-neutral-700), var(--color-neutral-300));
   }
 }
 
@@ -226,11 +215,11 @@
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: 1rem;
-  font-size: 0.925rem;
+  justify-content: flex-start;
+  padding: 1rem 1rem 1rem 0.5rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-600);
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   min-height: 8rem;
 }
 
@@ -253,8 +242,7 @@
     display: block;
     height: 100%;
     width: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-neutral-400);
+    background-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 }
 
@@ -263,11 +251,10 @@
   align-items: center;
   justify-content: space-between;
   padding: 0.625rem 0.75rem;
-  border-top: 1px solid var(--color-neutral-200);
+  border-top: 1px solid light-dark(var(--color-neutral-950), white);
   font-size: 0.75rem;
-  color: var(--color-neutral-600);
-  background-color: var(--color-neutral-50);
-  border-radius: 0 0 1rem 1rem;
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  background-color: light-dark(white, var(--color-neutral-950));
 }
 
 .FooterLeft,
@@ -289,10 +276,9 @@
     ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
   font-weight: 400;
   line-height: 1;
-  color: var(--color-neutral-700);
-  background-color: var(--color-neutral-100);
-  border: 1px solid var(--color-neutral-300);
-  border-radius: 0.25rem;
+  color: light-dark(var(--color-neutral-700), var(--color-neutral-300));
+  background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
 }
 
 .VisuallyHiddenClose {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
index b679d75a88a..607e8bd3991 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
@@ -13,14 +13,14 @@ export default function ExampleAutocompleteCommandPalette() {
 
   return (
     <Dialog.Root open={open} onOpenChange={setOpen}>
-      <Dialog.Trigger className="flex h-10 cursor-default items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100">
+      <Dialog.Trigger className="flex h-10 cursor-default items-center justify-center border border-neutral-950 bg-white px-3.5 text-base font-normal text-neutral-950 select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-800">
         Open command palette
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 ease-[cubic-bezier(0.45,1.005,0,1.005)] data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 ease-[cubic-bezier(0.45,1.005,0,1.005)] data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="fixed inset-0 flex items-start justify-center overflow-hidden px-2 pt-18 pb-2">
           <Dialog.Popup
-            className="relative flex max-h-[min(36rem,calc(100dvh-5rem))] w-[calc(100vw-1rem)] max-w-[28rem] flex-col overflow-hidden rounded-2xl bg-white text-neutral-900 outline-1 outline-black/4 shadow-[0_.5px_1px_hsl(0_0%_0%/12%),0_1px_3px_-1px_hsl(0_0%_0%/4%),0_2px_4px_-1px_hsl(0_0%_0%/4%),0_4px_8px_-2px_hsl(0_0%_0%/4%),0_12px_14px_-4px_hsl(0_0%_0%/4%),0_24px_64px_-8px_hsl(0_0%_0%/4%),0_40px_48px_-32px_hsl(0_0%_0%/4%)] transition-[opacity,transform,scale,translate] duration-150 data-ending-style:-translate-y-4 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:-translate-y-4 data-starting-style:scale-95 data-starting-style:opacity-0 dark:bg-[oklch(20%_0.5%_264deg)] dark:outline-white/25"
+            className="relative flex max-h-[min(36rem,calc(100dvh-5rem))] w-[calc(100vw-1rem)] max-w-[28rem] flex-col overflow-hidden border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform,scale,translate] duration-150 data-ending-style:-translate-y-4 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:-translate-y-4 data-starting-style:scale-95 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-label="Command palette"
           >
             <Autocomplete.Root
@@ -31,16 +31,16 @@ export default function ExampleAutocompleteCommandPalette() {
               keepHighlight
             >
               <Autocomplete.Input
-                className="w-full border-0 border-b border-neutral-100 bg-transparent p-4 text-base font-normal tracking-[0.016em] text-neutral-900 placeholder:text-neutral-500 outline-none"
+                className="h-8 w-full border-0 border-b border-neutral-950 bg-transparent px-2 text-sm font-normal tracking-[0.016em] text-neutral-950 outline-none placeholder:text-neutral-500 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
                 placeholder="Search for apps and commands…"
               />
               <Dialog.Close className="sr-only">Close command palette</Dialog.Close>
 
               <ScrollArea.Root className="relative flex max-h-[min(60dvh,24rem)] min-h-0 flex-[0_1_auto] overflow-hidden">
-                <ScrollArea.Viewport className="min-h-0 flex-1 overscroll-contain [scroll-padding-block:0.25rem] focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-blue-800">
+                <ScrollArea.Viewport className="min-h-0 flex-1 overscroll-contain [scroll-padding-block:0.25rem] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                   <ScrollArea.Content style={{ minWidth: '100%' }}>
                     <Autocomplete.Empty>
-                      <div className="flex min-h-32 items-center justify-center p-4 text-[0.925rem] leading-4 text-neutral-600">
+                      <div className="flex min-h-32 items-center justify-start py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                         No results found.
                       </div>
                     </Autocomplete.Empty>
@@ -52,7 +52,7 @@ export default function ExampleAutocompleteCommandPalette() {
                           items={group.items}
                           className="not-last:mb-1"
                         >
-                          <Autocomplete.GroupLabel className="m-0 flex h-8 items-center px-3.5 text-[0.9375rem] tracking-[0.00625em] font-normal leading-none text-neutral-600 select-none outline-none">
+                          <Autocomplete.GroupLabel className="m-0 flex h-8 items-center px-2 text-[0.9375rem] tracking-[0.00625em] font-normal leading-none text-neutral-500 dark:text-neutral-400 select-none outline-none">
                             {group.value}
                           </Autocomplete.GroupLabel>
                           <Autocomplete.Collection>
@@ -61,10 +61,10 @@ export default function ExampleAutocompleteCommandPalette() {
                                 key={item.value}
                                 value={item}
                                 onClick={handleItemClick}
-                                className="grid min-h-8 cursor-default grid-cols-[minmax(0,1fr)_auto] items-center gap-2 rounded-md pl-9 pr-3 text-[0.9375rem] tracking-[0.016em] font-normal leading-[1.25] select-none outline-none [scroll-margin-block:0.25rem] data-[highlighted]:bg-neutral-100"
+                                className="grid min-h-8 cursor-default grid-cols-[minmax(0,1fr)_auto] items-center gap-2 pl-2 pr-3 text-sm font-normal leading-[1.25] tracking-[0.016em] outline-none select-none [scroll-margin-block:0.25rem] data-highlighted:bg-neutral-100 dark:data-highlighted:bg-neutral-800"
                               >
                                 <span className="truncate font-normal">{item.label}</span>
-                                <span className="shrink-0 whitespace-nowrap text-[0.875rem] tracking-[0.00625em] text-neutral-500 data-[highlighted]:text-neutral-700">
+                                <span className="shrink-0 whitespace-nowrap text-[0.875rem] tracking-[0.00625em] text-neutral-500 data-highlighted:text-neutral-700 dark:text-neutral-400 dark:data-highlighted:text-neutral-300">
                                   {group.value === 'Suggestions' ? 'Application' : 'Command'}
                                 </span>
                               </Autocomplete.Item>
@@ -76,23 +76,23 @@ export default function ExampleAutocompleteCommandPalette() {
                   </ScrollArea.Content>
                 </ScrollArea.Viewport>
                 <ScrollArea.Scrollbar className="-mr-1 flex w-6 justify-center py-2">
-                  <ScrollArea.Thumb className="flex w-full justify-center before:block before:h-full before:w-1 before:rounded-sm before:bg-neutral-400 before:content-['']" />
+                  <ScrollArea.Thumb className="flex w-full justify-center before:block before:h-full before:w-1 before:bg-neutral-500 dark:before:bg-neutral-400 before:content-['']" />
                 </ScrollArea.Scrollbar>
               </ScrollArea.Root>
 
-              <div className="flex items-center justify-between border-t border-neutral-200 bg-neutral-50 px-3 py-2.5 text-xs text-neutral-600">
+              <div className="flex items-center justify-between border-t border-neutral-950 bg-white px-3 py-2.5 text-xs text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-neutral-400">
                 <div className="flex items-center gap-2">
                   <span>Activate</span>
-                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center rounded border border-neutral-300 bg-neutral-100 px-1 text-[0.625rem] font-normal text-neutral-700">
+                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center border border-neutral-950 bg-neutral-100 px-1 text-[0.625rem] font-normal text-neutral-700 dark:border-white dark:bg-neutral-800 dark:text-neutral-300">
                     Enter
                   </kbd>
                 </div>
                 <div className="flex items-center gap-2">
                   <span>Actions</span>
-                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center rounded border border-neutral-300 bg-neutral-100 px-1 text-[0.625rem] font-normal text-neutral-700">
+                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center border border-neutral-950 bg-neutral-100 px-1 text-[0.625rem] font-normal text-neutral-700 dark:border-white dark:bg-neutral-800 dark:text-neutral-300">
                     Cmd
                   </kbd>
-                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center rounded border border-neutral-300 bg-neutral-100 px-1 text-[0.625rem] font-normal text-neutral-700">
+                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center border border-neutral-950 bg-neutral-100 px-1 text-[0.625rem] font-normal text-neutral-700 dark:border-white dark:bg-neutral-800 dark:text-neutral-300">
                     K
                   </kbd>
                 </div>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
index a55805184d1..12c6d94f1d9 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
@@ -5,31 +5,26 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-200);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 16rem;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: transparent;
+  color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
-  @media (min-width: 500px) {
-    width: 20rem;
-  }
-
   &:focus {
-    border-color: var(--color-blue);
-    outline: 1px solid var(--color-blue);
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -40,9 +35,8 @@
 .Popup {
   box-sizing: border-box;
   padding-block: 0.5rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
   max-height: min(var(--available-height), 28rem);
   max-width: var(--available-width);
@@ -50,16 +44,11 @@
   scroll-padding-block: 0.5rem;
   overscroll-behavior: contain;
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-neutral-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-neutral-200),
-      0 4px 6px -4px var(--color-neutral-200);
-  }
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
-    outline-offset: -1px;
+    box-shadow: none;
   }
 }
 
@@ -74,9 +63,9 @@
   outline: 0;
   cursor: default;
   user-select: none;
-  padding: 0.75rem 1rem;
+  padding: 0.75rem 0.5rem;
   display: flex;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1.5rem;
 
   &[data-highlighted] {
@@ -89,9 +78,8 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-neutral-200);
+    inset-inline: 0;
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 }
 
@@ -117,24 +105,24 @@
 
 .ItemDescription {
   font-size: 0.875rem;
-  color: var(--color-neutral-600);
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   line-height: 1.25rem;
 }
 
 .Empty {
   box-sizing: border-box;
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-600);
-  padding: 0.5rem 1rem;
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
 }
 
 .Item mark {
   background-color: transparent;
-  color: var(--color-blue);
+  color: light-dark(var(--color-blue-800), var(--color-blue-500));
   font-weight: 700;
 }
 
 .ItemCategory mark {
-  color: var(--color-blue);
+  color: var(--color-blue-800);
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
index 56c810816b3..fe0799d096a 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
@@ -10,19 +10,19 @@ export default function ExampleFuzzyMatchingAutocomplete() {
       filter={fuzzyFilter}
       itemToStringValue={(item) => item.title}
     >
-      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-950 dark:text-white">
         Fuzzy search documentation
         <Autocomplete.Input
           placeholder="e.g. React"
-          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-neutral-200 pl-3.5 text-base font-normal text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="h-8 w-[16rem] border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
         />
       </label>
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),28rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-[canvas] py-2 text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),28rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain border border-neutral-950 bg-white py-2 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
-              <div className="px-4 py-2 text-[0.925rem] leading-4 text-neutral-600">
+              <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No results found for "{<Autocomplete.Value />}"
               </div>
             </Autocomplete.Empty>
@@ -32,7 +32,7 @@ export default function ExampleFuzzyMatchingAutocomplete() {
                 <Autocomplete.Item
                   key={item.title}
                   value={item}
-                  className="flex cursor-default py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-200"
+                  className="flex cursor-default py-3 pr-2 pl-2 text-sm leading-6 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-100 dark:data-highlighted:before:bg-neutral-800"
                 >
                   <Autocomplete.Value>
                     {(value) => (
@@ -42,7 +42,7 @@ export default function ExampleFuzzyMatchingAutocomplete() {
                             {highlightText(item.title, value)}
                           </span>
                         </span>
-                        <span className="text-sm text-neutral-600">
+                        <span className="text-sm text-neutral-500 dark:text-neutral-400">
                           {highlightText(item.description, value)}
                         </span>
                       </span>
@@ -70,7 +70,7 @@ function highlightText(text: string, query: string): React.ReactNode {
 
   return text.split(regex).map((part, idx) =>
     regex.test(part) ? (
-      <mark key={idx} className="text-blue-800 bg-transparent font-bold">
+      <mark key={idx} className="bg-transparent font-bold text-blue-800 dark:text-blue-500">
         {part}
       </mark>
     ) : (
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
index 4bc8d976a2f..5aaf5c8a11c 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
@@ -4,58 +4,64 @@
 }
 
 .InputGroup {
-  display: flex;
-  gap: 0.5rem;
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr auto;
   align-items: center;
 }
 
 .TextInput {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  grid-column: 1/-1;
+  grid-row: 1;
+  padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-200);
-  flex: 1;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: transparent;
+  color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
   &:focus {
-    border-color: var(--color-blue);
-    outline: 1px solid var(--color-blue);
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
 .EmojiButton {
   box-sizing: border-box;
-  width: 2.5rem;
-  height: 2.5rem;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  grid-column: 2;
+  grid-row: 1;
+  width: calc(2rem - 2px);
+  height: calc(2rem - 2px);
+  border: 0;
+  margin-right: 1px;
+  background-color: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.25rem;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
   &:hover {
-    background-color: var(--color-neutral-100);
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
-  &:focus-visible {
-    border-color: var(--color-blue);
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+  &:active {
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -1px;
   }
 }
 
@@ -70,30 +76,29 @@
   padding-right: 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   font-family: inherit;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
   cursor: default;
   user-select: none;
   min-width: 9rem;
-  background-color: canvas;
+  background-color: light-dark(white, var(--color-neutral-950));
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -103,33 +108,29 @@
 
 .InputContainer {
   box-sizing: border-box;
+  position: relative;
+  z-index: 2;
   width: 16rem;
-  height: calc(var(--input-container-height));
-  text-align: center;
-  background: canvas;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 0.25rem;
+  height: var(--input-container-height);
+  background: light-dark(white, var(--color-neutral-950));
 }
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-300);
+  /* border: 1px solid light-dark(var(--color-neutral-950), white); */
   width: 100%;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  font-size: 0.875rem;
+  background-color: transparent;
+  color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
   &:focus {
-    border-color: var(--color-blue);
-    outline: 1px solid var(--color-blue);
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -1px;
   }
 }
 
@@ -138,11 +139,10 @@
 }
 
 .Popup {
-  --input-container-height: 3rem;
+  --input-container-height: 2rem;
   box-sizing: border-box;
-  border-radius: 0.5rem;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   transform-origin: var(--transform-origin);
   transition:
     transform 150ms,
@@ -156,15 +156,11 @@
     transform: scale(0.9);
   }
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-neutral-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-neutral-200),
-      0 4px 6px -4px var(--color-neutral-200);
-  }
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
+    box-shadow: none;
   }
 }
 
@@ -174,8 +170,8 @@
   scroll-padding-bottom: 0.35rem;
   overscroll-behavior: contain;
   max-height: min(
-    calc(20.5rem - var(--input-container-height)),
-    calc(var(--available-height) - var(--input-container-height))
+    calc(20.5rem - var(--input-container-height) - 2px),
+    calc(var(--available-height) - var(--input-container-height) - 2px)
   );
 
   &:empty {
@@ -189,27 +185,26 @@
 
 .GroupLabel {
   box-sizing: border-box;
-  padding: 0.5rem 1rem 0.25rem;
+  padding: 0.5rem;
   font-size: 0.75rem;
   font-weight: 700;
-  color: var(--color-neutral-600);
+  line-height: 1rem;
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   text-transform: uppercase;
-  letter-spacing: 0.025em;
-  background-color: canvas;
-  border-bottom: 1px solid var(--color-neutral-100);
+  letter-spacing: 0.05em;
+  background-color: light-dark(white, var(--color-neutral-950));
   position: sticky;
   z-index: 1;
   top: 0;
-  margin: 0;
-  width: 100%;
 }
 
 .Group {
   display: block;
+  padding-bottom: 0.5rem;
 }
 
 .Grid {
-  padding: 0.25rem;
+  padding: 0 0.5rem 0.25rem;
 }
 
 .Row {
@@ -229,21 +224,19 @@
   min-width: var(--anchor-width);
   height: 2.5rem;
   padding: 0.5rem 0.125rem;
-  border-radius: 0.375rem;
   background: transparent;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-neutral-50);
+    color: light-dark(white, var(--color-neutral-950));
 
     &::before {
       content: '';
       z-index: -1;
       position: absolute;
       inset: 0;
-      border-radius: 0.375rem;
-      background-color: var(--color-neutral-200);
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 }
@@ -251,7 +244,6 @@
 .Emoji {
   font-size: 1.5rem;
   line-height: 1;
-  margin-bottom: 0.25rem;
 }
 
 .Name {
@@ -272,8 +264,8 @@
 
 .Empty {
   box-sizing: border-box;
-  padding: 0.5rem 1rem 1rem;
-  font-size: 0.925rem;
+  padding: 0.75rem 0.5rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-600);
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
index 8e09d3653fb..4edb9ec60c1 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
@@ -31,11 +31,11 @@ export default function ExampleEmojiPicker() {
 
   return (
     <div className="mx-auto w-[16rem]">
-      <div className="flex items-center gap-2">
+      <div className="grid grid-cols-[1fr_auto] items-center">
         <input
           ref={textInputRef}
           type="text"
-          className="h-10 flex-1 font-normal rounded-md border border-neutral-200 pl-3.5 text-base text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="col-span-full row-start-1 h-8 border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
           placeholder="iMessage"
           value={textValue}
           onChange={(event) => setTextValue(event.target.value)}
@@ -55,47 +55,45 @@ export default function ExampleEmojiPicker() {
           }}
         >
           <Autocomplete.Trigger
-            className="size-10 rounded-md border border-neutral-200 bg-[canvas] text-[1.25rem] text-neutral-900 outline-hidden hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-neutral-100"
+            className="col-start-2 row-start-1 mr-px flex size-[calc(2rem-2px)] items-center justify-center border-0 bg-transparent text-[1.25rem] text-neutral-950 outline-hidden hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-popup-open:bg-neutral-100 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800"
             aria-label="Choose emoji"
           >
             😀
           </Autocomplete.Trigger>
           <Autocomplete.Portal>
             <Autocomplete.Positioner className="outline-hidden" sideOffset={4} align="end">
-              <Autocomplete.Popup className="[--input-container-height:3rem] max-w-[var(--available-width)] max-h-[20.5rem] origin-[var(--transform-origin)] rounded-lg bg-[canvas] shadow-lg shadow-neutral-200 text-neutral-900 outline-1 outline-neutral-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-neutral-300">
-                <div className="mx-1 flex h-[var(--input-container-height)] w-64 items-center justify-center bg-[canvas] text-center">
+              <Autocomplete.Popup className="[--input-container-height:2rem] max-h-[20.5rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+                <div className="relative z-[2] h-[var(--input-container-height)] w-64 bg-white dark:bg-neutral-950">
                   <Autocomplete.Input
                     placeholder="Search emojis…"
-                    className="h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-neutral-200 pl-3.5 text-base font-normal text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+                    className="h-8 w-full border-0 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 dark:text-white"
                   />
                 </div>
                 <Autocomplete.Empty>
-                  <div className="px-4 pb-4 pt-2 text-[0.925rem] leading-4 text-neutral-600">
+                  <div className="px-2 py-3 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                     No emojis found
                   </div>
                 </Autocomplete.Empty>
-                <Autocomplete.List className="max-h-[min(calc(20.5rem-var(--input-container-height)),calc(var(--available-height)-var(--input-container-height)))] overflow-auto scroll-pt-10 scroll-pb-[0.35rem] overscroll-contain">
+                <Autocomplete.List className="max-h-[min(calc(20.5rem-var(--input-container-height)-2px),calc(var(--available-height)-var(--input-container-height)-2px))] overflow-auto scroll-pt-10 scroll-pb-[0.35rem] overscroll-contain">
                   {(group: EmojiGroup) => (
                     <Autocomplete.Group key={group.value} items={group.items} className="block">
-                      <Autocomplete.GroupLabel className="sticky top-0 z-[1] m-0 w-full border-b border-neutral-100 bg-[canvas] px-4 pb-1 pt-2 text-[0.75rem] font-bold uppercase tracking-wide text-neutral-600">
+                      <Autocomplete.GroupLabel className="sticky top-0 z-[1] bg-white p-2 text-xs font-bold text-neutral-500 uppercase tracking-wider dark:bg-neutral-950 dark:text-neutral-400">
                         {group.label}
                       </Autocomplete.GroupLabel>
-                      <div className="p-1" role="presentation">
+                      <div className="px-2 pb-1 pt-0" role="presentation">
                         {chunkArray(group.items, COLUMNS).map((row, rowIdx) => (
                           <Autocomplete.Row key={rowIdx} className="grid grid-cols-5">
                             {row.map((rowItem) => (
                               <Autocomplete.Item
                                 key={rowItem.emoji}
                                 value={rowItem}
-                                className="group min-w-[var(--anchor-width)] select-none flex h-10 flex-col items-center justify-center rounded-md bg-transparent px-0.5 py-2 text-neutral-900 outline-hidden data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-md data-[highlighted]:before:bg-neutral-200"
+                                className="group flex h-10 min-w-[var(--anchor-width)] flex-col items-center justify-center bg-transparent px-0.5 py-2 text-neutral-950 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-100 dark:text-white dark:data-highlighted:before:bg-neutral-800"
                                 onClick={() => {
                                   handleInsertEmoji(rowItem.emoji);
                                   setPickerOpen(false);
                                 }}
                               >
-                                <span className="mb-1 text-[1.5rem] leading-none">
-                                  {rowItem.emoji}
-                                </span>
+                                <span className="text-2xl leading-none">{rowItem.emoji}</span>
                               </Autocomplete.Item>
                             ))}
                           </Autocomplete.Row>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
index 118a32e4978..1085c6bb4ef 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
@@ -1,25 +1,20 @@
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-200);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 16rem;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: transparent;
+  color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
   &:focus {
-    border-color: var(--color-blue);
-    outline: 1px solid var(--color-blue);
-  }
-
-  @media (min-width: 500px) {
-    width: 20rem;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -30,7 +25,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Positioner {
@@ -39,22 +34,18 @@
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.5rem;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
   max-height: 22.5rem;
   max-width: var(--available-width);
+  overflow: clip;
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-neutral-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-neutral-200),
-      0 4px 6px -4px var(--color-neutral-200);
-  }
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
+    box-shadow: none;
   }
 }
 
@@ -79,17 +70,17 @@
 
 .GroupLabel {
   box-sizing: border-box;
-  padding: 0.5rem 1rem 0.25rem;
+  padding: 0.5rem 1rem 0.25rem 0.5rem;
   font-size: 0.75rem;
   font-weight: 700;
+  line-height: 1rem;
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   text-transform: uppercase;
-  letter-spacing: 0.025em;
-  background-color: canvas;
+  letter-spacing: 0.05em;
+  background-color: light-dark(white, var(--color-neutral-950));
   position: sticky;
   z-index: 1;
   top: 0;
-  margin: 0 0.5rem 0 0;
-  width: calc(100% - 0.5rem);
 }
 
 .Item {
@@ -97,15 +88,15 @@
   outline: 0;
   cursor: default;
   user-select: none;
-  padding: 0.5rem 2rem 0.5rem 1rem;
+  padding: 0.5rem 2rem 0.5rem 0.5rem;
   display: flex;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-neutral-50);
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &[data-highlighted]::before {
@@ -113,22 +104,21 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-neutral-900);
+    inset-inline: 0;
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 }
 
 .Separator {
   margin: 0.375rem 1rem;
   height: 1px;
-  background-color: var(--color-neutral-200);
+  background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
 }
 
 .Empty {
   box-sizing: border-box;
-  padding: 1rem;
-  font-size: 0.925rem;
+  padding: 1rem 1rem 1rem 0.5rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-600);
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
index 7d79aa7e541..9d944398253 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
@@ -4,33 +4,33 @@ import { Autocomplete } from '@base-ui/react/autocomplete';
 export default function ExampleGroupAutocomplete() {
   return (
     <Autocomplete.Root items={groupedTags}>
-      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-950 dark:text-white">
         Select a tag
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-neutral-200 pl-3.5 text-base font-normal text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="h-8 w-[16rem] border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
         />
       </label>
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[22.5rem] max-w-[var(--available-width)] rounded-lg bg-[canvas] text-neutral-900 outline-1 outline-neutral-200 shadow-lg shadow-neutral-200 dark:outline-neutral-300 dark:shadow-none">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[22.5rem] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
-              <div className="px-4 py-2 text-[0.925rem] leading-4 text-neutral-600">
+              <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No tags found.
               </div>
             </Autocomplete.Empty>
-            <Autocomplete.List className="outline-0 overflow-y-auto scroll-pt-[2.25rem] scroll-pb-[0.5rem] overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-[empty]:p-0">
+            <Autocomplete.List className="outline-0 overflow-y-auto scroll-pt-[2.25rem] scroll-pb-[0.5rem] overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-empty:p-0">
               {(group: TagGroup) => (
                 <Autocomplete.Group key={group.value} items={group.items} className="block pb-2">
-                  <Autocomplete.GroupLabel className="sticky top-0 z-[1] mb-0 mr-2 mt-0 ml-0 w-[calc(100%-0.5rem)] bg-[canvas] px-4 pb-1 pt-2 text-xs font-bold uppercase tracking-wide">
+                  <Autocomplete.GroupLabel className="sticky top-0 z-[1] bg-white pr-4 pb-1 pl-2 pt-2 text-xs font-bold text-neutral-500 uppercase tracking-wider dark:bg-neutral-950 dark:text-neutral-400">
                     {group.value}
                   </Autocomplete.GroupLabel>
                   <Autocomplete.Collection>
                     {(tag: Tag) => (
                       <Autocomplete.Item
                         key={tag.id}
-                        className="flex cursor-default items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900"
+                        className="flex cursor-default items-center gap-2 py-2 pr-8 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                         value={tag}
                       >
                         {tag.label}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
index 770fd61eb8c..f5085467810 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
@@ -1,25 +1,20 @@
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-200);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 16rem;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: transparent;
+  color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
   &:focus {
-    border-color: var(--color-blue);
-    outline: 1px solid var(--color-blue);
-  }
-
-  @media (min-width: 500px) {
-    width: 20rem;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -30,7 +25,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Positioner {
@@ -39,23 +34,18 @@
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
   max-height: 23rem;
   max-width: var(--available-width);
+  overflow: clip;
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-neutral-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-neutral-200),
-      0 4px 6px -4px var(--color-neutral-200);
-  }
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
-    outline-offset: -1px;
+    box-shadow: none;
   }
 }
 
@@ -79,16 +69,16 @@
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-left: 1rem;
+  padding-left: 0.5rem;
   padding-right: 2rem;
   display: flex;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-neutral-50);
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &[data-highlighted]::before {
@@ -96,22 +86,21 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-neutral-900);
+    inset-inline: 0;
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 }
 
 .Separator {
   margin: 0.375rem 1rem;
   height: 1px;
-  background-color: var(--color-neutral-200);
+  background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
 }
 
 .Empty {
   box-sizing: border-box;
-  padding: 1rem;
-  font-size: 0.925rem;
+  padding: 1rem 1rem 1rem 0.5rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-600);
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
index cb3e65ba4d7..4c1887fd8e6 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
@@ -4,25 +4,27 @@ import { Autocomplete } from '@base-ui/react/autocomplete';
 export default function ExampleAutocomplete() {
   return (
     <Autocomplete.Root items={tags}>
-      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-950 dark:text-white">
         Search tags
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-neutral-200 pl-3.5 text-base font-normal text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="h-8 w-[16rem] border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
         />
       </label>
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] rounded-md bg-[canvas] text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
-              <div className="p-4 text-[0.925rem] leading-4 text-neutral-600">No tags found.</div>
+              <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
+                No tags found.
+              </div>
             </Autocomplete.Empty>
-            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-[empty]:p-0">
+            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-empty:p-0">
               {(tag: Tag) => (
                 <Autocomplete.Item
                   key={tag.id}
-                  className="flex cursor-default items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900"
+                  className="flex cursor-default items-center gap-2 py-2 pr-8 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                   value={tag}
                 >
                   {tag.value}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
index 65f3888f55a..225b7ba0d86 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
@@ -6,26 +6,21 @@
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-200);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 16rem;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: transparent;
+  color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
   &:focus {
-    border-color: var(--color-blue);
-    outline: 1px solid var(--color-blue);
-  }
-
-  @media (min-width: 500px) {
-    width: 20rem;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -36,7 +31,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Positioner {
@@ -49,23 +44,18 @@
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
   max-height: 23rem;
   max-width: var(--available-width);
+  overflow: clip;
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-neutral-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-neutral-200),
-      0 4px 6px -4px var(--color-neutral-200);
-  }
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
-    outline-offset: -1px;
+    box-shadow: none;
   }
 }
 
@@ -89,17 +79,17 @@
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-left: 1rem;
+  padding-left: 0.5rem;
   padding-right: 2rem;
   display: flex;
   align-items: center;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-neutral-50);
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &[data-highlighted]::before {
@@ -107,8 +97,7 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-neutral-900);
+    inset-inline: 0;
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
index abd5bdfb319..cf62f5af905 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
@@ -4,22 +4,22 @@ import { Autocomplete } from '@base-ui/react/autocomplete';
 export default function ExampleAutocompleteInline() {
   return (
     <Autocomplete.Root items={tags} mode="both">
-      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-950 dark:text-white">
         Search tags
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-neutral-200 pl-3.5 text-base font-normal text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="h-8 w-[16rem] border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
         />
       </label>
 
       <Autocomplete.Portal>
-        <Autocomplete.Positioner className="outline-hidden data-[empty]:hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] rounded-md bg-[canvas] text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300">
-            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-[empty]:p-0">
+        <Autocomplete.Positioner className="outline-hidden data-empty:hidden" sideOffset={4}>
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-empty:p-0">
               {(tag: Tag) => (
                 <Autocomplete.Item
                   key={tag.id}
-                  className="flex cursor-default items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900"
+                  className="flex cursor-default items-center gap-2 py-2 pr-8 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                   value={tag}
                 >
                   {tag.value}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
index d71f39c6631..58344f3a94c 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
@@ -1,25 +1,20 @@
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-200);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 16rem;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: transparent;
+  color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
   &:focus {
-    border-color: var(--color-blue);
-    outline: 1px solid var(--color-blue);
-  }
-
-  @media (min-width: 500px) {
-    width: 20rem;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -30,7 +25,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Positioner {
@@ -40,9 +35,8 @@
 .Popup {
   box-sizing: border-box;
   padding-block: 0.5rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
   max-height: min(var(--available-height), 23rem);
   max-width: var(--available-width);
@@ -50,16 +44,11 @@
   scroll-padding-block: 0.5rem;
   overscroll-behavior: contain;
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-neutral-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-neutral-200),
-      0 4px 6px -4px var(--color-neutral-200);
-  }
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
-    outline-offset: -1px;
+    box-shadow: none;
   }
 }
 
@@ -69,16 +58,16 @@
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-left: 1rem;
+  padding-left: 0.5rem;
   padding-right: 2rem;
   display: flex;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-neutral-50);
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &[data-highlighted]::before {
@@ -86,25 +75,23 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-neutral-900);
+    inset-inline: 0;
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 }
 
 .Empty {
   box-sizing: border-box;
-  padding: 0.5rem 1rem;
-  font-size: 0.925rem;
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-600);
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
 
 .Status {
   box-sizing: border-box;
-  margin-top: 0.25rem;
-  padding: 0.5rem 1rem;
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
index 8e64a9eee27..bc860043d2c 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
@@ -21,19 +21,19 @@ export default function ExampleAutocompleteLimit() {
 
   return (
     <Autocomplete.Root items={tags} value={value} onValueChange={setValue} limit={limit}>
-      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-950 dark:text-white">
         Limit results to 8
         <Autocomplete.Input
           placeholder="e.g. component"
-          className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-neutral-200 pl-3.5 text-base font-normal text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+          className="h-8 w-[16rem] border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
         />
       </label>
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-[canvas] py-2 text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain border border-neutral-950 bg-white py-2 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
-              <div className="px-4 py-2 text-[0.925rem] leading-4 text-neutral-600">
+              <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No results found for "{value}"
               </div>
             </Autocomplete.Empty>
@@ -42,7 +42,7 @@ export default function ExampleAutocompleteLimit() {
               {(tag: Tag) => (
                 <Autocomplete.Item
                   key={tag.id}
-                  className="flex cursor-default py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900"
+                  className="flex cursor-default py-2 pr-8 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                   value={tag}
                 >
                   {tag.value}
@@ -52,7 +52,7 @@ export default function ExampleAutocompleteLimit() {
 
             <Autocomplete.Status>
               {moreCount > 0 ? (
-                <div className="mt-1 px-4 py-2 text-sm text-neutral-600">
+                <div className="py-2 pr-4 pl-2 text-sm text-neutral-500 dark:text-neutral-400">
                   {`Hiding ${moreCount} results (type a more specific query to narrow results)`}
                 </div>
               ) : null}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
index ed09bc82ac5..71634648dfe 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
@@ -1,25 +1,20 @@
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-200);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 16rem;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: transparent;
+  color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
   &:focus {
-    border-color: var(--color-blue);
-    outline: 1px solid var(--color-blue);
-  }
-
-  @media (min-width: 500px) {
-    width: 20rem;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -30,7 +25,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Positioner {
@@ -39,23 +34,18 @@
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
   max-height: min(22rem, var(--available-height));
   max-width: var(--available-width);
+  overflow: clip;
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-neutral-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-neutral-200),
-      0 4px 6px -4px var(--color-neutral-200);
-  }
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
-    outline-offset: -1px;
+    box-shadow: none;
   }
 }
 
@@ -83,16 +73,16 @@
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-left: 1rem;
+  padding-left: 0.5rem;
   padding-right: 2rem;
   display: flex;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-neutral-50);
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &[data-highlighted]::before {
@@ -100,16 +90,15 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-neutral-900);
+    inset-inline: 0;
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 }
 
 .Empty {
   box-sizing: border-box;
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-600);
-  padding: 1rem;
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  padding: 1rem 1rem 1rem 0.5rem;
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
index c601f2e2525..724e99bc057 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
@@ -30,16 +30,16 @@ export default function ExampleVirtualizedAutocomplete() {
         }
       }}
     >
-      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-900">
+      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-950 dark:text-white">
         Search 10,000 items
-        <Autocomplete.Input className="bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-neutral-200 pl-3.5 text-base font-normal text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800" />
+        <Autocomplete.Input className="h-8 w-[16rem] border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white" />
       </label>
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(22rem,var(--available-height))] max-w-[var(--available-width)] rounded-md bg-[canvas] text-neutral-900 outline-1 outline-neutral-200 shadow-lg shadow-neutral-200 dark:-outline-offset-1 dark:outline-neutral-300">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(22rem,var(--available-height))] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
-              <div className="px-4 py-4 text-[0.925rem] leading-4 text-neutral-600">
+              <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No items found.
               </div>
             </Autocomplete.Empty>
@@ -112,7 +112,7 @@ function VirtualizedList({
               data-index={virtualItem.index}
               ref={virtualizer.measureElement}
               value={item}
-              className="flex cursor-default py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900"
+              className="flex cursor-default py-2 pr-8 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
               aria-setsize={filteredItems.length}
               aria-posinset={virtualItem.index + 1}
               style={{

From 12f7cc60e90f5cc081a5c3837951818bd8692390 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 24 Apr 2026 00:37:28 +0200
Subject: [PATCH 099/257] [REMOVE THIS BEFORE MERGING] Mark sidenav links

---
 docs/src/app/(docs)/layout.tsx | 72 +++++++++++++++++++++++++++++++---
 1 file changed, 67 insertions(+), 5 deletions(-)

diff --git a/docs/src/app/(docs)/layout.tsx b/docs/src/app/(docs)/layout.tsx
index 26a24155378..3b66dbc9a85 100644
--- a/docs/src/app/(docs)/layout.tsx
+++ b/docs/src/app/(docs)/layout.tsx
@@ -14,6 +14,56 @@ import { sitemap } from 'docs/src/app/sitemap';
 
 const showPrivatePages = process.env.SHOW_PRIVATE_PAGES === 'true';
 
+const MIGRATED_PATHS = new Set([
+  // Components
+  'accordion',
+  'alert-dialog',
+  'avatar',
+  'autocomplete',
+  'button',
+  'checkbox',
+  'checkbox-group',
+  'collapsible',
+  'context-menu',
+  'dialog',
+  'drawer',
+  'field',
+  'fieldset',
+  'form',
+  'input',
+  'menu',
+  'menubar',
+  'meter',
+  'navigation-menu',
+  'number-field',
+  'otp-field',
+  'popover',
+  'preview-card',
+  'progress',
+  'radio',
+  'scroll-area',
+  'select',
+  'separator',
+  'slider',
+  'switch',
+  'tabs',
+  'toast',
+  'toggle',
+  'toggle-group',
+  'toolbar',
+  'tooltip',
+
+  // Utils
+  'direction-provider',
+  'merge-props',
+  'use-render',
+]);
+
+function isMigratedPath(href: string) {
+  const match =
+    href.match(/^\/react\/components\/([^/]+)\/?$/) || href.match(/^\/react\/utils\/([^/]+)\/?$/);
+  return match ? MIGRATED_PATHS.has(match[1]) : false;
+}
 export default function Layout({ children }: React.PropsWithChildren) {
   return (
     // Use suppressHydrationWarning to avoid https://github.com/facebook/react/issues/24430
@@ -70,15 +120,14 @@ export default function Layout({ children }: React.PropsWithChildren) {
                                   const isNewPage = page.tags?.includes('New');
                                   const isPreviewPage = page.tags?.includes('Preview');
                                   const isPrivatePage = page.audience === 'private';
+                                  const href = page.path.startsWith('./')
+                                    ? `${section.prefix}${page.path.replace(/^\.\//, '').replace(/\/page\.mdx$/, '')}`
+                                    : page.path;
 
                                   return (
                                     <SideNav.Item
                                       key={page.title}
-                                      href={
-                                        page.path.startsWith('./')
-                                          ? `${section.prefix}${page.path.replace(/^\.\//, '').replace(/\/page\.mdx$/, '')}`
-                                          : page.path
-                                      }
+                                      href={href}
                                       external={page.tags?.includes('External')}
                                     >
                                       {(page.title && titleMap[page.title]) || page.title}
@@ -87,6 +136,19 @@ export default function Layout({ children }: React.PropsWithChildren) {
                                       {isNewPage && !isPreviewPage && !isPrivatePage && (
                                         <SideNav.Badge>New</SideNav.Badge>
                                       )}
+                                      {isMigratedPath(href) && (
+                                        <span
+                                          aria-hidden
+                                          style={{
+                                            width: '0.5rem',
+                                            height: '0.5rem',
+                                            borderRadius: '50%',
+                                            backgroundColor: 'var(--orange-t1)',
+                                            flexShrink: '0',
+                                            marginLeft: '4px',
+                                          }}
+                                        />
+                                      )}
                                     </SideNav.Item>
                                   );
                                 })}

From e68ba0a4c61894ea989a91c163d1cd2a599824c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 30 Apr 2026 17:17:48 +0200
Subject: [PATCH 100/257] Menubar: fix popup offset

---
 .../react/components/menubar/demos/hero/css-modules/index.tsx | 4 ++--
 .../react/components/menubar/demos/hero/tailwind/index.tsx    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
index cc009427af6..8f5d6eb7320 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
@@ -60,7 +60,7 @@ export default function ExampleMenubar() {
       <Menu.Root>
         <Menu.Trigger className={styles.MenuTrigger}>Edit</Menu.Trigger>
         <Menu.Portal>
-          <Menu.Positioner className={styles.MenuPositioner} sideOffset={6}>
+          <Menu.Positioner className={styles.MenuPositioner} sideOffset={4}>
             <Menu.Popup className={styles.MenuPopup}>
               <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                 Cut
@@ -79,7 +79,7 @@ export default function ExampleMenubar() {
       <Menu.Root>
         <Menu.Trigger className={styles.MenuTrigger}>View</Menu.Trigger>
         <Menu.Portal>
-          <Menu.Positioner className={styles.MenuPositioner} sideOffset={6}>
+          <Menu.Positioner className={styles.MenuPositioner} sideOffset={4}>
             <Menu.Popup className={styles.MenuPopup}>
               <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                 Zoom In
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
index 66d6c392b66..1752c3b5730 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
@@ -80,7 +80,7 @@ export default function ExampleMenubar() {
           Edit
         </Menu.Trigger>
         <Menu.Portal>
-          <Menu.Positioner className="outline-none" sideOffset={6}>
+          <Menu.Positioner className="outline-none" sideOffset={4}>
             <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
               <Menu.Item
                 onClick={handleClick}
@@ -110,7 +110,7 @@ export default function ExampleMenubar() {
           View
         </Menu.Trigger>
         <Menu.Portal>
-          <Menu.Positioner className="outline-none" sideOffset={6}>
+          <Menu.Positioner className="outline-none" sideOffset={4}>
             <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
               <Menu.Item
                 onClick={handleClick}

From 63031e667fcba85a2c75151798ccfd169a09f9b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 30 Apr 2026 17:28:50 +0200
Subject: [PATCH 101/257] drop-shadow -> box-shadow

---
 .../css-modules/index.module.css              |  71 +++++------
 .../async-single/css-modules/index.module.css |  67 +++++-----
 .../creatable/css-modules/index.module.css    | 114 ++++++++----------
 .../grouped/css-modules/index.module.css      |  74 +++++-------
 .../demos/hero/css-modules/index.module.css   |  64 +++++-----
 .../css-modules/index.module.css              |  75 +++++-------
 .../multiple/css-modules/index.module.css     |  67 +++++-----
 .../virtualized/css-modules/index.module.css  |  53 ++++----
 .../demos/hero/css-modules/index.module.css   |   4 +-
 .../demos/hero/tailwind/index.tsx             |   2 +-
 .../submenu/css-modules/index.module.css      |   4 +-
 .../demos/submenu/tailwind/index.tsx          |   2 +-
 .../demos/hero/css-modules/index.module.css   |   4 +-
 .../menubar/demos/hero/tailwind/index.tsx     |  10 +-
 .../anchored/css-modules/index.module.css     |   4 +-
 .../toast/demos/anchored/tailwind/index.tsx   |   2 +-
 .../demos/custom/css-modules/index.module.css |   4 +-
 .../deduplicate/css-modules/index.module.css  |   4 +-
 .../demos/hero/css-modules/index.module.css   |   4 +-
 .../toast/demos/hero/tailwind/index.tsx       |   2 +-
 .../position/css-modules/index.module.css     |   4 +-
 .../toast/demos/position/tailwind/index.tsx   |   2 +-
 .../promise/css-modules/index.module.css      |   4 +-
 .../demos/undo/css-modules/index.module.css   |   4 +-
 .../css-modules/index.module.css              |   4 +-
 25 files changed, 283 insertions(+), 366 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
index 01d879b604b..d7daf377bd2 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
@@ -4,7 +4,7 @@
   gap: 0.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Label {
@@ -25,13 +25,12 @@
   width: 16rem;
   cursor: text;
 
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: transparent;
 
   &:focus-within {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 
   @media (min-width: 500px) {
@@ -51,9 +50,8 @@
   display: flex;
   align-items: center;
   gap: 0.25rem;
-  border-radius: 0.375rem;
-  background-color: var(--color-neutral-100);
-  color: var(--color-neutral-900);
+  background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+  color: light-dark(var(--color-neutral-950), white);
   padding: 0.25rem 0.25rem 0.25rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -61,14 +59,14 @@
   cursor: default;
 
   &:focus-within {
-    background-color: var(--color-blue);
-    color: var(--color-neutral-50);
+    background-color: light-dark(var(--color-neutral-950), white);
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   @media (hover: hover) {
     &[data-highlighted] {
-      background-color: var(--color-blue);
-      color: var(--color-neutral-50);
+      background-color: light-dark(var(--color-neutral-950), white);
+      color: light-dark(white, var(--color-neutral-950));
     }
   }
 }
@@ -81,11 +79,10 @@
   border: none;
   background: none;
   color: inherit;
-  border-radius: 0.375rem;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-200);
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 }
@@ -97,13 +94,12 @@
   height: 2rem;
   padding: 0;
   border: none;
-  border-radius: 0.375rem;
   padding-left: 0.5rem;
   background: none;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
 
   &:focus {
     outline: none;
@@ -117,9 +113,8 @@
 .Popup {
   box-sizing: border-box;
   padding-block: 0.5rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
   max-height: min(var(--available-height), 23rem);
   max-width: var(--available-width);
@@ -140,16 +135,11 @@
     transition: none;
   }
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-neutral-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-neutral-200),
-      0 4px 6px -4px var(--color-neutral-200);
-  }
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
-    outline-offset: -1px;
+    box-shadow: none;
   }
 }
 
@@ -158,11 +148,11 @@
   align-items: center;
   gap: 0.5rem;
   padding-block: 0.25rem;
-  padding-left: 1rem;
+  padding-left: 0.5rem;
   padding-right: 1.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
 
 .Spinner {
@@ -190,8 +180,8 @@
   box-sizing: border-box;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-600);
-  padding: 0.5rem 1rem;
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
 }
 
 .Item {
@@ -200,20 +190,20 @@
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-inline: 1rem;
+  padding-inline: 0.5rem;
   padding-right: 1.25rem;
   display: grid;
   gap: 0.5rem;
   align-items: flex-start;
   grid-template-columns: 0.75rem 1fr;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1.2rem;
 
   @media (hover: hover) {
     &[data-highlighted] {
       z-index: 0;
       position: relative;
-      color: var(--color-neutral-900);
+      color: light-dark(var(--color-neutral-950), white);
     }
 
     &[data-highlighted]::before {
@@ -221,9 +211,8 @@
       z-index: -1;
       position: absolute;
       inset-block: 0;
-      inset-inline: 0.5rem;
-      border-radius: 0.25rem;
-      background-color: var(--color-neutral-100);
+      inset-inline: 0;
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 }
@@ -256,7 +245,7 @@
   flex-wrap: wrap;
   gap: 0.5rem;
   font-size: 0.8125rem;
-  color: var(--color-neutral-600);
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
 
 .ItemUsername {
@@ -265,5 +254,5 @@
 
 .ItemEmail {
   font-size: 0.75rem;
-  color: var(--color-neutral-500);
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
index 3e921461472..7defff994ab 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
@@ -5,21 +5,20 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
   position: relative;
 }
 
 .InputGroup {
   position: relative;
   width: 16rem;
-  height: 2.5rem;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  height: 2rem;
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: transparent;
 
   &:focus-within {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 
   @media (min-width: 500px) {
@@ -36,15 +35,14 @@
   margin: 0;
   width: 100%;
   height: 100%;
-  padding-left: 0.875rem;
+  padding-left: 0.5rem;
   padding-right: calc(0.5rem + 1.5rem);
   border: none;
-  border-radius: inherit;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
   background-color: transparent;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
 
   &:focus {
     outline: none;
@@ -58,11 +56,10 @@
   align-items: center;
   justify-content: center;
   bottom: 0;
-  height: 2.5rem;
+  height: 2rem;
   right: 0.5rem;
-  border-radius: 0.25rem;
   border: none;
-  color: var(--color-neutral-600);
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   padding: 0;
 }
 
@@ -73,11 +70,10 @@
   align-items: center;
   justify-content: center;
   width: 1.5rem;
-  height: 2.5rem;
-  color: var(--color-neutral-600);
+  height: 2rem;
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   border: none;
   padding: 0;
-  border-radius: 0.25rem;
   background: none;
 }
 
@@ -94,9 +90,8 @@
 .Popup {
   box-sizing: border-box;
   padding-block: 0.5rem;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
   max-height: min(var(--available-height), 23rem);
   max-width: var(--available-width);
@@ -117,16 +112,11 @@
     transition: none;
   }
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-neutral-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-neutral-200),
-      0 4px 6px -4px var(--color-neutral-200);
-  }
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
-    outline-offset: -1px;
+    box-shadow: none;
   }
 }
 
@@ -135,11 +125,11 @@
   align-items: center;
   gap: 0.5rem;
   padding-block: 0.25rem;
-  padding-left: 1rem;
+  padding-left: 0.5rem;
   padding-right: 1.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
 
 .Spinner {
@@ -169,20 +159,20 @@
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-inline: 1rem;
+  padding-inline: 0.5rem;
   padding-right: 1.25rem;
   display: grid;
   gap: 0.5rem;
   align-items: flex-start;
   grid-template-columns: 0.75rem 1fr;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1.2rem;
 
   @media (hover: hover) {
     &[data-highlighted] {
       z-index: 0;
       position: relative;
-      color: var(--color-neutral-900);
+      color: light-dark(var(--color-neutral-950), white);
     }
 
     &[data-highlighted]::before {
@@ -190,9 +180,8 @@
       z-index: -1;
       position: absolute;
       inset-block: 0;
-      inset-inline: 0.5rem;
-      border-radius: 0.25rem;
-      background-color: var(--color-neutral-100);
+      inset-inline: 0;
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 }
@@ -225,7 +214,7 @@
   flex-wrap: wrap;
   gap: 0.75rem;
   font-size: 0.8125rem;
-  color: var(--color-neutral-600);
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
 
 .ItemUsername {
@@ -241,6 +230,6 @@
   box-sizing: border-box;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-600);
-  padding: 0.5rem 1rem;
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
index 06a520ea02d..fe5fbe957e1 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
@@ -12,7 +12,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .InputGroup {
@@ -21,16 +21,15 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 0.125rem;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: transparent;
   padding: 0.25rem 0.375rem;
   width: 16rem;
   cursor: text;
 
   &:focus-within {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 
   @media (min-width: 500px) {
@@ -49,9 +48,8 @@
 .Chip {
   display: flex;
   align-items: center;
-  background-color: var(--color-neutral-100);
-  color: var(--color-neutral-900);
-  border-radius: 0.375rem;
+  background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+  color: light-dark(var(--color-neutral-950), white);
   font-size: 0.875rem;
   padding: 0.2rem 0.2rem 0.2rem 0.4rem;
   overflow: hidden;
@@ -60,14 +58,14 @@
   cursor: default;
 
   &:focus-within {
-    background-color: var(--color-blue);
-    color: var(--color-neutral-50);
+    background-color: light-dark(var(--color-neutral-950), white);
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   @media (hover: hover) {
     &[data-highlighted] {
-      background-color: var(--color-blue);
-      color: var(--color-neutral-50);
+      background-color: light-dark(var(--color-neutral-950), white);
+      color: light-dark(white, var(--color-neutral-950));
     }
   }
 }
@@ -80,10 +78,9 @@
   align-items: center;
   justify-content: center;
   color: inherit;
-  border-radius: 0.375rem;
 
   &:hover {
-    background-color: rgb(0 0 0 / 0.1);
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 }
 
@@ -94,12 +91,11 @@
   margin: 0;
   border: none;
   height: 2rem;
-  border-radius: 0.375rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
   background-color: transparent;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
   min-width: 3rem;
 
   &:focus {
@@ -114,10 +110,9 @@
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.5rem;
   padding-block: 0.5rem;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
   max-width: var(--available-width);
   max-height: min(var(--available-height), 24rem);
@@ -125,16 +120,11 @@
   scroll-padding-block: 0.5rem;
   overscroll-behavior: contain;
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-neutral-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-neutral-200),
-      0 4px 6px -4px var(--color-neutral-200);
-  }
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
-    outline-offset: -1px;
+    box-shadow: none;
   }
 }
 
@@ -144,19 +134,19 @@
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-left: 1rem;
+  padding-left: 0.5rem;
   padding-right: 2rem;
   display: grid;
   gap: 0.5rem;
   align-items: center;
   grid-template-columns: 0.75rem 1fr;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-selected] {
     z-index: 0;
     position: relative;
-    color: var(--color-neutral-900);
+    color: light-dark(var(--color-neutral-950), white);
   }
 
   &[data-selected]::before,
@@ -165,19 +155,18 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
+    inset-inline: 0;
   }
 
   @media (hover: hover) {
     &[data-highlighted] {
       z-index: 0;
       position: relative;
-      color: var(--color-neutral-50);
+      color: light-dark(white, var(--color-neutral-950));
     }
 
     &[data-highlighted]::before {
-      background-color: var(--color-neutral-900);
+      background-color: light-dark(var(--color-neutral-950), white);
     }
   }
 }
@@ -198,10 +187,10 @@
 
 .Empty {
   box-sizing: border-box;
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-600);
-  padding: 0.5rem 1rem;
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
 }
 
 /* Creatable option styling */
@@ -215,10 +204,9 @@
   border: none;
   background: none;
   text-align: left;
-  color: var(--color-neutral-900);
-  padding: 0.5rem 2rem 0.5rem 1rem;
+  color: light-dark(var(--color-neutral-950), white);
+  padding: 0.5rem 2rem 0.5rem 0.5rem;
   cursor: default;
-  border-radius: 0.25rem;
 }
 
 .CreateIcon {
@@ -264,14 +252,14 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 1.5rem;
-  border-radius: 0.5rem;
-  outline: 1px solid var(--color-neutral-200);
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition: all 150ms;
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
+    box-shadow: none;
   }
 
   &[data-starting-style],
@@ -293,23 +281,22 @@
   margin: 0 0 1rem;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--color-neutral-600);
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
 
 .TextField {
   box-sizing: border-box;
   width: 100%;
-  height: 2.5rem;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-neutral-900);
-  padding: 0 0.625rem;
+  height: 2rem;
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: transparent;
+  color: light-dark(var(--color-neutral-950), white);
+  padding-inline: 0.5rem;
   font: inherit;
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -329,28 +316,27 @@
   padding: 0 0.875rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-neutral-50);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5rem;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-100);
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
index 5999a33da85..c4c2366cdf9 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
@@ -1,14 +1,13 @@
 .InputGroup {
   position: relative;
   width: 16rem;
-  height: 2.5rem;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  height: 2rem;
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: transparent;
 
   &:focus-within {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -18,18 +17,17 @@
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding-left: 0.5rem;
   padding-right: calc(0.5rem + 1.5rem);
   margin: 0;
   border: none;
   width: 100%;
   height: 100%;
-  border-radius: inherit;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
   background-color: transparent;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
   &:focus {
@@ -44,7 +42,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
   position: relative;
 }
 
@@ -56,11 +54,10 @@
   align-items: center;
   justify-content: center;
   bottom: 0;
-  height: 2.5rem;
+  height: 2rem;
   right: 0.5rem;
-  border-radius: 0.25rem;
   border: none;
-  color: var(--color-neutral-600);
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   padding: 0;
 }
 
@@ -71,11 +68,10 @@
   align-items: center;
   justify-content: center;
   width: var(--size);
-  height: 2.5rem;
-  color: var(--color-neutral-600);
+  height: 2rem;
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   border: none;
   padding: 0;
-  border-radius: 0.25rem;
   background: none;
 }
 
@@ -91,10 +87,9 @@
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.375rem;
-  overflow: hidden;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  overflow: clip;
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
   max-height: 23rem;
   max-width: var(--available-width);
@@ -109,15 +104,11 @@
     transform: scale(0.95);
   }
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-neutral-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-neutral-200),
-      0 4px 6px -4px var(--color-neutral-200);
-  }
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
+    box-shadow: none;
   }
 }
 
@@ -138,17 +129,17 @@
 
 .GroupLabel {
   box-sizing: border-box;
-  padding: 0.75rem 1rem 0.25rem calc(1rem + 0.75rem + 0.5rem);
-  font-size: 0.6875rem;
+  padding: 0.5rem 1rem 0.25rem 0.5rem;
+  font-size: 0.75rem;
   font-weight: 700;
+  line-height: 1rem;
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  background-color: canvas;
+  background-color: light-dark(white, var(--color-neutral-950));
   position: sticky;
   z-index: 1;
   top: 0;
-  margin: 0 0.5rem 0 0;
-  width: calc(100% - 0.5rem);
 }
 
 .Item {
@@ -156,18 +147,18 @@
   outline: 0;
   cursor: default;
   user-select: none;
-  padding: 0.5rem 2rem 0.5rem 1rem;
+  padding: 0.5rem 2rem 0.5rem 0.5rem;
   display: grid;
   grid-template-columns: 0.75rem 1fr;
   gap: 0.5rem;
   align-items: center;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-neutral-50);
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &[data-highlighted]::before {
@@ -175,9 +166,8 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-neutral-900);
+    inset-inline: 0;
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 }
 
@@ -197,8 +187,8 @@
 
 .Empty {
   box-sizing: border-box;
-  padding: 1rem;
-  font-size: 0.925rem;
+  padding: 1rem 1rem 1rem 0.5rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-600);
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
index 63bcda18013..f3551baa443 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
@@ -1,14 +1,13 @@
 .InputGroup {
   position: relative;
   width: 16rem;
-  height: 2.5rem;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  height: 2rem;
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: transparent;
 
   &:focus-within {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 
   &:has(.Clear) .Input {
@@ -18,18 +17,17 @@
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding-left: 0.5rem;
   padding-right: calc(0.5rem + 1.5rem);
   margin: 0;
   border: none;
   width: 100%;
   height: 100%;
-  border-radius: inherit;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
   background-color: transparent;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
 
   &:focus {
     outline: none;
@@ -43,7 +41,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
   position: relative;
 }
 
@@ -54,11 +52,10 @@
   align-items: center;
   justify-content: center;
   bottom: 0;
-  height: 2.5rem;
+  height: 2rem;
   right: 0.5rem;
-  border-radius: 0.25rem;
   border: none;
-  color: var(--color-neutral-600);
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   padding: 0;
 }
 
@@ -69,11 +66,10 @@
   align-items: center;
   justify-content: center;
   width: 1.5rem;
-  height: 2.5rem;
-  color: var(--color-neutral-600);
+  height: 2rem;
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   border: none;
   padding: 0;
-  border-radius: 0.25rem;
   background: none;
 }
 
@@ -89,12 +85,12 @@
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
   max-height: 23rem;
   max-width: var(--available-width);
+  overflow: clip;
   transition:
     opacity 0.1s,
     transform 0.1s;
@@ -106,16 +102,11 @@
     transform: scale(0.95);
   }
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-neutral-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-neutral-200),
-      0 4px 6px -4px var(--color-neutral-200);
-  }
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
-    outline-offset: -1px;
+    box-shadow: none;
   }
 }
 
@@ -139,19 +130,19 @@
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-left: 1rem;
+  padding-left: 0.5rem;
   padding-right: 2rem;
   display: grid;
   gap: 0.5rem;
   align-items: center;
   grid-template-columns: 0.75rem 1fr;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-neutral-50);
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &[data-highlighted]::before {
@@ -159,9 +150,8 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-neutral-900);
+    inset-inline: 0;
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 }
 
@@ -180,8 +170,8 @@
 }
 
 .Empty {
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-600);
-  padding: 1rem;
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  padding: 1rem 1rem 1rem 0.5rem;
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
index a01f1bc4809..3137af3ab88 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
@@ -16,31 +16,30 @@
   padding-right: 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   font-family: inherit;
   font-size: 1rem;
   line-height: 1.5rem;
   font-weight: 400;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
   cursor: default;
-  background-color: canvas;
+  background-color: light-dark(white, var(--color-neutral-950));
   user-select: none;
   min-width: 12rem;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -57,27 +56,26 @@
   width: 20rem;
   height: var(--input-container-height);
   text-align: center;
-  padding: 0.5rem;
+  background-color: light-dark(white, var(--color-neutral-950));
 }
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-300);
+  border: none;
   min-width: 18rem;
   width: 100%;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: transparent;
+  color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
   &:focus {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid var(--color-blue-800);
     outline-offset: -1px;
   }
 }
@@ -86,7 +84,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
   cursor: default;
 }
 
@@ -95,11 +93,10 @@
 }
 
 .Popup {
-  --input-container-height: 3rem;
+  --input-container-height: 2rem;
   box-sizing: border-box;
-  border-radius: 0.5rem;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   transform-origin: var(--transform-origin);
   transition:
     transform 150ms,
@@ -113,16 +110,11 @@
     transform: scale(0.9);
   }
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-neutral-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-neutral-200),
-      0 4px 6px -4px var(--color-neutral-200);
-  }
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
-    outline-offset: -1px;
+    box-shadow: none;
   }
 }
 
@@ -133,8 +125,8 @@
   padding-block: 0.5rem;
   overscroll-behavior: contain;
   max-height: min(
-    calc(24rem - var(--input-container-height)),
-    calc(var(--available-height) - var(--input-container-height))
+    calc(24rem - var(--input-container-height) - 2px),
+    calc(var(--available-height) - var(--input-container-height) - 2px)
   );
 
   &:empty {
@@ -149,19 +141,19 @@
   user-select: none;
   min-width: var(--anchor-width);
   padding-block: 0.5rem;
-  padding-left: 1rem;
+  padding-left: 0.5rem;
   padding-right: 2rem;
   display: grid;
   gap: 0.5rem;
   align-items: center;
   grid-template-columns: 0.75rem 1fr;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-neutral-50);
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &[data-highlighted]::before {
@@ -169,9 +161,8 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-neutral-900);
+    inset-inline: 0;
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 }
 
@@ -192,13 +183,13 @@
 .Separator {
   margin: 0.375rem 1rem;
   height: 1px;
-  background-color: var(--color-neutral-200);
+  background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
 }
 
 .Empty {
   box-sizing: border-box;
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-600);
-  padding: 1rem;
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  padding: 1rem 1rem 1rem 0.5rem;
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
index 60fa4136d82..6baffd844c1 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
@@ -12,7 +12,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .InputGroup {
@@ -21,16 +21,15 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 0.125rem;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: transparent;
   padding: 0.25rem 0.375rem;
   width: 16rem;
   cursor: text;
 
   &:focus-within {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 
   @media (min-width: 500px) {
@@ -49,9 +48,8 @@
 .Chip {
   display: flex;
   align-items: center;
-  background-color: var(--color-neutral-100);
-  color: var(--color-neutral-900);
-  border-radius: 0.375rem;
+  background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+  color: light-dark(var(--color-neutral-950), white);
   font-size: 0.875rem;
   padding: 0.2rem 0.2rem 0.2rem 0.4rem;
   overflow: hidden;
@@ -60,14 +58,14 @@
   cursor: default;
 
   &:focus-within {
-    background-color: var(--color-blue);
-    color: var(--color-neutral-50);
+    background-color: light-dark(var(--color-neutral-950), white);
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   @media (hover: hover) {
     &[data-highlighted] {
-      background-color: var(--color-blue);
-      color: var(--color-neutral-50);
+      background-color: light-dark(var(--color-neutral-950), white);
+      color: light-dark(white, var(--color-neutral-950));
     }
   }
 }
@@ -93,11 +91,10 @@
   align-items: center;
   justify-content: center;
   color: inherit;
-  border-radius: 0.375rem;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-200);
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 }
@@ -109,12 +106,11 @@
   margin: 0;
   border: none;
   height: 2rem;
-  border-radius: 0.375rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
   background-color: transparent;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
   min-width: 3rem;
 
   &:focus {
@@ -129,10 +125,9 @@
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.5rem;
   padding-block: 0.5rem;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
   max-width: var(--available-width);
   max-height: min(var(--available-height), 24rem);
@@ -150,16 +145,11 @@
     transform: scale(0.95);
   }
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-neutral-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-neutral-200),
-      0 4px 6px -4px var(--color-neutral-200);
-  }
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
-    outline-offset: -1px;
+    box-shadow: none;
   }
 }
 
@@ -169,19 +159,19 @@
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-left: 1rem;
+  padding-left: 0.5rem;
   padding-right: 2rem;
   display: grid;
   gap: 0.5rem;
   align-items: center;
   grid-template-columns: 0.75rem 1fr;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-selected] {
     z-index: 0;
     position: relative;
-    color: var(--color-neutral-900);
+    color: light-dark(var(--color-neutral-950), white);
   }
 
   &[data-selected]::before,
@@ -190,19 +180,18 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
+    inset-inline: 0;
   }
 
   @media (hover: hover) {
     &[data-highlighted] {
       z-index: 0;
       position: relative;
-      color: var(--color-neutral-50);
+      color: light-dark(white, var(--color-neutral-950));
     }
 
     &[data-highlighted]::before {
-      background-color: var(--color-neutral-900);
+      background-color: light-dark(var(--color-neutral-950), white);
     }
   }
 }
@@ -228,8 +217,8 @@
 
 .Empty {
   box-sizing: border-box;
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-600);
-  padding: 0.5rem 1rem;
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
index 5b853f044fb..e290db7162e 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
@@ -1,21 +1,20 @@
 .Input {
   box-sizing: border-box;
-  padding-left: 0.875rem;
+  padding-inline: 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-200);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 16rem;
-  height: 2.5rem;
-  border-radius: 0.375rem;
+  height: 2rem;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: transparent;
+  color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
   &:focus {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -26,7 +25,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Positioner {
@@ -35,23 +34,18 @@
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.375rem;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
   max-height: min(22rem, var(--available-height));
   max-width: var(--available-width);
+  overflow: clip;
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-neutral-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-neutral-200),
-      0 4px 6px -4px var(--color-neutral-200);
-  }
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
-    outline-offset: -1px;
+    box-shadow: none;
   }
 }
 
@@ -80,19 +74,19 @@
   cursor: default;
   user-select: none;
   padding-block: 0.5rem;
-  padding-left: 1rem;
+  padding-left: 0.5rem;
   padding-right: 2rem;
   display: grid;
   gap: 0.5rem;
   align-items: center;
   grid-template-columns: 0.75rem 1fr;
-  font-size: 1rem;
+  font-size: 0.875rem;
   line-height: 1rem;
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: var(--color-neutral-50);
+    color: light-dark(white, var(--color-neutral-950));
   }
 
   &[data-highlighted]::before {
@@ -100,9 +94,8 @@
     z-index: -1;
     position: absolute;
     inset-block: 0;
-    inset-inline: 0.5rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-neutral-900);
+    inset-inline: 0;
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 }
 
@@ -122,8 +115,8 @@
 
 .Empty {
   box-sizing: border-box;
-  font-size: 0.925rem;
+  font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-600);
-  padding: 1rem;
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  padding: 1rem 1rem 1rem 0.5rem;
 }
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
index d3e882fa63c..68ed29c7dd5 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
@@ -31,7 +31,7 @@
   border-radius: 0;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
@@ -44,7 +44,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
index 09a3dcd12f5..5eb1f0fcb09 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
@@ -11,7 +11,7 @@ export default function ExampleMenu() {
       </ContextMenu.Trigger>
       <ContextMenu.Portal>
         <ContextMenu.Positioner className="outline-hidden">
-          <ContextMenu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+          <ContextMenu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] outline-hidden transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <ContextMenu.Item className={itemClass}>Add to Library</ContextMenu.Item>
             <ContextMenu.Item className={itemClass}>Add to Playlist</ContextMenu.Item>
             <ContextMenu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
index e62082dbb28..c45d3e4a0b8 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
@@ -32,7 +32,7 @@
   border-radius: 0;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
@@ -45,7 +45,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
index e35da42e8fa..8aca78a8f50 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ContextMenu } from '@base-ui/react/context-menu';
 
 const popupClass =
-  'origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
+  'origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] outline-hidden transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
 const itemClass =
   "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 data-[disabled]:text-neutral-500 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-neutral-400";
 const submenuTriggerClass =
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
index 93a7d60215f..d039313a461 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
@@ -54,7 +54,7 @@
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
@@ -71,7 +71,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
index 1752c3b5730..c48738686fd 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleMenubar() {
         </Menu.Trigger>
         <Menu.Portal>
           <Menu.Positioner className="outline-none" sideOffset={4}>
-            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Menu.Item
                 onClick={handleClick}
                 className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
@@ -39,7 +39,7 @@ export default function ExampleMenubar() {
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
                   <Menu.Positioner className="outline-none" sideOffset={-4} alignOffset={-4}>
-                    <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+                    <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
                       <Menu.Item
                         onClick={handleClick}
                         className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
@@ -81,7 +81,7 @@ export default function ExampleMenubar() {
         </Menu.Trigger>
         <Menu.Portal>
           <Menu.Positioner className="outline-none" sideOffset={4}>
-            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Menu.Item
                 onClick={handleClick}
                 className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
@@ -111,7 +111,7 @@ export default function ExampleMenubar() {
         </Menu.Trigger>
         <Menu.Portal>
           <Menu.Positioner className="outline-none" sideOffset={4}>
-            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Menu.Item
                 onClick={handleClick}
                 className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
@@ -132,7 +132,7 @@ export default function ExampleMenubar() {
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
                   <Menu.Positioner className="outline-none" sideOffset={-4} alignOffset={-4}>
-                    <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+                    <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
                       <Menu.Item
                         onClick={handleClick}
                         className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
index 526427356d8..11fe31f2cec 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
@@ -75,7 +75,7 @@
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   padding: 0.75rem;
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
   left: auto;
@@ -98,7 +98,7 @@
     scale(var(--scale));
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 
   &[data-expanded] {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index 2b9ffd4d9c3..e899f28ae11 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -123,7 +123,7 @@ function StackedToasts() {
           <Toast.Root
             key={toast.id}
             toast={toast}
-            className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none] after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+            className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
           >
             <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-[behind]:opacity-0 data-[expanded]:opacity-100">
               <div className="min-w-0 flex-1">
diff --git a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
index 8f7b36ec129..947b703565c 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
@@ -34,7 +34,7 @@
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   padding: 0.75rem;
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
   left: auto;
@@ -57,7 +57,7 @@
     scale(var(--scale));
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 
   &[data-expanded] {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
index 63a5011da9a..054f1e0ea4e 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
@@ -34,7 +34,7 @@
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   padding: 0.75rem;
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
   left: auto;
@@ -57,7 +57,7 @@
     scale(var(--scale));
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 
   &[data-expanded] {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
index 8f7b36ec129..947b703565c 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
@@ -34,7 +34,7 @@
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   padding: 0.75rem;
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
   left: auto;
@@ -57,7 +57,7 @@
     scale(var(--scale));
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 
   &[data-expanded] {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
index 84d6f456e89..6ce7297e368 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
@@ -44,7 +44,7 @@ function ToastList() {
     <Toast.Root
       key={toast.id}
       toast={toast}
-      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none] after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
     >
       <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-[behind]:opacity-0 data-[expanded]:opacity-100">
         <div className="min-w-0 flex-1">
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
index 5f28661f27a..4815639a476 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
@@ -27,7 +27,7 @@
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   padding: 0.75rem;
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: top center;
   top: 0;
   left: 0;
@@ -52,7 +52,7 @@
     scale(var(--scale));
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 
   &[data-expanded] {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
index 6b1619761d1..5c6fc7c8cc6 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
@@ -45,7 +45,7 @@ function ToastList() {
       key={toast.id}
       toast={toast}
       swipeDirection="up"
-      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)+(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))] absolute top-0 right-0 left-0 z-[calc(1000-var(--toast-index))] mx-auto w-full origin-top [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none] after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(-150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)+(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))] absolute top-0 right-0 left-0 z-[calc(1000-var(--toast-index))] mx-auto w-full origin-top [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(-150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
     >
       <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-[behind]:opacity-0 data-[expanded]:opacity-100">
         <div className="min-w-0 flex-1">
diff --git a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
index 175971c1b14..568bf6d7173 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
@@ -34,7 +34,7 @@
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   padding: 0.75rem;
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
   left: auto;
@@ -57,7 +57,7 @@
     scale(var(--scale));
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 
   &[data-expanded] {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
index 6741f6febdd..e0bacbbc981 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
@@ -34,7 +34,7 @@
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   padding: 0.75rem;
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
   left: auto;
@@ -57,7 +57,7 @@
     scale(var(--scale));
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 
   &[data-expanded] {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
index e8f1c88973e..ab2334fd7b6 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
@@ -34,7 +34,7 @@
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   padding: 0.75rem;
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
   left: auto;
@@ -57,7 +57,7 @@
     scale(var(--scale));
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 
   &[data-expanded] {

From 8d5cc501a63746a94fc00522ad24ca425fa17147 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 30 Apr 2026 17:35:50 +0200
Subject: [PATCH 102/257] Toast: fix offset in anchored demo

---
 .../react/components/toast/demos/anchored/css-modules/index.tsx | 2 +-
 .../react/components/toast/demos/anchored/tailwind/index.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
index 4fdf1202644..caa8362a67e 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
@@ -73,7 +73,7 @@ function CopyButton() {
         {copied ? <CheckIcon className={styles.Icon} /> : <ClipboardIcon className={styles.Icon} />}
       </Tooltip.Trigger>
       <Tooltip.Portal>
-        <Tooltip.Positioner sideOffset={8}>
+        <Tooltip.Positioner sideOffset={10}>
           <Tooltip.Popup className={styles.Tooltip}>
             <Tooltip.Arrow className={styles.Arrow} />
             Copy
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index e899f28ae11..51185b33664 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -76,7 +76,7 @@ function CopyButton() {
         {copied ? <CheckIcon className="h-4 w-4" /> : <ClipboardIcon className="h-4 w-4" />}
       </Tooltip.Trigger>
       <Tooltip.Portal>
-        <Tooltip.Positioner sideOffset={8}>
+        <Tooltip.Positioner sideOffset={10}>
           <Tooltip.Popup className="flex origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-instant:duration-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
             <Tooltip.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
             Copy

From 8f3b6d8e3f6ad281e6e99e585a257245039a6c45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 30 Apr 2026 17:36:06 +0200
Subject: [PATCH 103/257] Toast: fix disabled icon button color

---
 .../toast/demos/anchored/css-modules/index.module.css        | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
index 11fe31f2cec..07a564c55e1 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
@@ -356,11 +356,6 @@
     background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
-  &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-  }
-
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;

From 1551d6061e4f20c0abf9b3b2149d17ca158f662a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 30 Apr 2026 17:48:13 +0200
Subject: [PATCH 104/257] px -> rem for shadows

---
 .../demos/detached-triggers-controlled/tailwind/index.tsx     | 2 +-
 .../demos/detached-triggers-simple/tailwind/index.tsx         | 2 +-
 .../components/alert-dialog/demos/hero/tailwind/index.tsx     | 2 +-
 .../combobox/demos/async-multiple/tailwind/index.tsx          | 2 +-
 .../components/combobox/demos/async-single/tailwind/index.tsx | 2 +-
 .../dialog/demos/close-confirmation/tailwind/index.tsx        | 4 ++--
 .../demos/detached-triggers-controlled/tailwind/index.tsx     | 2 +-
 .../dialog/demos/detached-triggers-simple/tailwind/index.tsx  | 2 +-
 .../react/components/dialog/demos/hero/tailwind/index.tsx     | 2 +-
 .../components/dialog/demos/inside-scroll/tailwind/index.tsx  | 2 +-
 .../react/components/dialog/demos/nested/tailwind/index.tsx   | 4 ++--
 .../components/dialog/demos/outside-scroll/tailwind/index.tsx | 2 +-
 .../components/dialog/demos/uncontained/tailwind/index.tsx    | 4 ++--
 .../components/menu/demos/checkbox-items/tailwind/index.tsx   | 2 +-
 .../demos/detached-triggers-controlled/tailwind/index.tsx     | 2 +-
 .../menu/demos/detached-triggers-full/tailwind/index.tsx      | 2 +-
 .../menu/demos/detached-triggers-simple/tailwind/index.tsx    | 2 +-
 .../components/menu/demos/group-labels/tailwind/index.tsx     | 2 +-
 .../react/components/menu/demos/hero/tailwind/index.tsx       | 2 +-
 .../components/menu/demos/open-on-hover/tailwind/index.tsx    | 2 +-
 .../components/menu/demos/radio-items/tailwind/index.tsx      | 2 +-
 .../react/components/menu/demos/submenu/tailwind/index.tsx    | 2 +-
 .../components/navigation-menu/demos/hero/tailwind/index.tsx  | 2 +-
 .../navigation-menu/demos/nested-inline/tailwind/index.tsx    | 2 +-
 .../navigation-menu/demos/nested/tailwind/index.tsx           | 4 ++--
 .../demos/detached-triggers-controlled/tailwind/index.tsx     | 2 +-
 .../popover/demos/detached-triggers-full/tailwind/index.tsx   | 2 +-
 .../popover/demos/detached-triggers-simple/tailwind/index.tsx | 2 +-
 .../react/components/popover/demos/hero/tailwind/index.tsx    | 2 +-
 .../components/popover/demos/open-on-hover/tailwind/index.tsx | 2 +-
 .../demos/detached-triggers-controlled/tailwind/index.tsx     | 2 +-
 .../demos/detached-triggers-full/tailwind/index.tsx           | 2 +-
 .../demos/detached-triggers-simple/tailwind/index.tsx         | 2 +-
 .../components/preview-card/demos/hero/tailwind/index.tsx     | 2 +-
 .../react/components/toast/demos/anchored/tailwind/index.tsx  | 4 ++--
 .../demos/detached-triggers-controlled/tailwind/index.tsx     | 2 +-
 .../tooltip/demos/detached-triggers-full/tailwind/index.tsx   | 2 +-
 .../tooltip/demos/detached-triggers-simple/tailwind/index.tsx | 2 +-
 .../react/components/tooltip/demos/hero/tailwind/index.tsx    | 2 +-
 39 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index c0a0d28d99a..2b11230000c 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -71,7 +71,7 @@ export default function AlertDialogDetachedTriggersControlledDemo() {
         {({ payload }) => (
           <AlertDialog.Portal>
             <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-            <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+            <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
               <AlertDialog.Title className="text-sm font-bold">
                 {payload?.message ?? 'Are you sure?'}
               </AlertDialog.Title>
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
index 2d88963776b..aed850d00a9 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -19,7 +19,7 @@ export default function AlertDialogDetachedTriggersSimpleDemo() {
       <AlertDialog.Root handle={demoAlertDialog}>
         <AlertDialog.Portal>
           <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-          <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+          <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
             <AlertDialog.Title className="text-sm font-bold">Discard draft?</AlertDialog.Title>
             <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
               This action cannot be undone.
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
index eeb43bb5455..4512b940ebe 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
@@ -11,7 +11,7 @@ export default function ExampleAlertDialog() {
       <AlertDialog.Trigger className={dangerButtonClasses}>Discard draft</AlertDialog.Trigger>
       <AlertDialog.Portal>
         <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+        <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
           <AlertDialog.Title className="text-sm font-bold">Discard draft?</AlertDialog.Title>
           <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
             You can’t undo this action.
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index d1330867b5c..f5e84147e2f 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -173,7 +173,7 @@ export default function ExampleAsyncMultipleCombobox() {
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
           <Combobox.Popup
-            className="box-border w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto scroll-pb-2 scroll-pt-2 overscroll-contain rounded-md bg-[canvas] py-2 text-neutral-900 shadow-[0_10px_15px_-3px_var(--color-neutral-200),0_4px_6px_-4px_var(--color-neutral-200)] outline outline-1 outline-neutral-200 transition-[opacity,transform,scale] duration-100 data-[ending-style]:transition-none data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:-outline-offset-1 dark:shadow-none dark:outline-neutral-300"
+            className="box-border w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto scroll-pb-2 scroll-pt-2 overscroll-contain rounded-md bg-[canvas] py-2 text-neutral-900 shadow-[0_0.625rem_0.9375rem_-0.1875rem_var(--color-neutral-200),0_0.25rem_0.375rem_-0.25rem_var(--color-neutral-200)] outline outline-1 outline-neutral-200 transition-[opacity,transform,scale] duration-100 data-[ending-style]:transition-none data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:-outline-offset-1 dark:shadow-none dark:outline-neutral-300"
             aria-busy={isPending || undefined}
           >
             <Combobox.Status>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index 713522c5377..7b38cc2a3c2 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -139,7 +139,7 @@ export default function ExampleAsyncSingleCombobox() {
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
           <Combobox.Popup
-            className="box-border w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto scroll-pb-2 scroll-pt-2 overscroll-contain rounded-md bg-[canvas] py-2 text-neutral-900 shadow-[0_10px_15px_-3px_var(--color-neutral-200),0_4px_6px_-4px_var(--color-neutral-200)] outline outline-1 outline-neutral-200 transition-[transform,scale,opacity] data-[ending-style]:transition-none data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:-outline-offset-1 dark:shadow-none dark:outline-neutral-300"
+            className="box-border w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto scroll-pb-2 scroll-pt-2 overscroll-contain rounded-md bg-[canvas] py-2 text-neutral-900 shadow-[0_0.625rem_0.9375rem_-0.1875rem_var(--color-neutral-200),0_0.25rem_0.375rem_-0.25rem_var(--color-neutral-200)] outline outline-1 outline-neutral-200 transition-[transform,scale,opacity] data-[ending-style]:transition-none data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:-outline-offset-1 dark:shadow-none dark:outline-neutral-300"
             aria-busy={isPending || undefined}
           >
             <Combobox.Status>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
index 9c859512ebc..e6c62e54583 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
@@ -29,7 +29,7 @@ export default function ExampleDialog() {
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-[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))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-[0.98] data-[starting-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))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
           <Dialog.Title id={titleId} className="text-sm font-bold">
             New tweet
           </Dialog.Title>
@@ -67,7 +67,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))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-[0.98] data-[starting-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))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
             <AlertDialog.Title className="text-sm font-bold">Discard tweet?</AlertDialog.Title>
             <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
               Your tweet will be lost.
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 4d4fee5375b..8b99e93e022 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -64,7 +64,7 @@ export default function DialogDetachedTriggersControlledDemo() {
         {({ payload }) => (
           <Dialog.Portal>
             <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-            <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+            <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
               {payload !== undefined && (
                 <Dialog.Title className="text-sm font-bold">Dialog {payload}</Dialog.Title>
               )}
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
index f94c39c7311..f9f54fdc79e 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -17,7 +17,7 @@ export default function DialogDetachedTriggersSimpleDemo() {
       <Dialog.Root handle={demoDialog}>
         <Dialog.Portal>
           <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-          <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+          <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
             <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
             <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
               You are all caught up. Good job!
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
index 52b08bb3bb2..3199e5d0fdc 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleDialog() {
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+        <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
           <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
           <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
             You are all caught up. Good job!
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
index 3ad189f9cd4..b1424d3f94c 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
@@ -11,7 +11,7 @@ export default function InsideScrollDialog() {
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="fixed inset-0 flex items-center justify-center overflow-hidden py-6 [@media(min-height:600px)]:pb-12 [@media(min-height:600px)]:pt-8">
-          <Dialog.Popup className="relative flex w-[min(40rem,calc(100vw-2rem))] max-h-full max-w-full min-h-0 flex-col overflow-hidden bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0">
+          <Dialog.Popup className="relative flex w-[min(40rem,calc(100vw-2rem))] max-h-full max-w-full min-h-0 flex-col overflow-hidden bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0">
             <div className="px-4 pt-4 pb-3">
               <Dialog.Title className="m-0 mb-1 text-base font-bold">Dialog</Dialog.Title>
               <Dialog.Description className="m-0 text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
index e9930966c82..d2982a7ce2f 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleDialog() {
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-[ending-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:opacity-100 data-[starting-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0">
+        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-[ending-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:opacity-100 data-[starting-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0">
           <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
           <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
             You are all caught up. Good job!
@@ -19,7 +19,7 @@ export default function ExampleDialog() {
                 Customize
               </Dialog.Trigger>
               <Dialog.Portal>
-                <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-[ending-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:opacity-100 data-[starting-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0">
+                <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-[ending-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:opacity-100 data-[starting-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0">
                   <Dialog.Title className="text-sm font-bold">Customize notifications</Dialog.Title>
                   <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
                     Review your settings here.
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index 52d306f4bd0..ec9e95841a5 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -22,7 +22,7 @@ export default function OutsideScrollDialog() {
                 <Dialog.Popup
                   ref={popupRef}
                   initialFocus={popupRef}
-                  className="outline-0 relative mx-auto my-16 w-[min(40rem,calc(100vw-2rem))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[translate] duration-[350ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-[starting-style]:translate-y-[100dvh] data-[ending-style]:translate-y-[max(100dvh,100%)] data-[ending-style]:duration-[220ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] motion-reduce:transition-none"
+                  className="outline-0 relative mx-auto my-16 w-[min(40rem,calc(100vw-2rem))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate] duration-[350ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-[starting-style]:translate-y-[100dvh] data-[ending-style]:translate-y-[max(100dvh,100%)] data-[ending-style]:duration-[220ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] motion-reduce:transition-none"
                 >
                   <div className="mb-1 flex items-start justify-between gap-3">
                     <Dialog.Title className="m-0 text-base font-bold">Dialog</Dialog.Title>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
index 9b1cbbb0f9d..32eb1ec18f5 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
@@ -11,12 +11,12 @@ export default function ExampleUncontainedDialog() {
         <Dialog.Viewport className="fixed inset-0 grid place-items-center px-4 py-12 xl:py-6">
           <Dialog.Popup className="group/popup relative flex h-full w-full max-w-[70rem] xl:max-w-none justify-center pointer-events-none transition-opacity duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0">
             <Dialog.Close
-              className="absolute right-0 -top-10 flex h-8 w-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none hover:bg-neutral-100 dark:hover:bg-neutral-800 xl:top-0 xl:h-10 xl:w-10 pointer-events-auto focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+              className="absolute right-0 -top-10 flex h-8 w-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none hover:bg-neutral-100 dark:hover:bg-neutral-800 xl:top-0 xl:h-10 xl:w-10 pointer-events-auto focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
               aria-label="Close"
             >
               <XIcon className="h-6 w-6" />
             </Dialog.Close>
-            <div className="pointer-events-auto box-border h-full w-full max-w-[70rem] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[4px_4px_0] shadow-black/12 dark:shadow-none transition-[scale] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[starting-style]/popup:scale-105" />
+            <div className="pointer-events-auto box-border h-full w-full max-w-[70rem] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[starting-style]/popup:scale-105" />
           </Dialog.Popup>
         </Dialog.Viewport>
       </Dialog.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index 7a2ce424275..5f7a1eaf0e1 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -17,7 +17,7 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
             <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.CheckboxItem
               checked={showMinimap}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
index ac2dd57d795..ded43d23199 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -7,7 +7,7 @@ const itemClass =
 const triggerClass =
   'flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-neutral-100 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
 const popupClass =
-  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
+  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
 
 interface MenuItemDefinition {
   label: string;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
index 3c0f755a721..594165e5681 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
@@ -87,7 +87,7 @@ export default function MenuDetachedTriggersFullDemo() {
                 className={`
                   relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] py-1
                   origin-[var(--transform-origin)] border border-neutral-950
-                  bg-white text-neutral-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))]
+                  bg-white text-neutral-950 outline-none [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))]
                   transition-[width,height,opacity,scale]
                   duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]
                   data-[starting-style]:scale-90 data-[starting-style]:opacity-0
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
index a6c56b8c51b..b614b44a735 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Menu } from '@base-ui/react/menu';
 
 const demoMenu = Menu.createHandle();
 const popupClass =
-  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
+  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
 const itemClass =
   "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400";
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index 733808324e7..7643ef3e4ab 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
             <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
 
             <Menu.Group>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
index 0e78f9ddc9c..18296e9c71e 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
             <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.Item className={itemClass}>Add to Library</Menu.Item>
             <Menu.Item className={itemClass}>Add to Playlist</Menu.Item>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
index a2a86ed0c8a..0a9b77104a9 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
@@ -15,7 +15,7 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
             <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.Item className={itemClass}>Get Up!</Menu.Item>
             <Menu.Item className={itemClass}>Inside Out</Menu.Item>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index 90a50e27739..69ca465326a 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
             <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.RadioGroup value={value} onValueChange={setValue}>
               <Menu.RadioItem value="date" className={radioItemClass}>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
index 08bde0178fa..b90c2ec5df9 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const popupClass =
-  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
+  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
 const itemClass =
   "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 data-[disabled]:text-neutral-500 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-neutral-400";
 const submenuTriggerClass =
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
index 58645e6305b..61362abb540 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
@@ -71,7 +71,7 @@ export default function ExampleNavigationMenu() {
             ['--easing' as string]: 'ease-out',
           }}
         >
-          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
             <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
index 8cd284424fb..216ded4f0ea 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
@@ -121,7 +121,7 @@ export default function ExampleNavigationMenu() {
             ['--easing' as string]: 'ease-out',
           }}
         >
-          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
             <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
index 0f7d5cbf725..c92d9942aec 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
@@ -67,7 +67,7 @@ export default function ExampleNavigationMenu() {
                         ['--easing' as string]: 'ease-out',
                       }}
                     >
-                      <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+                      <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
                         <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
                       </NavigationMenu.Popup>
                     </NavigationMenu.Positioner>
@@ -89,7 +89,7 @@ export default function ExampleNavigationMenu() {
             ['--easing' as string]: 'ease-out',
           }}
         >
-          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
             <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
index ec1d2cb4e1f..09b98aac3fa 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -64,7 +64,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
             className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)]"
             sideOffset={8}
           >
-            <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+            <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
               <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
               <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
index 9ce446da290..a3c8404bfcb 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
@@ -40,7 +40,7 @@ export default function PopoverDetachedTriggersFullDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[instant]:transition-none"
             >
-              <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[31.25rem] origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+              <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[31.25rem] origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:[filter:none] transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
                 <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
 
                 <Popover.Viewport
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
index 6e55017d712..4bcbb83bd28 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
       <Popover.Root handle={demoPopover}>
         <Popover.Portal>
           <Popover.Positioner sideOffset={8}>
-            <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+            <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
               <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
               <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
index b38fa6914e9..c69e8a87134 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExamplePopover() {
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
-          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
             <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
             <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
index 7360cd8b812..598fbc662c8 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExamplePopover() {
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
-          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
             <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
             <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
index 62a96c055a7..1adea983935 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -121,7 +121,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)]"
             >
-              <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+              <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
                 <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
                 {payload}
               </PreviewCard.Popup>
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
index e24935f6237..202a4a232f5 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
@@ -93,7 +93,7 @@ export default function PreviewCardDetachedTriggersFullDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]"
             >
-              <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[width,height,opacity,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+              <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[width,height,opacity,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
                 <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
 
                 <PreviewCard.Viewport className="relative overflow-clip w-full h-full [&_[data-previous]]:w-[var(--popup-width)] [&_[data-previous]]:translate-x-0 [&_[data-previous]]:opacity-100 [&_[data-previous]]:transition-[translate,opacity] [&_[data-previous]]:duration-[350ms,175ms] [&_[data-previous]]:ease-[cubic-bezier(0.22,1,0.36,1)] [&_[data-current]]:w-[var(--popup-width)] [&_[data-current]]:translate-x-0 [&_[data-current]]:opacity-100 [&_[data-current]]:transition-[translate,opacity] [&_[data-current]]:duration-[350ms,175ms] [&_[data-current]]:ease-[cubic-bezier(0.22,1,0.36,1)] data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:-translate-x-[30%] data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:opacity-0 data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:translate-x-[30%] data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:opacity-0 data-[activation-direction~='left']:[&_[data-previous][data-ending-style]]:translate-x-[30%] data-[activation-direction~='left']:[&_[data-previous][data-ending-style]]:opacity-0 data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:-translate-x-[30%] data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:opacity-0">
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
index 46c3d91a888..2d099c0f159 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
@@ -21,7 +21,7 @@ export default function PreviewCardDetachedTriggersSimpleDemo() {
       <PreviewCard.Root handle={demoPreviewCard}>
         <PreviewCard.Portal>
           <PreviewCard.Positioner sideOffset={8}>
-            <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+            <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
               <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
               <div className="box-border flex w-min flex-col gap-2 p-2">
                 <img
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
index 245605c92a2..c79edd6d4ba 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function ExamplePreviewCard() {
 
       <PreviewCard.Portal>
         <PreviewCard.Positioner sideOffset={8}>
-          <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+          <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
             <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
             <div className="box-border flex w-min flex-col gap-2 p-2">
               <img
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index 51185b33664..390c4f464df 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -77,7 +77,7 @@ function CopyButton() {
       </Tooltip.Trigger>
       <Tooltip.Portal>
         <Tooltip.Positioner sideOffset={10}>
-          <Tooltip.Popup className="flex origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-instant:duration-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+          <Tooltip.Popup className="flex origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-instant:duration-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
             <Tooltip.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
             Copy
           </Tooltip.Popup>
@@ -100,7 +100,7 @@ function AnchoredToasts() {
           >
             <Toast.Root
               toast={toast}
-              className="flex w-max origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+              className="flex w-max origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
             >
               <Toast.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
               <Toast.Content>
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
index ed5382dc05c..834555df2ff 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -12,7 +12,7 @@ const buttonClass =
   'flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
-  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
+  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
 
 const arrowClass =
   "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
index 8604f85089b..034379f8a49 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
@@ -58,7 +58,7 @@ export default function TooltipDetachedTriggersFullDemo() {
                   bg-white dark:bg-neutral-950
                   text-sm text-neutral-950 dark:text-white
                   origin-[var(--transform-origin)]
-                  [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] dark:[filter:none]
+                  [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:[filter:none]
                   transition-[width,height,opacity,scale]
                   duration-[0.35s]
                   ease-[cubic-bezier(0.22,1,0.36,1)]
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
index 89571e613c6..04f12476453 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
@@ -9,7 +9,7 @@ const triggerClass =
   'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
-  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
+  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
 
 const arrowClass =
   "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
index 1fcd7c970a6..28762ebffcd 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
@@ -5,7 +5,7 @@ const triggerClass =
   'flex size-8 items-center justify-center border-0 bg-transparent text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
-  'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] [filter:drop-shadow(4px_4px_0_rgb(0_0_0_/_12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
+  'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
 
 const arrowClass =
   "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";

From f416403325e8a78a7d855b5ef3c8b676a7d0e969 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 30 Apr 2026 18:02:13 +0200
Subject: [PATCH 105/257] Simplify TW class name

---
 .../components/menu/demos/checkbox-items/tailwind/index.tsx   | 2 +-
 .../demos/detached-triggers-controlled/tailwind/index.tsx     | 2 +-
 .../menu/demos/detached-triggers-full/tailwind/index.tsx      | 2 +-
 .../menu/demos/detached-triggers-simple/tailwind/index.tsx    | 2 +-
 .../components/menu/demos/group-labels/tailwind/index.tsx     | 2 +-
 .../react/components/menu/demos/hero/tailwind/index.tsx       | 2 +-
 .../components/menu/demos/open-on-hover/tailwind/index.tsx    | 2 +-
 .../components/menu/demos/radio-items/tailwind/index.tsx      | 2 +-
 .../react/components/menu/demos/submenu/tailwind/index.tsx    | 2 +-
 .../components/navigation-menu/demos/hero/tailwind/index.tsx  | 2 +-
 .../navigation-menu/demos/nested-inline/tailwind/index.tsx    | 2 +-
 .../navigation-menu/demos/nested/tailwind/index.tsx           | 4 ++--
 .../demos/detached-triggers-controlled/tailwind/index.tsx     | 2 +-
 .../popover/demos/detached-triggers-full/tailwind/index.tsx   | 2 +-
 .../popover/demos/detached-triggers-simple/tailwind/index.tsx | 2 +-
 .../react/components/popover/demos/hero/tailwind/index.tsx    | 2 +-
 .../components/popover/demos/open-on-hover/tailwind/index.tsx | 2 +-
 .../demos/detached-triggers-controlled/tailwind/index.tsx     | 2 +-
 .../demos/detached-triggers-full/tailwind/index.tsx           | 2 +-
 .../demos/detached-triggers-simple/tailwind/index.tsx         | 2 +-
 .../components/preview-card/demos/hero/tailwind/index.tsx     | 2 +-
 .../react/components/toast/demos/anchored/tailwind/index.tsx  | 4 ++--
 .../demos/detached-triggers-controlled/tailwind/index.tsx     | 2 +-
 .../tooltip/demos/detached-triggers-full/tailwind/index.tsx   | 2 +-
 .../tooltip/demos/detached-triggers-simple/tailwind/index.tsx | 2 +-
 .../react/components/tooltip/demos/hero/tailwind/index.tsx    | 2 +-
 26 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index 5f7a1eaf0e1..01711dee56c 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -17,7 +17,7 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
             <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.CheckboxItem
               checked={showMinimap}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
index ded43d23199..bf965825317 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -7,7 +7,7 @@ const itemClass =
 const triggerClass =
   'flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-neutral-100 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
 const popupClass =
-  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
+  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none';
 
 interface MenuItemDefinition {
   label: string;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
index 594165e5681..633f6560a3e 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
@@ -93,7 +93,7 @@ export default function MenuDetachedTriggersFullDemo() {
                   data-[starting-style]:scale-90 data-[starting-style]:opacity-0
                   data-[ending-style]:scale-90 data-[ending-style]:opacity-0
                   data-instant:transition-none
-                  dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]
+                  dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none
                 `}
               >
                 <Menu.Arrow
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
index b614b44a735..56ab0b6f4b8 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Menu } from '@base-ui/react/menu';
 
 const demoMenu = Menu.createHandle();
 const popupClass =
-  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
+  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none';
 const itemClass =
   "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400";
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index 7643ef3e4ab..0a9af5e95cb 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
             <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
 
             <Menu.Group>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
index 18296e9c71e..a0dc37efdd6 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
             <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.Item className={itemClass}>Add to Library</Menu.Item>
             <Menu.Item className={itemClass}>Add to Playlist</Menu.Item>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
index 0a9b77104a9..fc8eedc9cdf 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
@@ -15,7 +15,7 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
             <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.Item className={itemClass}>Get Up!</Menu.Item>
             <Menu.Item className={itemClass}>Inside Out</Menu.Item>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index 69ca465326a..ad27301c8ff 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
             <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.RadioGroup value={value} onValueChange={setValue}>
               <Menu.RadioItem value="date" className={radioItemClass}>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
index b90c2ec5df9..318656bb019 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const popupClass =
-  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
+  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none';
 const itemClass =
   "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 data-[disabled]:text-neutral-500 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-neutral-400";
 const submenuTriggerClass =
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
index 61362abb540..cbd7f4ebdf2 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
@@ -71,7 +71,7 @@ export default function ExampleNavigationMenu() {
             ['--easing' as string]: 'ease-out',
           }}
         >
-          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
             <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
index 216ded4f0ea..4ca945d8392 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
@@ -121,7 +121,7 @@ export default function ExampleNavigationMenu() {
             ['--easing' as string]: 'ease-out',
           }}
         >
-          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
             <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
index c92d9942aec..c99940d1c52 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
@@ -67,7 +67,7 @@ export default function ExampleNavigationMenu() {
                         ['--easing' as string]: 'ease-out',
                       }}
                     >
-                      <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+                      <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
                         <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
                       </NavigationMenu.Popup>
                     </NavigationMenu.Positioner>
@@ -89,7 +89,7 @@ export default function ExampleNavigationMenu() {
             ['--easing' as string]: 'ease-out',
           }}
         >
-          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
             <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
index 09b98aac3fa..37369a15e8c 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -64,7 +64,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
             className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)]"
             sideOffset={8}
           >
-            <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+            <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:filter-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
               <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
               <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
index a3c8404bfcb..9eec31575e9 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
@@ -40,7 +40,7 @@ export default function PopoverDetachedTriggersFullDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[instant]:transition-none"
             >
-              <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[31.25rem] origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:[filter:none] transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+              <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[31.25rem] origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:filter-none transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
                 <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
 
                 <Popover.Viewport
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
index 4bcbb83bd28..773451890f6 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
       <Popover.Root handle={demoPopover}>
         <Popover.Portal>
           <Popover.Positioner sideOffset={8}>
-            <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+            <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:filter-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
               <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
               <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
index c69e8a87134..c202dadaa3e 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExamplePopover() {
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
-          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:filter-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
             <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
             <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
index 598fbc662c8..04e73d9eec9 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExamplePopover() {
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
-          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:[filter:none] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:filter-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
             <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
             <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
index 1adea983935..57a404f066e 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -121,7 +121,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)]"
             >
-              <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+              <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
                 <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
                 {payload}
               </PreviewCard.Popup>
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
index 202a4a232f5..99c82a334b4 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
@@ -93,7 +93,7 @@ export default function PreviewCardDetachedTriggersFullDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]"
             >
-              <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[width,height,opacity,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+              <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[width,height,opacity,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
                 <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
 
                 <PreviewCard.Viewport className="relative overflow-clip w-full h-full [&_[data-previous]]:w-[var(--popup-width)] [&_[data-previous]]:translate-x-0 [&_[data-previous]]:opacity-100 [&_[data-previous]]:transition-[translate,opacity] [&_[data-previous]]:duration-[350ms,175ms] [&_[data-previous]]:ease-[cubic-bezier(0.22,1,0.36,1)] [&_[data-current]]:w-[var(--popup-width)] [&_[data-current]]:translate-x-0 [&_[data-current]]:opacity-100 [&_[data-current]]:transition-[translate,opacity] [&_[data-current]]:duration-[350ms,175ms] [&_[data-current]]:ease-[cubic-bezier(0.22,1,0.36,1)] data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:-translate-x-[30%] data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:opacity-0 data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:translate-x-[30%] data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:opacity-0 data-[activation-direction~='left']:[&_[data-previous][data-ending-style]]:translate-x-[30%] data-[activation-direction~='left']:[&_[data-previous][data-ending-style]]:opacity-0 data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:-translate-x-[30%] data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:opacity-0">
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
index 2d099c0f159..84a7fec0cb4 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
@@ -21,7 +21,7 @@ export default function PreviewCardDetachedTriggersSimpleDemo() {
       <PreviewCard.Root handle={demoPreviewCard}>
         <PreviewCard.Portal>
           <PreviewCard.Positioner sideOffset={8}>
-            <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+            <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
               <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
               <div className="box-border flex w-min flex-col gap-2 p-2">
                 <img
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
index c79edd6d4ba..27c9d6be5c0 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function ExamplePreviewCard() {
 
       <PreviewCard.Portal>
         <PreviewCard.Positioner sideOffset={8}>
-          <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+          <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
             <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
             <div className="box-border flex w-min flex-col gap-2 p-2">
               <img
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index 390c4f464df..392d3e9fd11 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -77,7 +77,7 @@ function CopyButton() {
       </Tooltip.Trigger>
       <Tooltip.Portal>
         <Tooltip.Positioner sideOffset={10}>
-          <Tooltip.Popup className="flex origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-instant:duration-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]">
+          <Tooltip.Popup className="flex origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-instant:duration-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
             <Tooltip.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
             Copy
           </Tooltip.Popup>
@@ -100,7 +100,7 @@ function AnchoredToasts() {
           >
             <Toast.Root
               toast={toast}
-              className="flex w-max origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+              className="flex w-max origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
             >
               <Toast.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
               <Toast.Content>
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
index 834555df2ff..6f5c0a190ed 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -12,7 +12,7 @@ const buttonClass =
   'flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
-  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
+  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none';
 
 const arrowClass =
   "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
index 034379f8a49..9cdcbe275ec 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
@@ -58,7 +58,7 @@ export default function TooltipDetachedTriggersFullDemo() {
                   bg-white dark:bg-neutral-950
                   text-sm text-neutral-950 dark:text-white
                   origin-[var(--transform-origin)]
-                  [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:[filter:none]
+                  [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:filter-none
                   transition-[width,height,opacity,scale]
                   duration-[0.35s]
                   ease-[cubic-bezier(0.22,1,0.36,1)]
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
index 04f12476453..98aa9953ff9 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
@@ -9,7 +9,7 @@ const triggerClass =
   'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
-  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
+  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none';
 
 const arrowClass =
   "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
index 28762ebffcd..ac39c7aeeeb 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
@@ -5,7 +5,7 @@ const triggerClass =
   'flex size-8 items-center justify-center border-0 bg-transparent text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
-  'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:[filter:none]';
+  'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none';
 
 const arrowClass =
   "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";

From 19846a80ea16c9e851d234f9abbffeb22b388639 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 30 Apr 2026 18:37:23 +0200
Subject: [PATCH 106/257] Autocomplete: fix focus ring

---
 .../demos/grid/css-modules/index.module.css        | 14 ++++++++------
 .../autocomplete/demos/grid/tailwind/index.tsx     |  6 +++---
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
index 5aaf5c8a11c..780d2928980 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
@@ -8,13 +8,19 @@
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
+
+  &:has(.TextInput:focus) {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
+  }
 }
 
 .TextInput {
   box-sizing: border-box;
   grid-column: 1/-1;
   grid-row: 1;
-  padding-inline: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 2.25rem;
   margin: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
   height: 2rem;
@@ -24,11 +30,6 @@
   background-color: transparent;
   color: light-dark(var(--color-neutral-950), white);
   outline: none;
-
-  &:focus {
-    outline: 2px solid var(--color-blue-800);
-    outline-offset: -2px;
-  }
 }
 
 .EmojiButton {
@@ -44,6 +45,7 @@
   align-items: center;
   justify-content: center;
   font-size: 1.25rem;
+  line-height: 1;
   color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
index 4edb9ec60c1..23fe6bd0de4 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
@@ -31,11 +31,11 @@ export default function ExampleEmojiPicker() {
 
   return (
     <div className="mx-auto w-[16rem]">
-      <div className="grid grid-cols-[1fr_auto] items-center">
+      <div className="grid grid-cols-[1fr_auto] items-center has-[input:focus]:outline-2 has-[input:focus]:-outline-offset-2 has-[input:focus]:outline-blue-800">
         <input
           ref={textInputRef}
           type="text"
-          className="col-span-full row-start-1 h-8 border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+          className="col-span-full row-start-1 h-8 border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none dark:border-white dark:text-white"
           placeholder="iMessage"
           value={textValue}
           onChange={(event) => setTextValue(event.target.value)}
@@ -55,7 +55,7 @@ export default function ExampleEmojiPicker() {
           }}
         >
           <Autocomplete.Trigger
-            className="col-start-2 row-start-1 mr-px flex size-[calc(2rem-2px)] items-center justify-center border-0 bg-transparent text-[1.25rem] text-neutral-950 outline-hidden hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-popup-open:bg-neutral-100 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800"
+            className="col-start-2 row-start-1 mr-px flex size-[calc(2rem-2px)] items-center justify-center border-0 bg-transparent text-xl leading-none text-neutral-950 outline-hidden hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-popup-open:bg-neutral-100 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800"
             aria-label="Choose emoji"
           >
             😀

From 18776545273cea7ba93d2c4b59d7ec0ed2c4a743 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 30 Apr 2026 19:08:34 +0200
Subject: [PATCH 107/257] Nicer TW shadow class names

---
 .../autocomplete/demos/async/tailwind/index.tsx        |  2 +-
 .../demos/auto-highlight/tailwind/index.tsx            |  2 +-
 .../demos/command-palette/tailwind/index.tsx           |  2 +-
 .../demos/fuzzy-matching/tailwind/index.tsx            |  2 +-
 .../autocomplete/demos/grid/tailwind/index.tsx         |  2 +-
 .../autocomplete/demos/grouped/tailwind/index.tsx      |  2 +-
 .../autocomplete/demos/hero/tailwind/index.tsx         |  2 +-
 .../autocomplete/demos/inline/tailwind/index.tsx       |  2 +-
 .../autocomplete/demos/limit/tailwind/index.tsx        |  2 +-
 .../autocomplete/demos/virtualized/tailwind/index.tsx  |  2 +-
 .../context-menu/demos/hero/tailwind/index.tsx         |  2 +-
 .../context-menu/demos/submenu/tailwind/index.tsx      |  2 +-
 .../components/drawer/demos/hero/tailwind/index.tsx    |  2 +-
 .../drawer/demos/indent-provider/tailwind/index.tsx    |  2 +-
 .../drawer/demos/mobile-nav/tailwind/index.tsx         |  2 +-
 .../components/drawer/demos/nested/tailwind/index.tsx  |  2 +-
 .../drawer/demos/non-modal/tailwind/index.tsx          |  2 +-
 .../drawer/demos/position/tailwind/index.tsx           |  2 +-
 .../drawer/demos/snap-points/tailwind/index.tsx        |  2 +-
 .../drawer/demos/swipe-area/tailwind/index.tsx         |  2 +-
 .../drawer/demos/uncontained/tailwind/index.tsx        |  4 ++--
 .../menu/demos/checkbox-items/tailwind/index.tsx       |  2 +-
 .../detached-triggers-controlled/tailwind/index.tsx    |  2 +-
 .../demos/detached-triggers-full/tailwind/index.tsx    |  4 ++--
 .../demos/detached-triggers-simple/tailwind/index.tsx  |  2 +-
 .../menu/demos/group-labels/tailwind/index.tsx         |  2 +-
 .../components/menu/demos/hero/tailwind/index.tsx      |  2 +-
 .../menu/demos/open-on-hover/tailwind/index.tsx        |  2 +-
 .../menu/demos/radio-items/tailwind/index.tsx          |  2 +-
 .../components/menu/demos/submenu/tailwind/index.tsx   |  2 +-
 .../components/menubar/demos/hero/tailwind/index.tsx   | 10 +++++-----
 .../navigation-menu/demos/hero/tailwind/index.tsx      |  2 +-
 .../demos/nested-inline/tailwind/index.tsx             |  2 +-
 .../navigation-menu/demos/nested/tailwind/index.tsx    |  4 ++--
 .../detached-triggers-controlled/tailwind/index.tsx    |  2 +-
 .../demos/detached-triggers-full/tailwind/index.tsx    |  2 +-
 .../demos/detached-triggers-simple/tailwind/index.tsx  |  2 +-
 .../components/popover/demos/hero/tailwind/index.tsx   |  2 +-
 .../popover/demos/open-on-hover/tailwind/index.tsx     |  2 +-
 .../detached-triggers-controlled/tailwind/index.tsx    |  2 +-
 .../demos/detached-triggers-full/tailwind/index.tsx    |  2 +-
 .../demos/detached-triggers-simple/tailwind/index.tsx  |  2 +-
 .../preview-card/demos/hero/tailwind/index.tsx         |  2 +-
 .../components/select/demos/grouped/tailwind/index.tsx |  2 +-
 .../components/select/demos/hero/tailwind/index.tsx    |  2 +-
 .../select/demos/multiple/tailwind/index.tsx           |  2 +-
 .../select/demos/object-values/tailwind/index.tsx      |  2 +-
 .../components/toast/demos/anchored/tailwind/index.tsx |  6 +++---
 .../components/toast/demos/hero/tailwind/index.tsx     |  2 +-
 .../components/toast/demos/position/tailwind/index.tsx |  2 +-
 .../components/toolbar/demos/hero/tailwind/index.tsx   |  2 +-
 .../detached-triggers-controlled/tailwind/index.tsx    |  2 +-
 .../demos/detached-triggers-full/tailwind/index.tsx    |  2 +-
 .../demos/detached-triggers-simple/tailwind/index.tsx  |  2 +-
 .../components/tooltip/demos/hero/tailwind/index.tsx   |  2 +-
 55 files changed, 64 insertions(+), 64 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
index e9d365cd34f..86df2f07bee 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
@@ -88,7 +88,7 @@ export default function ExampleAsyncAutocomplete() {
       <Autocomplete.Portal hidden={!status}>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4} align="start">
           <Autocomplete.Popup
-            className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain border border-neutral-950 bg-white py-2 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+            className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain border border-neutral-950 bg-white py-2 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-busy={isPending || undefined}
           >
             <Autocomplete.Status>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
index 14be9b0132b..0474958978f 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleAutocompleteAutoHighlight() {
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
               <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No tags found.
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
index 607e8bd3991..d43e5f36e7f 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
@@ -20,7 +20,7 @@ export default function ExampleAutocompleteCommandPalette() {
         <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 ease-[cubic-bezier(0.45,1.005,0,1.005)] data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="fixed inset-0 flex items-start justify-center overflow-hidden px-2 pt-18 pb-2">
           <Dialog.Popup
-            className="relative flex max-h-[min(36rem,calc(100dvh-5rem))] w-[calc(100vw-1rem)] max-w-[28rem] flex-col overflow-hidden border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform,scale,translate] duration-150 data-ending-style:-translate-y-4 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:-translate-y-4 data-starting-style:scale-95 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+            className="relative flex max-h-[min(36rem,calc(100dvh-5rem))] w-[calc(100vw-1rem)] max-w-[28rem] flex-col overflow-hidden border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[opacity,transform,scale,translate] duration-150 data-ending-style:-translate-y-4 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:-translate-y-4 data-starting-style:scale-95 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-label="Command palette"
           >
             <Autocomplete.Root
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
index fe0799d096a..37a6ccf7f7f 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
@@ -20,7 +20,7 @@ export default function ExampleFuzzyMatchingAutocomplete() {
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),28rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain border border-neutral-950 bg-white py-2 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),28rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain border border-neutral-950 bg-white py-2 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
               <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No results found for "{<Autocomplete.Value />}"
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
index 23fe6bd0de4..86b931b2cef 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
@@ -62,7 +62,7 @@ export default function ExampleEmojiPicker() {
           </Autocomplete.Trigger>
           <Autocomplete.Portal>
             <Autocomplete.Positioner className="outline-hidden" sideOffset={4} align="end">
-              <Autocomplete.Popup className="[--input-container-height:2rem] max-h-[20.5rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+              <Autocomplete.Popup className="[--input-container-height:2rem] max-h-[20.5rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
                 <div className="relative z-[2] h-[var(--input-container-height)] w-64 bg-white dark:bg-neutral-950">
                   <Autocomplete.Input
                     placeholder="Search emojis…"
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
index 9d944398253..765b6455e51 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleGroupAutocomplete() {
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[22.5rem] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[22.5rem] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
               <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No tags found.
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
index 4c1887fd8e6..5ea789bfd22 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleAutocomplete() {
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
               <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No tags found.
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
index cf62f5af905..0fd97aafe21 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleAutocompleteInline() {
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden data-empty:hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-empty:p-0">
               {(tag: Tag) => (
                 <Autocomplete.Item
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
index bc860043d2c..36723ade52a 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
@@ -31,7 +31,7 @@ export default function ExampleAutocompleteLimit() {
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain border border-neutral-950 bg-white py-2 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain border border-neutral-950 bg-white py-2 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
               <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No results found for "{value}"
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
index 724e99bc057..97b1adcf998 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
@@ -37,7 +37,7 @@ export default function ExampleVirtualizedAutocomplete() {
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(22rem,var(--available-height))] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(22rem,var(--available-height))] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
               <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No items found.
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
index 5eb1f0fcb09..bf79c9fdeac 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
@@ -11,7 +11,7 @@ export default function ExampleMenu() {
       </ContextMenu.Trigger>
       <ContextMenu.Portal>
         <ContextMenu.Positioner className="outline-hidden">
-          <ContextMenu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] outline-hidden transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <ContextMenu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <ContextMenu.Item className={itemClass}>Add to Library</ContextMenu.Item>
             <ContextMenu.Item className={itemClass}>Add to Playlist</ContextMenu.Item>
             <ContextMenu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
index 8aca78a8f50..25e9db40212 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ContextMenu } from '@base-ui/react/context-menu';
 
 const popupClass =
-  'origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] outline-hidden transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
+  'origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
 const itemClass =
   "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 data-[disabled]:text-neutral-500 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-neutral-400";
 const submenuTriggerClass =
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
index c08d854f294..f15fa8d24a0 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleDrawer() {
       <Drawer.Portal>
         <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
         <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] fixed inset-0 flex items-stretch justify-end p-(--viewport-padding)">
-          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[-0.25rem_0_0_rgb(0_0_0_/_12%)] overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[-0.25rem_0_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Drawer.Content className="mx-auto w-full max-w-[32rem]">
               <Drawer.Title className="mb-1 text-base font-bold">Drawer</Drawer.Title>
               <Drawer.Description className="mb-6 text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
index 2af3e365807..beaf4f8a94f 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function ExampleDrawer() {
               <Drawer.Portal container={portalContainer}>
                 <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] absolute inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
                 <Drawer.Viewport className="absolute inset-0 flex items-end justify-center">
-                  <Drawer.Popup className="w-full max-h-[calc(80vh+var(--bleed))] -mb-[var(--bleed)] border-t border-neutral-950 bg-white px-6 py-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+var(--bleed))] text-neutral-950 outline-none shadow-[0_-0.25rem_0_rgb(0_0_0_/_12%)] overflow-y-auto overscroll-contain transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] [transform:translateY(var(--drawer-swipe-movement-y))] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-starting-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+                  <Drawer.Popup className="w-full max-h-[calc(80vh+var(--bleed))] -mb-[var(--bleed)] border-t border-neutral-950 bg-white px-6 py-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+var(--bleed))] text-neutral-950 outline-none shadow-[0_-0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] [transform:translateY(var(--drawer-swipe-movement-y))] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-starting-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
                     <div className="mx-auto mb-4 h-1 w-12 bg-neutral-300 dark:bg-neutral-700" />
                     <Drawer.Content className="mx-auto w-full max-w-[32rem]">
                       <Drawer.Title className="mt-0 mb-1 text-base font-bold text-center">
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
index 318b790bea9..e24d2b4f43a 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
@@ -68,7 +68,7 @@ export default function ExampleDrawerMobileNav() {
                 <Drawer.Popup className="group box-border w-full max-w-[42rem] outline-none transition-transform duration-600 ease-[cubic-bezier(0.45,1.005,0,1.005)] [transform:translateY(var(--drawer-swipe-movement-y))] data-swiping:select-none data-ending-style:[transform:translateY(calc(max(100dvh,100%)+2px))] data-ending-style:duration-350 data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] motion-reduce:transition-none">
                   <nav
                     aria-label="Navigation"
-                    className="relative flex flex-col border-t border-neutral-950 bg-white px-6 pt-4 pb-6 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-shadow duration-350 ease-[cubic-bezier(0.375,0.015,0.545,0.455)] group-data-ending-style:shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_0%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none min-[42rem]:border"
+                    className="relative flex flex-col border-t border-neutral-950 bg-white px-6 pt-4 pb-6 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-shadow duration-350 ease-[cubic-bezier(0.375,0.015,0.545,0.455)] group-data-ending-style:shadow-[0.25rem_0.25rem_0] group-data-ending-style:shadow-black/0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none min-[42rem]:border"
                   >
                     <div className="grid grid-cols-[1fr_auto_1fr] items-start">
                       <div aria-hidden className="h-9 w-9" />
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
index 55dc45f2532..f3f82db8969 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
@@ -127,7 +127,7 @@ export default function ExampleDrawerNested() {
 }
 
 const popupClassName =
-  "[--bleed:3rem] [--peek:1rem] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))] group/popup relative -mb-[3rem] w-full max-h-[calc(80vh+3rem)] [height:var(--drawer-height,auto)] border-t border-neutral-950 bg-white px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] text-neutral-950 outline-none shadow-[0_-0.25rem_0_rgb(0_0_0_/_12%)] overflow-y-auto overscroll-contain touch-auto [transform-origin:50%_calc(100%-var(--bleed))] [transform:translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] after:absolute after:inset-0 after:rounded-[inherit] after:bg-transparent after:pointer-events-none after:content-[''] after:transition-[background-color] after:duration-[450ms] after:ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-swiping:duration-0 data-nested-drawer-swiping:duration-0 data-starting-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-open:h-[calc(var(--height)+var(--bleed))] data-nested-drawer-open:overflow-hidden data-nested-drawer-open:after:bg-black/5 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none [transition:transform_450ms_cubic-bezier(0.32,0.72,0,1),height_450ms_cubic-bezier(0.32,0.72,0,1),opacity_450ms_cubic-bezier(0.32,0.72,0,1)]";
+  "[--bleed:3rem] [--peek:1rem] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))] group/popup relative -mb-[3rem] w-full max-h-[calc(80vh+3rem)] [height:var(--drawer-height,auto)] border-t border-neutral-950 bg-white px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] text-neutral-950 outline-none shadow-[0_-0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform-origin:50%_calc(100%-var(--bleed))] [transform:translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] after:absolute after:inset-0 after:rounded-[inherit] after:bg-transparent after:pointer-events-none after:content-[''] after:transition-[background-color] after:duration-[450ms] after:ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-swiping:duration-0 data-nested-drawer-swiping:duration-0 data-starting-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-open:h-[calc(var(--height)+var(--bleed))] data-nested-drawer-open:overflow-hidden data-nested-drawer-open:after:bg-black/5 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none [transition:transform_450ms_cubic-bezier(0.32,0.72,0,1),height_450ms_cubic-bezier(0.32,0.72,0,1),opacity_450ms_cubic-bezier(0.32,0.72,0,1)]";
 
 const contentClassName =
   'mx-auto w-full max-w-[32rem] transition-opacity duration-[300ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] group-data-nested-drawer-open/popup:opacity-0 group-data-nested-drawer-swiping/popup:opacity-100';
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
index 12abe8b4a74..aab940c4faf 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleDrawer() {
       </Drawer.Trigger>
       <Drawer.Portal>
         <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] fixed inset-0 flex items-stretch justify-end p-(--viewport-padding) pointer-events-none">
-          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] pointer-events-auto h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[-0.25rem_0_0_rgb(0_0_0_/_12%)] overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:shadow-[-0.25rem_0_0_rgb(0_0_0_/_0%)] data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:shadow-[-0.25rem_0_0_rgb(0_0_0_/_0%)] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] pointer-events-auto h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[-0.25rem_0_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:shadow-[-0.25rem_0_0] data-ending-style:shadow-black/0 data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:shadow-[-0.25rem_0_0] data-starting-style:shadow-black/0 data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Drawer.Content className="mx-auto w-full max-w-[32rem]">
               <Drawer.Title className="mb-1 text-base font-bold">Non-modal drawer</Drawer.Title>
               <Drawer.Description className="mb-6 text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
index a0997002eb5..1a131c8f29f 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleDrawer() {
       <Drawer.Portal>
         <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
         <Drawer.Viewport className="fixed inset-0 flex items-end justify-center">
-          <Drawer.Popup className="-mb-[3rem] w-full max-h-[calc(80vh+3rem)] border-t border-neutral-950 bg-white px-6 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] pt-4 text-neutral-950 outline-none shadow-[0_-0.25rem_0_rgb(0_0_0_/_12%)] overflow-y-auto overscroll-contain touch-auto [transform:translateY(var(--drawer-swipe-movement-y))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%-3rem+2px))] data-starting-style:[transform:translateY(calc(100%-3rem+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Drawer.Popup className="-mb-[3rem] w-full max-h-[calc(80vh+3rem)] border-t border-neutral-950 bg-white px-6 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] pt-4 text-neutral-950 outline-none shadow-[0_-0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform:translateY(var(--drawer-swipe-movement-y))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%-3rem+2px))] data-starting-style:[transform:translateY(calc(100%-3rem+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <div className="mx-auto mb-4 h-1 w-12 bg-neutral-300 dark:bg-neutral-700" />
             <Drawer.Content className="mx-auto w-full max-w-[32rem]">
               <Drawer.Title className="mb-1 text-base font-bold text-center">
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
index b3816c88a73..ecf830de024 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
@@ -21,7 +21,7 @@ export default function ExampleDrawerSnapPoints() {
         <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
         <Drawer.Viewport className="fixed inset-0 flex items-end justify-center touch-none">
           <Drawer.Popup
-            className="relative flex w-full max-h-[calc(100dvh-var(--top-margin))] min-h-0 flex-col overflow-visible border-t border-neutral-950 bg-white text-neutral-950 outline-none touch-none shadow-[0_-0.25rem_0_rgb(0_0_0_/_12%)] [--bleed:3rem] [padding-bottom:max(0px,calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] [transform:translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-[var(--bleed)] after:bg-[inherit] after:content-[''] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%+2px))] data-starting-style:[transform:translateY(calc(100%+2px))] data-starting-style:[padding-bottom:0] data-ending-style:[padding-bottom:0] data-starting-style:shadow-[0_-0.25rem_0_rgb(0_0_0_/_0%)] data-ending-style:shadow-[0_-0.25rem_0_rgb(0_0_0_/_0%)] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+            className="relative flex w-full max-h-[calc(100dvh-var(--top-margin))] min-h-0 flex-col overflow-visible border-t border-neutral-950 bg-white text-neutral-950 outline-none touch-none shadow-[0_-0.25rem_0] shadow-black/12 [--bleed:3rem] [padding-bottom:max(0px,calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] [transform:translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-[var(--bleed)] after:bg-[inherit] after:content-[''] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%+2px))] data-starting-style:[transform:translateY(calc(100%+2px))] data-starting-style:[padding-bottom:0] data-ending-style:[padding-bottom:0] data-starting-style:shadow-[0_-0.25rem_0] data-starting-style:shadow-black/0 data-ending-style:shadow-[0_-0.25rem_0] data-ending-style:shadow-black/0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             style={{ '--top-margin': `${TOP_MARGIN_REM}rem` } as React.CSSProperties}
           >
             <div className="shrink-0 border-b border-neutral-300 px-6 pt-3.5 pb-4 touch-none dark:border-neutral-700">
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
index 53782a59767..ed8ffaadf36 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleDrawerSwipeArea() {
         <Drawer.Portal container={portalContainer}>
           <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] absolute inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
           <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] absolute inset-0 z-20 flex items-stretch justify-end p-(--viewport-padding)">
-            <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[-0.25rem_0_0_rgb(0_0_0_/_12%)] overflow-y-auto touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[-0.25rem_0_0] shadow-black/12 overflow-y-auto touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Drawer.Content className="mx-auto w-full max-w-[32rem]">
                 <Drawer.Title className="mb-1 text-base font-bold">Library</Drawer.Title>
                 <Drawer.Description className="mb-6 text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
index 6e8b845a3cc..a84747918ff 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function ExampleDrawerUncontained() {
         <Drawer.Backdrop className="[--backdrop-opacity:0.4] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-starting-style:opacity-0 data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute dark:[--backdrop-opacity:0.7]" />
         <Drawer.Viewport className="fixed inset-0 flex items-end justify-center">
           <Drawer.Popup className="pointer-events-none flex w-full max-w-[20rem] flex-col gap-3 px-4 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] outline-none focus-visible:outline-none [transform:translateY(var(--drawer-swipe-movement-y))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-starting-style:[transform:translateY(calc(100%+1rem+2px))] data-ending-style:[transform:translateY(calc(100%+1rem+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)]">
-            <Drawer.Content className="pointer-events-auto overflow-hidden border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Drawer.Content className="pointer-events-auto overflow-hidden border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Drawer.Title className="sr-only">Profile actions</Drawer.Title>
               <Drawer.Description className="sr-only">
                 Choose an action for this user.
@@ -42,7 +42,7 @@ export default function ExampleDrawerUncontained() {
                 ))}
               </ul>
             </Drawer.Content>
-            <div className="pointer-events-auto overflow-hidden border border-neutral-950 bg-white shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:shadow-none">
+            <div className="pointer-events-auto overflow-hidden border border-neutral-950 bg-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:shadow-none">
               <button
                 type="button"
                 className="h-10 w-full border-0 bg-transparent px-5 text-center text-sm text-red-700 select-none dark:text-red-400 hover:bg-neutral-100 active:bg-neutral-200 focus-visible:bg-neutral-100 focus-visible:outline-none dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:focus-visible:bg-neutral-800"
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index 01711dee56c..db14d2797fb 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -17,7 +17,7 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
             <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.CheckboxItem
               checked={showMinimap}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
index bf965825317..ed4cc27388a 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -7,7 +7,7 @@ const itemClass =
 const triggerClass =
   'flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-neutral-100 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
 const popupClass =
-  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none';
+  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
 
 interface MenuItemDefinition {
   label: string;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
index 633f6560a3e..7b61889e154 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
@@ -87,13 +87,13 @@ export default function MenuDetachedTriggersFullDemo() {
                 className={`
                   relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] py-1
                   origin-[var(--transform-origin)] border border-neutral-950
-                  bg-white text-neutral-950 outline-none [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))]
+                  bg-white text-neutral-950 outline-none drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12
                   transition-[width,height,opacity,scale]
                   duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]
                   data-[starting-style]:scale-90 data-[starting-style]:opacity-0
                   data-[ending-style]:scale-90 data-[ending-style]:opacity-0
                   data-instant:transition-none
-                  dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none
+                  dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none
                 `}
               >
                 <Menu.Arrow
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
index 56ab0b6f4b8..eef1975fa10 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Menu } from '@base-ui/react/menu';
 
 const demoMenu = Menu.createHandle();
 const popupClass =
-  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none';
+  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
 const itemClass =
   "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400";
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index 0a9af5e95cb..b9f9ad1278f 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
             <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
 
             <Menu.Group>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
index a0dc37efdd6..be4cb77690c 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
             <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.Item className={itemClass}>Add to Library</Menu.Item>
             <Menu.Item className={itemClass}>Add to Playlist</Menu.Item>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
index fc8eedc9cdf..8636caed834 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
@@ -15,7 +15,7 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
             <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.Item className={itemClass}>Get Up!</Menu.Item>
             <Menu.Item className={itemClass}>Inside Out</Menu.Item>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index ad27301c8ff..9920c94a962 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
             <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.RadioGroup value={value} onValueChange={setValue}>
               <Menu.RadioItem value="date" className={radioItemClass}>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
index 318656bb019..4c3f6f3d0a9 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const popupClass =
-  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none';
+  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
 const itemClass =
   "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 data-[disabled]:text-neutral-500 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-neutral-400";
 const submenuTriggerClass =
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
index c48738686fd..7b5acf5bc95 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleMenubar() {
         </Menu.Trigger>
         <Menu.Portal>
           <Menu.Positioner className="outline-none" sideOffset={4}>
-            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Menu.Item
                 onClick={handleClick}
                 className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
@@ -39,7 +39,7 @@ export default function ExampleMenubar() {
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
                   <Menu.Positioner className="outline-none" sideOffset={-4} alignOffset={-4}>
-                    <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+                    <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
                       <Menu.Item
                         onClick={handleClick}
                         className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
@@ -81,7 +81,7 @@ export default function ExampleMenubar() {
         </Menu.Trigger>
         <Menu.Portal>
           <Menu.Positioner className="outline-none" sideOffset={4}>
-            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Menu.Item
                 onClick={handleClick}
                 className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
@@ -111,7 +111,7 @@ export default function ExampleMenubar() {
         </Menu.Trigger>
         <Menu.Portal>
           <Menu.Positioner className="outline-none" sideOffset={4}>
-            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Menu.Item
                 onClick={handleClick}
                 className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
@@ -132,7 +132,7 @@ export default function ExampleMenubar() {
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
                   <Menu.Positioner className="outline-none" sideOffset={-4} alignOffset={-4}>
-                    <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+                    <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
                       <Menu.Item
                         onClick={handleClick}
                         className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
index cbd7f4ebdf2..99b68038ba5 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
@@ -71,7 +71,7 @@ export default function ExampleNavigationMenu() {
             ['--easing' as string]: 'ease-out',
           }}
         >
-          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
             <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
index 4ca945d8392..5778e161f65 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
@@ -121,7 +121,7 @@ export default function ExampleNavigationMenu() {
             ['--easing' as string]: 'ease-out',
           }}
         >
-          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
             <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
index c99940d1c52..3408bebf808 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
@@ -67,7 +67,7 @@ export default function ExampleNavigationMenu() {
                         ['--easing' as string]: 'ease-out',
                       }}
                     >
-                      <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
+                      <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
                         <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
                       </NavigationMenu.Popup>
                     </NavigationMenu.Positioner>
@@ -89,7 +89,7 @@ export default function ExampleNavigationMenu() {
             ['--easing' as string]: 'ease-out',
           }}
         >
-          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
             <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
index 37369a15e8c..9d4bb57b874 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -64,7 +64,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
             className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)]"
             sideOffset={8}
           >
-            <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:filter-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+            <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
               <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
               <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
index 9eec31575e9..c3a260f3ad3 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
@@ -40,7 +40,7 @@ export default function PopoverDetachedTriggersFullDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[instant]:transition-none"
             >
-              <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[31.25rem] origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:filter-none transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+              <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[31.25rem] origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
                 <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
 
                 <Popover.Viewport
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
index 773451890f6..269698b0635 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
       <Popover.Root handle={demoPopover}>
         <Popover.Portal>
           <Popover.Positioner sideOffset={8}>
-            <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:filter-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+            <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
               <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
               <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
index c202dadaa3e..db10aad142b 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExamplePopover() {
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
-          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:filter-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
             <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
             <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
index 04e73d9eec9..af7d13fb622 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExamplePopover() {
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
-          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:filter-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
             <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
             <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
index 57a404f066e..72c24d63560 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -121,7 +121,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)]"
             >
-              <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
+              <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
                 <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
                 {payload}
               </PreviewCard.Popup>
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
index 99c82a334b4..b83bcfe3182 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
@@ -93,7 +93,7 @@ export default function PreviewCardDetachedTriggersFullDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]"
             >
-              <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[width,height,opacity,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
+              <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[width,height,opacity,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
                 <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
 
                 <PreviewCard.Viewport className="relative overflow-clip w-full h-full [&_[data-previous]]:w-[var(--popup-width)] [&_[data-previous]]:translate-x-0 [&_[data-previous]]:opacity-100 [&_[data-previous]]:transition-[translate,opacity] [&_[data-previous]]:duration-[350ms,175ms] [&_[data-previous]]:ease-[cubic-bezier(0.22,1,0.36,1)] [&_[data-current]]:w-[var(--popup-width)] [&_[data-current]]:translate-x-0 [&_[data-current]]:opacity-100 [&_[data-current]]:transition-[translate,opacity] [&_[data-current]]:duration-[350ms,175ms] [&_[data-current]]:ease-[cubic-bezier(0.22,1,0.36,1)] data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:-translate-x-[30%] data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:opacity-0 data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:translate-x-[30%] data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:opacity-0 data-[activation-direction~='left']:[&_[data-previous][data-ending-style]]:translate-x-[30%] data-[activation-direction~='left']:[&_[data-previous][data-ending-style]]:opacity-0 data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:-translate-x-[30%] data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:opacity-0">
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
index 84a7fec0cb4..d0877d8d6c1 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
@@ -21,7 +21,7 @@ export default function PreviewCardDetachedTriggersSimpleDemo() {
       <PreviewCard.Root handle={demoPreviewCard}>
         <PreviewCard.Portal>
           <PreviewCard.Positioner sideOffset={8}>
-            <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
+            <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
               <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
               <div className="box-border flex w-min flex-col gap-2 p-2">
                 <img
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
index 27c9d6be5c0..aa7cdbf2c6a 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function ExamplePreviewCard() {
 
       <PreviewCard.Portal>
         <PreviewCard.Positioner sideOffset={8}>
-          <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
+          <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
             <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
             <div className="box-border flex w-min flex-col gap-2 p-2">
               <img
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index f7f78142a2e..c4681edcfd5 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleSelectGrouped() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[2] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
                 ⏶
               </Select.ScrollUpArrow>
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index 097c9a9e5d4..a606e40b0ea 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -27,7 +27,7 @@ export default function ExampleSelect() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
                 ⏶
               </Select.ScrollUpArrow>
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index 00259bd961e..a0fecfdf5b7 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -50,7 +50,7 @@ export default function MultiSelectExample() {
             sideOffset={8}
             alignItemWithTrigger={false}
           >
-            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding overflow-y-auto border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding overflow-y-auto border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               {values.map((value) => (
                 <Select.Item
                   key={value}
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index eb9f1419a4d..04b9390ceff 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -26,7 +26,7 @@ export default function ObjectValueSelect() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
                 ⏶
               </Select.ScrollUpArrow>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index 392d3e9fd11..ab7f26f780e 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -77,7 +77,7 @@ function CopyButton() {
       </Tooltip.Trigger>
       <Tooltip.Portal>
         <Tooltip.Positioner sideOffset={10}>
-          <Tooltip.Popup className="flex origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-instant:duration-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none">
+          <Tooltip.Popup className="flex origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-instant:duration-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
             <Tooltip.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
             Copy
           </Tooltip.Popup>
@@ -100,7 +100,7 @@ function AnchoredToasts() {
           >
             <Toast.Root
               toast={toast}
-              className="flex w-max origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+              className="flex w-max origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
             >
               <Toast.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
               <Toast.Content>
@@ -123,7 +123,7 @@ function StackedToasts() {
           <Toast.Root
             key={toast.id}
             toast={toast}
-            className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+            className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
           >
             <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-[behind]:opacity-0 data-[expanded]:opacity-100">
               <div className="min-w-0 flex-1">
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
index 6ce7297e368..972a9f57018 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
@@ -44,7 +44,7 @@ function ToastList() {
     <Toast.Root
       key={toast.id}
       toast={toast}
-      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
     >
       <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-[behind]:opacity-0 data-[expanded]:opacity-100">
         <div className="min-w-0 flex-1">
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
index 5c6fc7c8cc6..51bfd769c8f 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
@@ -45,7 +45,7 @@ function ToastList() {
       key={toast.id}
       toast={toast}
       swipeDirection="up"
-      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)+(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))] absolute top-0 right-0 left-0 z-[calc(1000-var(--toast-index))] mx-auto w-full origin-top [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(-150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)+(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))] absolute top-0 right-0 left-0 z-[calc(1000-var(--toast-index))] mx-auto w-full origin-top [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(-150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
     >
       <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-[behind]:opacity-0 data-[expanded]:opacity-100">
         <div className="min-w-0 flex-1">
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
index d796cf4c3c6..fae1fc289d9 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
@@ -53,7 +53,7 @@ export default function ExampleToolbar() {
         </Toolbar.Button>
         <Select.Portal>
           <Select.Positioner className="z-10 outline-none select-none" sideOffset={8}>
-            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto border border-neutral-950 bg-white bg-clip-padding text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:translate-y-px data-[side=none]:scale-100 data-[side=none]:opacity-100 data-[side=none]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[side=none]:data-[starting-style]:scale-100 data-[side=none]:data-[starting-style]:opacity-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto border border-neutral-950 bg-white bg-clip-padding text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:translate-y-px data-[side=none]:scale-100 data-[side=none]:opacity-100 data-[side=none]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[side=none]:data-[starting-style]:scale-100 data-[side=none]:data-[starting-style]:opacity-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.Item
                 value="Helvetica"
                 className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-neutral-950 data-[highlighted]:text-white pointer-coarse:py-2.5 dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-neutral-950"
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
index 6f5c0a190ed..23441c750c5 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -12,7 +12,7 @@ const buttonClass =
   'flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
-  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none';
+  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
 
 const arrowClass =
   "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
index 9cdcbe275ec..1f30d35fe67 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
@@ -58,7 +58,7 @@ export default function TooltipDetachedTriggersFullDemo() {
                   bg-white dark:bg-neutral-950
                   text-sm text-neutral-950 dark:text-white
                   origin-[var(--transform-origin)]
-                  [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] dark:filter-none
+                  drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none
                   transition-[width,height,opacity,scale]
                   duration-[0.35s]
                   ease-[cubic-bezier(0.22,1,0.36,1)]
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
index 98aa9953ff9..98a7471eba5 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
@@ -9,7 +9,7 @@ const triggerClass =
   'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
-  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none';
+  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
 
 const arrowClass =
   "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
index ac39c7aeeeb..53b51064f61 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
@@ -5,7 +5,7 @@ const triggerClass =
   'flex size-8 items-center justify-center border-0 bg-transparent text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
-  'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] [filter:drop-shadow(0.25rem_0.25rem_0_rgb(0_0_0/12%))] transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:filter-none';
+  'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
 
 const arrowClass =
   "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";

From 02900a9604fae90c54254354e2ce4de27877a573 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 30 Apr 2026 19:27:31 +0200
Subject: [PATCH 108/257] Autocomplete: improve grid layout demo

---
 .../demos/grid/css-modules/index.module.css   | 34 ++++++++-----------
 .../demos/grid/tailwind/index.tsx             | 21 +++++++-----
 2 files changed, 26 insertions(+), 29 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
index 780d2928980..eaeafdfcc3a 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
@@ -5,41 +5,35 @@
 
 .InputGroup {
   position: relative;
-  display: grid;
-  grid-template-columns: 1fr auto;
-  align-items: center;
-
-  &:has(.TextInput:focus) {
-    outline: 2px solid var(--color-blue-800);
-    outline-offset: -2px;
-  }
+  display: flex;
 }
 
 .TextInput {
   box-sizing: border-box;
-  grid-column: 1/-1;
-  grid-row: 1;
-  padding-left: 0.5rem;
-  padding-right: 2.25rem;
+  padding-inline: 0.5rem;
   margin: 0;
+  margin-right: -1px;
   border: 1px solid light-dark(var(--color-neutral-950), white);
+  border-right: 0;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  background-color: transparent;
   color: light-dark(var(--color-neutral-950), white);
   outline: none;
+
+  &:focus {
+    position: relative;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
+  }
 }
 
 .EmojiButton {
   box-sizing: border-box;
-  grid-column: 2;
-  grid-row: 1;
-  width: calc(2rem - 2px);
-  height: calc(2rem - 2px);
-  border: 0;
-  margin-right: 1px;
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: transparent;
   display: flex;
   align-items: center;
@@ -63,7 +57,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
-    outline-offset: -1px;
+    outline-offset: -2px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
index 86b931b2cef..b1cd2677427 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
@@ -31,11 +31,11 @@ export default function ExampleEmojiPicker() {
 
   return (
     <div className="mx-auto w-[16rem]">
-      <div className="grid grid-cols-[1fr_auto] items-center has-[input:focus]:outline-2 has-[input:focus]:-outline-offset-2 has-[input:focus]:outline-blue-800">
+      <div className="relative flex">
         <input
           ref={textInputRef}
           type="text"
-          className="col-span-full row-start-1 h-8 border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none dark:border-white dark:text-white"
+          className="-mr-px h-8 border border-r-0 border-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:relative focus:outline-2 focus:-outline-offset-2 focus:outline-solid focus:outline-blue-800 dark:border-white dark:text-white"
           placeholder="iMessage"
           value={textValue}
           onChange={(event) => setTextValue(event.target.value)}
@@ -55,18 +55,21 @@ export default function ExampleEmojiPicker() {
           }}
         >
           <Autocomplete.Trigger
-            className="col-start-2 row-start-1 mr-px flex size-[calc(2rem-2px)] items-center justify-center border-0 bg-transparent text-xl leading-none text-neutral-950 outline-hidden hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-popup-open:bg-neutral-100 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800"
+            className="flex size-8 items-center justify-center border border-neutral-950 bg-transparent text-xl leading-none text-neutral-950 outline-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-solid focus-visible:outline-blue-800 data-popup-open:bg-neutral-100 dark:border-white dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800"
             aria-label="Choose emoji"
           >
             😀
           </Autocomplete.Trigger>
           <Autocomplete.Portal>
-            <Autocomplete.Positioner className="outline-hidden" sideOffset={4} align="end">
-              <Autocomplete.Popup className="[--input-container-height:2rem] max-h-[20.5rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Autocomplete.Positioner className="outline-0" sideOffset={4} align="end">
+              <Autocomplete.Popup
+                className="[--input-container-height:2rem] max-h-[20.5rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+                aria-label="Select emoji"
+              >
                 <div className="relative z-[2] h-[var(--input-container-height)] w-64 bg-white dark:bg-neutral-950">
                   <Autocomplete.Input
                     placeholder="Search emojis…"
-                    className="h-8 w-full border-0 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 dark:text-white"
+                    className="h-8 w-full border-0 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-blue-800 dark:text-white"
                   />
                 </div>
                 <Autocomplete.Empty>
@@ -74,9 +77,9 @@ export default function ExampleEmojiPicker() {
                     No emojis found
                   </div>
                 </Autocomplete.Empty>
-                <Autocomplete.List className="max-h-[min(calc(20.5rem-var(--input-container-height)-2px),calc(var(--available-height)-var(--input-container-height)-2px))] overflow-auto scroll-pt-10 scroll-pb-[0.35rem] overscroll-contain">
+                <Autocomplete.List className="max-h-[min(calc(20.5rem-var(--input-container-height)-2px),calc(var(--available-height)-var(--input-container-height)-2px))] overflow-auto scroll-pt-10 scroll-pb-[0.35rem] overscroll-contain empty:p-0">
                   {(group: EmojiGroup) => (
-                    <Autocomplete.Group key={group.value} items={group.items} className="block">
+                    <Autocomplete.Group key={group.value} items={group.items} className="block pb-2">
                       <Autocomplete.GroupLabel className="sticky top-0 z-[1] bg-white p-2 text-xs font-bold text-neutral-500 uppercase tracking-wider dark:bg-neutral-950 dark:text-neutral-400">
                         {group.label}
                       </Autocomplete.GroupLabel>
@@ -87,7 +90,7 @@ export default function ExampleEmojiPicker() {
                               <Autocomplete.Item
                                 key={rowItem.emoji}
                                 value={rowItem}
-                                className="group flex h-10 min-w-[var(--anchor-width)] flex-col items-center justify-center bg-transparent px-0.5 py-2 text-neutral-950 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-100 dark:text-white dark:data-highlighted:before:bg-neutral-800"
+                                className="group flex h-10 min-w-[var(--anchor-width)] cursor-default flex-col items-center justify-center bg-transparent px-0.5 py-2 text-neutral-950 outline-0 select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-100 dark:text-white dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-neutral-800"
                                 onClick={() => {
                                   handleInsertEmoji(rowItem.emoji);
                                   setPickerOpen(false);

From 60d1b38d5965b721be6301db8001e00b1e5adbd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 30 Apr 2026 22:45:38 +0200
Subject: [PATCH 109/257] Select: change placeholder color

---
 .../select/demos/grouped/css-modules/index.module.css     | 2 +-
 .../components/select/demos/grouped/tailwind/index.tsx    | 8 ++++----
 .../select/demos/hero/css-modules/index.module.css        | 2 +-
 .../react/components/select/demos/hero/tailwind/index.tsx | 8 ++++----
 .../select/demos/multiple/css-modules/index.module.css    | 2 +-
 .../components/select/demos/multiple/tailwind/index.tsx   | 8 ++++----
 .../select/demos/object-values/tailwind/index.tsx         | 8 ++++----
 7 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index 5d5ece740be..78457524962 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -14,7 +14,7 @@
 }
 
 .Value[data-placeholder] {
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
 
 .Select {
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index c4681edcfd5..b655280f7f7 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -13,9 +13,9 @@ export default function ExampleSelectGrouped() {
         Produce
       </Field.Label>
       <Select.Root items={groupedProduce}>
-        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-3 pr-2 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-3 pr-2 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           <Select.Value
-            className="data-[placeholder]:text-neutral-600 dark:data-[placeholder]:text-neutral-400"
+            className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400"
             placeholder="Select produce"
           />
           <Select.Icon className="flex">
@@ -24,7 +24,7 @@ export default function ExampleSelectGrouped() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[2] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
                 ⏶
               </Select.ScrollUpArrow>
@@ -39,7 +39,7 @@ export default function ExampleSelectGrouped() {
                         <Select.Item
                           key={item.value}
                           value={item.value}
-                          className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-neutral-950 data-[highlighted]:text-white dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-neutral-950"
+                          className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none group-data-[side=none]:pr-12 data-highlighted:bg-neutral-950 data-highlighted:text-white dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
                         >
                           <Select.ItemIndicator className="col-start-1">
                             <CheckIcon className="size-3" />
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
index a63774891d5..38a5c3059f7 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
@@ -14,7 +14,7 @@
 }
 
 .Value[data-placeholder] {
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
 
 .Select {
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index a606e40b0ea..d61e9b2beca 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -16,9 +16,9 @@ export default function ExampleSelect() {
         <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Apple
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-3 pr-2 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-3 pr-2 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           <Select.Value
-            className="data-[placeholder]:text-neutral-600 dark:data-[placeholder]:text-neutral-400"
+            className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400"
             placeholder="Select apple"
           />
           <Select.Icon className="flex">
@@ -27,7 +27,7 @@ export default function ExampleSelect() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
                 ⏶
               </Select.ScrollUpArrow>
@@ -36,7 +36,7 @@ export default function ExampleSelect() {
                   <Select.Item
                     key={label}
                     value={value}
-                    className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-neutral-950 data-[highlighted]:text-white dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-neutral-950"
+                    className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none group-data-[side=none]:pr-12 data-highlighted:bg-neutral-950 data-highlighted:text-white dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
                   >
                     <Select.ItemIndicator className="col-start-1">
                       <CheckIcon className="size-3" />
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
index f0fcbdf19f5..170a3c6bace 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
@@ -14,7 +14,7 @@
 }
 
 .Value[data-placeholder] {
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
 
 .Select {
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index a0fecfdf5b7..228e8fd625a 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -36,8 +36,8 @@ export default function MultiSelectExample() {
         <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Languages
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-3 pr-2 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
-          <Select.Value className="data-[placeholder]:text-neutral-600 dark:data-[placeholder]:text-neutral-400">
+        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-3 pr-2 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+          <Select.Value className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400">
             {renderValue}
           </Select.Value>
           <Select.Icon className="flex">
@@ -50,12 +50,12 @@ export default function MultiSelectExample() {
             sideOffset={8}
             alignItemWithTrigger={false}
           >
-            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding overflow-y-auto border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding overflow-y-auto border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               {values.map((value) => (
                 <Select.Item
                   key={value}
                   value={value}
-                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none scroll-my-1 group-data-[side=none]:pr-12 [@media(hover:hover)]:[&[data-highlighted]]:bg-neutral-950 [@media(hover:hover)]:[&[data-highlighted]]:text-white dark:[@media(hover:hover)]:[&[data-highlighted]]:bg-white dark:[@media(hover:hover)]:[&[data-highlighted]]:text-neutral-950"
+                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none scroll-my-1 group-data-[side=none]:pr-12 [@media(hover:hover)]:data-highlighted:bg-neutral-950 [@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:bg-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950"
                 >
                   <Select.ItemIndicator className="col-start-1">
                     <CheckIcon className="size-3" />
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index 04b9390ceff..9043a3c9d71 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ObjectValueSelect() {
         <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Shipping method
         </Select.Label>
-        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-start justify-between gap-3 pl-3 pr-2 py-1.5 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-start justify-between gap-3 pl-3 pr-2 py-1.5 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           <Select.Value>
             {(method: ShippingMethod) => (
               <span className="flex flex-col items-start gap-0.5">
@@ -26,7 +26,7 @@ export default function ObjectValueSelect() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
                 ⏶
               </Select.ScrollUpArrow>
@@ -35,14 +35,14 @@ export default function ObjectValueSelect() {
                   <Select.Item
                     key={method.id}
                     value={method}
-                    className="group/item grid cursor-default grid-cols-[0.75rem_1fr] items-start gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none group-data-[side=none]:pr-12 [@media(hover:hover)]:[&[data-highlighted]]:bg-neutral-950 [@media(hover:hover)]:[&[data-highlighted]]:text-white dark:[@media(hover:hover)]:[&[data-highlighted]]:bg-white dark:[@media(hover:hover)]:[&[data-highlighted]]:text-neutral-950"
+                    className="group/item grid cursor-default grid-cols-[0.75rem_1fr] items-start gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none group-data-[side=none]:pr-12 [@media(hover:hover)]:data-highlighted:bg-neutral-950 [@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:bg-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950"
                   >
                     <Select.ItemIndicator className="col-start-1 flex items-center justify-center self-start relative top-[0.4em]">
                       <CheckIcon className="size-3" />
                     </Select.ItemIndicator>
                     <Select.ItemText className="col-start-2 flex flex-col gap-0.5">
                       <span className="text-sm">{method.name}</span>
-                      <span className="text-xs text-neutral-600 [@media(hover:hover)]:group-data-[highlighted]/item:text-neutral-400 dark:text-neutral-400 dark:[@media(hover:hover)]:group-data-[highlighted]/item:text-neutral-600">
+                      <span className="text-xs text-neutral-600 [@media(hover:hover)]:group-data-highlighted/item:text-neutral-400 dark:text-neutral-400 dark:[@media(hover:hover)]:group-data-highlighted/item:text-neutral-600">
                         {method.duration} ({method.price})
                       </span>
                     </Select.ItemText>

From 97dd5e0eed8bb89c972b42211196d759b42e8ff1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 30 Apr 2026 22:53:15 +0200
Subject: [PATCH 110/257] Collapsible: improve chevron icon

---
 .../collapsible/demos/hero/css-modules/index.module.css       | 2 +-
 .../components/collapsible/demos/hero/css-modules/index.tsx   | 2 +-
 .../components/collapsible/demos/hero/tailwind/index.tsx      | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
index f2293684a28..abcc6db0089 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
@@ -1,6 +1,6 @@
 .Collapsible {
   display: flex;
-  width: 14rem;
+  width: 12rem;
   min-height: 9rem;
   flex-direction: column;
   justify-content: center;
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx
index 75436bc6bdc..40738e61b25 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx
@@ -23,7 +23,7 @@ export default function ExampleCollapsible() {
 export function ChevronIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" />
+      <path d="M3.5 1L7.5 5L3.5 9" stroke="currentColor" strokeWidth="1" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
index a59f1e7cc91..4e1ac29ae14 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Collapsible } from '@base-ui/react/collapsible';
 
 export default function ExampleCollapsible() {
   return (
-    <Collapsible.Root className="flex min-h-36 w-56 flex-col justify-center text-neutral-950 dark:text-white">
+    <Collapsible.Root className="flex min-h-36 w-48 flex-col justify-center text-neutral-950 dark:text-white">
       <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 pl-3 pr-2 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
         Recovery keys
         <ChevronIcon className="size-3 transition-transform duration-100 ease-out group-data-panel-open:rotate-90" />
@@ -22,7 +22,7 @@ export default function ExampleCollapsible() {
 export function ChevronIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" />
+      <path d="M3.5 1L7.5 5L3.5 9" stroke="currentColor" strokeWidth="1" />
     </svg>
   );
 }

From 6da2f3c8cfde1419227e05e4a6481abdbddef0ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 5 May 2026 12:37:32 +0200
Subject: [PATCH 111/257] Combobox, icons & mooooore

---
 .../demos/hero/css-modules/index.tsx          |  4 +-
 .../accordion/demos/hero/tailwind/index.tsx   |  4 +-
 .../demos/multiple/css-modules/index.tsx      |  4 +-
 .../demos/multiple/tailwind/index.tsx         |  4 +-
 .../demos/hero/css-modules/index.tsx          |  6 +-
 .../demos/hero/tailwind/index.tsx             |  6 +-
 .../demos/nested/css-modules/index.tsx        | 11 +--
 .../demos/parent/css-modules/index.tsx        | 11 +--
 .../checkbox/demos/hero/css-modules/index.tsx |  6 +-
 .../checkbox/demos/hero/tailwind/index.tsx    |  3 +-
 .../css-modules/index.module.css              | 97 +++++++++++--------
 .../async-multiple/css-modules/index.tsx      | 27 +++---
 .../demos/async-multiple/tailwind/index.tsx   | 57 ++++++-----
 .../async-single/css-modules/index.module.css | 25 +++--
 .../demos/async-single/css-modules/index.tsx  | 38 ++++----
 .../demos/async-single/tailwind/index.tsx     | 62 ++++++------
 .../creatable/css-modules/index.module.css    | 96 ++++++++++++------
 .../demos/creatable/css-modules/index.tsx     | 43 ++++----
 .../demos/creatable/tailwind/index.tsx        | 86 ++++++++--------
 .../grouped/css-modules/index.module.css      | 28 +++---
 .../demos/grouped/css-modules/index.tsx       | 38 ++++----
 .../combobox/demos/grouped/tailwind/index.tsx | 62 ++++++------
 .../demos/hero/css-modules/index.module.css   | 25 +++--
 .../combobox/demos/hero/css-modules/index.tsx | 38 ++++----
 .../combobox/demos/hero/tailwind/index.tsx    | 62 ++++++------
 .../css-modules/index.module.css              | 20 ++--
 .../input-inside-popup/css-modules/index.tsx  | 22 +++--
 .../input-inside-popup/tailwind/index.tsx     | 46 +++++----
 .../multiple/css-modules/index.module.css     | 54 ++++++++---
 .../demos/multiple/css-modules/index.tsx      | 27 +++---
 .../demos/multiple/tailwind/index.tsx         | 48 +++++----
 .../virtualized/css-modules/index.module.css  |  2 +-
 .../demos/virtualized/css-modules/index.tsx   | 12 ++-
 .../demos/virtualized/tailwind/index.tsx      | 24 +++--
 .../demos/submenu/css-modules/index.tsx       |  7 +-
 .../demos/submenu/tailwind/index.tsx          |  7 +-
 .../css-modules/index.module.css              | 13 ++-
 .../outside-scroll/css-modules/index.tsx      |  8 +-
 .../demos/outside-scroll/tailwind/index.tsx   | 12 +--
 .../uncontained/css-modules/index.module.css  | 13 +--
 .../demos/uncontained/css-modules/index.tsx   |  8 +-
 .../demos/uncontained/tailwind/index.tsx      |  8 +-
 .../checkbox-items/css-modules/index.tsx      | 10 +-
 .../demos/checkbox-items/tailwind/index.tsx   | 10 +-
 .../css-modules/index.tsx                     | 10 +-
 .../tailwind/index.tsx                        | 13 +--
 .../demos/group-labels/css-modules/index.tsx  |  6 +-
 .../demos/group-labels/tailwind/index.tsx     |  6 +-
 .../menu/demos/hero/css-modules/index.tsx     |  4 +-
 .../menu/demos/hero/tailwind/index.tsx        |  4 +-
 .../demos/open-on-hover/css-modules/index.tsx |  4 +-
 .../demos/open-on-hover/tailwind/index.tsx    |  4 +-
 .../demos/radio-items/css-modules/index.tsx   | 10 +-
 .../menu/demos/radio-items/tailwind/index.tsx | 10 +-
 .../menu/demos/submenu/css-modules/index.tsx  |  6 +-
 .../menu/demos/submenu/tailwind/index.tsx     |  6 +-
 .../menubar/demos/hero/css-modules/index.tsx  |  8 +-
 .../menubar/demos/hero/tailwind/index.tsx     |  8 +-
 .../demos/hero/css-modules/index.tsx          |  4 +-
 .../demos/hero/tailwind/index.tsx             |  4 +-
 .../demos/nested-inline/css-modules/index.tsx |  4 +-
 .../demos/nested-inline/tailwind/index.tsx    |  4 +-
 .../demos/nested/css-modules/index.tsx        |  6 +-
 .../demos/nested/tailwind/index.tsx           |  6 +-
 .../demos/hero/css-modules/index.module.css   | 10 ++
 .../demos/hero/css-modules/index.tsx          | 26 +----
 .../demos/hero/tailwind/index.tsx             | 30 ++----
 .../css-modules/index.tsx                     |  4 -
 .../components/popover/demos/icons-tw.tsx     |  4 -
 .../demos/grouped/css-modules/index.tsx       |  8 +-
 .../select/demos/grouped/tailwind/index.tsx   |  8 +-
 .../select/demos/hero/css-modules/index.tsx   |  8 +-
 .../select/demos/hero/tailwind/index.tsx      |  8 +-
 .../demos/multiple/css-modules/index.tsx      |  8 +-
 .../select/demos/multiple/tailwind/index.tsx  |  8 +-
 .../demos/object-values/css-modules/index.tsx |  8 +-
 .../demos/object-values/tailwind/index.tsx    |  8 +-
 .../demos/anchored/css-modules/index.tsx      |  8 +-
 .../toast/demos/anchored/tailwind/index.tsx   |  8 +-
 .../demos/hero/css-modules/index.tsx          | 27 +-----
 .../demos/hero/tailwind/index.tsx             | 27 +-----
 .../toolbar/demos/hero/css-modules/index.tsx  |  8 +-
 .../toolbar/demos/hero/tailwind/index.tsx     |  8 +-
 .../css-modules/index.tsx                     |  3 +-
 .../css-modules/index.tsx                     | 15 ++-
 .../css-modules/index.tsx                     |  3 +-
 .../components/tooltip/demos/icons-tw.tsx     | 16 ++-
 87 files changed, 785 insertions(+), 797 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/accordion/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/hero/css-modules/index.tsx
index e18100da67e..fd505f25334 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/hero/css-modules/index.tsx
@@ -53,8 +53,8 @@ export default function ExampleAccordion() {
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
-      <path d="M6 0.5V11.5" />
-      <path d="M0.5 6H11.5" />
+      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
index f718c44731c..3bd8cf807c7 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
@@ -52,8 +52,8 @@ export default function ExampleAccordion() {
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
-      <path d="M6 0.5V11.5" />
-      <path d="M0.5 6H11.5" />
+      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/multiple/css-modules/index.tsx
index 564ab43b5c8..ec54c47b61e 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/multiple/css-modules/index.tsx
@@ -53,8 +53,8 @@ export default function ExampleAccordion() {
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
-      <path d="M6 0.5V11.5" />
-      <path d="M0.5 6H11.5" />
+      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
index 851ac28c370..c4a0046327f 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
@@ -55,8 +55,8 @@ export default function ExampleAccordion() {
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
-      <path d="M6 0.5V11.5" />
-      <path d="M0.5 6H11.5" />
+      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
index 7b51ed74f80..c04914d3538 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
@@ -54,12 +54,10 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M20 6 9 17l-5-5" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
index 181207a4d30..1f7e1328a11 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
@@ -65,12 +65,10 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M20 6 9 17l-5-5" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
index 3baf057636a..f27ef90a33c 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
@@ -152,27 +152,24 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M20 6 9 17l-5-5" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
 function HorizontalRuleIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" strokeWidth={1} {...props}>
       <line
         x1="3"
         y1="12"
         x2="21"
         y2="12"
         stroke="currentColor"
-        strokeWidth={2}
-        strokeLinecap="round"
+        vectorEffect="non-scaling-stroke"
       />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
index 052712e813e..c5e4a957783 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
@@ -75,27 +75,24 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M20 6 9 17l-5-5" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
 function HorizontalRuleIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" strokeWidth={1} {...props}>
       <line
         x1="3"
         y1="12"
         x2="21"
         y2="12"
         stroke="currentColor"
-        strokeWidth={2}
-        strokeLinecap="round"
+        vectorEffect="non-scaling-stroke"
       />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
index ab337b96ab5..c39c494910f 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
@@ -23,12 +23,10 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M20 6 9 17l-5-5" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
index 1ffd05c2d28..7ef6c865b3e 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
@@ -26,8 +26,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       fill="none"
       stroke="currentColor"
       strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+
       {...props}
     >
       <path d="M20 6 9 17l-5-5" />
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
index d7daf377bd2..8e43d054651 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
@@ -1,41 +1,45 @@
 .Container {
+  max-width: 28rem;
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Label {
-  display: inline-flex;
-  color: inherit;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .InputGroup {
   box-sizing: border-box;
-  position: relative;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.25rem;
-  padding: 0.25rem 0.375rem;
-  min-height: 2.5rem;
+  gap: 0.125rem;
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: transparent;
+  min-height: 2rem;
+  padding: 0.25rem 0.5rem;
   width: 16rem;
   cursor: text;
 
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: transparent;
+  @media (min-width: 32rem) {
+    width: 22rem;
+  }
+
+  &:has(.Chip) {
+    padding-inline: 0.25rem;
+  }
 
   &:focus-within {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
   }
-
-  @media (min-width: 500px) {
-    width: 20rem;
-  }
 }
 
 .Chips {
@@ -47,14 +51,17 @@
 }
 
 .Chip {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
-  gap: 0.25rem;
+  min-height: calc(1.5rem - 2px);
   background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   color: light-dark(var(--color-neutral-950), white);
-  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
   font-size: 0.875rem;
-  line-height: 1.25rem;
+  line-height: 1;
+  padding: 0 0.2rem 0 0.4rem;
+  overflow: hidden;
+  gap: 0.25rem;
   outline: 0;
   cursor: default;
 
@@ -72,34 +79,51 @@
 }
 
 .ChipRemove {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.2rem;
+  box-sizing: border-box;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
   border: none;
   background: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: inherit;
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    }
+  }
+}
+
+.Chip:focus-within .ChipRemove {
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-neutral-700), var(--color-neutral-200));
     }
   }
 }
 
+.ChipRemoveIcon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
 .Input {
-  box-sizing: border-box;
   flex: 1;
-  min-width: 6rem;
-  height: 2rem;
+  box-sizing: border-box;
   padding: 0;
+  margin: 0;
   border: none;
-  padding-left: 0.5rem;
-  background: none;
+  height: calc(1.5rem - 2px);
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1;
   font-weight: 400;
+  background-color: transparent;
   color: light-dark(var(--color-neutral-950), white);
+  min-width: 3rem;
 
   &:focus {
     outline: none;
@@ -108,6 +132,7 @@
 
 .Positioner {
   outline: 0;
+  z-index: 50;
 }
 
 .Popup {
@@ -116,8 +141,8 @@
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
-  max-height: min(var(--available-height), 23rem);
   max-width: var(--available-width);
+  max-height: min(var(--available-height), 24rem);
   overflow-y: auto;
   scroll-padding-block: 0.5rem;
   overscroll-behavior: contain;
@@ -125,19 +150,15 @@
     opacity 0.1s,
     transform 0.1s;
   transform-origin: var(--transform-origin);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
-  &[data-starting-style] {
+  &[data-starting-style],
+  &[data-ending-style] {
     opacity: 0;
     transform: scale(0.95);
   }
 
-  &[data-ending-style] {
-    transition: none;
-  }
-
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
-
   @media (prefers-color-scheme: dark) {
     box-shadow: none;
   }
@@ -191,7 +212,7 @@
   user-select: none;
   padding-block: 0.5rem;
   padding-inline: 0.5rem;
-  padding-right: 1.25rem;
+  padding-right: 0.5rem;
   display: grid;
   gap: 0.5rem;
   align-items: flex-start;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
index 9c78b9fb30b..d1f37073a8c 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
@@ -148,7 +148,7 @@ export default function ExampleAsyncMultipleCombobox() {
                         className={styles.ChipRemove}
                         aria-label={`Remove ${user.name}`}
                       >
-                        <XIcon />
+                        <XIcon className={styles.ChipRemoveIcon} />
                       </Combobox.ChipRemove>
                     </Combobox.Chip>
                   ))}
@@ -199,8 +199,16 @@ export default function ExampleAsyncMultipleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
@@ -208,19 +216,16 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width={16}
-      height={16}
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden
+      strokeWidth="1"
       {...props}
     >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
+      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
+      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index f5e84147e2f..ac990b711ae 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -134,11 +134,14 @@ export default function ExampleAsyncMultipleCombobox() {
         });
       }}
     >
-      <div className="flex flex-col gap-1 text-sm text-neutral-900">
-        <label className="inline-flex text-inherit font-bold" htmlFor={id}>
+      <div className="max-w-[28rem] flex flex-col gap-1">
+        <label
+          className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white"
+          htmlFor={id}
+        >
           Assign reviewers
         </label>
-        <Combobox.InputGroup className="relative flex min-h-10 w-[16rem] cursor-text rounded-md border border-neutral-200 bg-[canvas] px-1.5 py-1 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 md:w-[20rem]">
+        <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-transparent px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
           <Combobox.Chips className="flex w-full flex-wrap items-center gap-1">
             <Combobox.Value>
               {(value: DirectoryUser[]) => (
@@ -146,22 +149,22 @@ export default function ExampleAsyncMultipleCombobox() {
                   {value.map((user) => (
                     <Combobox.Chip
                       key={user.id}
-                      className="flex cursor-default items-center gap-1 rounded-md bg-neutral-100 py-1 pl-2 pr-1 text-sm text-neutral-900 outline-none focus-within:bg-blue-800 focus-within:text-neutral-50 [@media(hover:hover)]:[&[data-highlighted]]:bg-blue-800 [@media(hover:hover)]:[&[data-highlighted]]:text-neutral-50"
+                      className="group flex min-h-[calc(1.5rem-2px)] cursor-default items-center gap-1 overflow-hidden bg-neutral-100 py-0 pr-[0.2rem] pl-[0.4rem] text-sm leading-none text-neutral-950 outline-none focus-within:bg-neutral-950 focus-within:text-white [@media(hover:hover)]:data-highlighted:bg-neutral-950 [@media(hover:hover)]:data-highlighted:text-white dark:bg-neutral-800 dark:text-white dark:focus-within:bg-white dark:focus-within:text-neutral-950 dark:[@media(hover:hover)]:data-highlighted:bg-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950"
                       aria-label={user.name}
                     >
                       {user.name}
                       <Combobox.ChipRemove
-                        className="inline-flex items-center justify-center rounded-md border-none bg-transparent p-[0.2rem] text-inherit hover:bg-neutral-200"
+                        className="flex size-4 items-center justify-center border-0 bg-transparent p-0 text-inherit hover:bg-neutral-200 group-focus-within:hover:bg-neutral-700 dark:hover:bg-neutral-700 dark:group-focus-within:hover:bg-neutral-200"
                         aria-label={`Remove ${user.name}`}
                       >
-                        <XIcon />
+                        <XIcon className="size-3" />
                       </Combobox.ChipRemove>
                     </Combobox.Chip>
                   ))}
                   <Combobox.Input
                     id={id}
                     placeholder={value.length > 0 ? '' : 'e.g. Michael'}
-                    className="h-8 min-w-24 flex-1 rounded-md border-0 bg-transparent pl-2 text-base font-normal text-neutral-900 outline-none placeholder:font-normal"
+                    className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-transparent p-0 text-sm leading-none font-normal text-neutral-950 outline-none dark:text-white"
                   />
                 </React.Fragment>
               )}
@@ -173,19 +176,19 @@ export default function ExampleAsyncMultipleCombobox() {
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
           <Combobox.Popup
-            className="box-border w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto scroll-pb-2 scroll-pt-2 overscroll-contain rounded-md bg-[canvas] py-2 text-neutral-900 shadow-[0_0.625rem_0.9375rem_-0.1875rem_var(--color-neutral-200),0_0.25rem_0.375rem_-0.25rem_var(--color-neutral-200)] outline outline-1 outline-neutral-200 transition-[opacity,transform,scale] duration-100 data-[ending-style]:transition-none data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:-outline-offset-1 dark:shadow-none dark:outline-neutral-300"
+            className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-2 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-busy={isPending || undefined}
           >
             <Combobox.Status>
               {status ? (
-                <div className="flex items-center gap-2 py-1 pl-4 pr-5 text-sm text-neutral-600">
+                <div className="flex items-center gap-2 py-1 pr-5 pl-2 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
                   {status}
                 </div>
               ) : null}
             </Combobox.Status>
             <Combobox.Empty>
               {emptyMessage ? (
-                <div className="box-border px-4 py-2 text-sm leading-4 text-neutral-600">
+                <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                   {emptyMessage}
                 </div>
               ) : null}
@@ -195,18 +198,20 @@ export default function ExampleAsyncMultipleCombobox() {
                 <Combobox.Item
                   key={user.id}
                   value={user}
-                  className="grid cursor-default select-none grid-cols-[0.75rem_1fr] items-start gap-2 py-2 pl-4 pr-5 text-base leading-[1.2rem] outline-none [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-neutral-900 [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-2 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1] [@media(hover:hover)]:[&[data-highlighted]]:before:rounded [@media(hover:hover)]:[&[data-highlighted]]:before:bg-neutral-100 [@media(hover:hover)]:[&[data-highlighted]]:before:content-['']"
+                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-start gap-2 px-2 py-2 text-sm leading-[1.2rem] outline-none select-none [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-neutral-950 [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-100 dark:[@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:before:bg-neutral-800"
                 >
                   <Combobox.ItemIndicator className="col-start-1 mt-1">
                     <CheckIcon className="size-3" />
                   </Combobox.ItemIndicator>
                   <span className="col-start-2 flex flex-col gap-1">
                     <span className="text-[0.95rem] font-bold">{user.name}</span>
-                    <span className="flex flex-wrap gap-2 text-[0.8125rem] text-neutral-600">
+                    <span className="flex flex-wrap gap-2 text-[0.8125rem] text-neutral-500 dark:text-neutral-400">
                       <span className="opacity-80">@{user.username}</span>
                       <span>{user.title}</span>
                     </span>
-                    <span className="text-xs text-neutral-500">{user.email}</span>
+                    <span className="text-xs text-neutral-500 dark:text-neutral-400">
+                      {user.email}
+                    </span>
                   </span>
                 </Combobox.Item>
               )}
@@ -220,8 +225,16 @@ export default function ExampleAsyncMultipleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
@@ -229,23 +242,19 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width={16}
-      height={16}
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden
+      strokeWidth="1"
       {...props}
     >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
+      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
+      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
-
 interface DirectoryUser {
   id: string;
   name: string;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
index 7defff994ab..268628ca42a 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
@@ -10,6 +10,7 @@
 }
 
 .InputGroup {
+  box-sizing: border-box;
   position: relative;
   width: 16rem;
   height: 2rem;
@@ -21,12 +22,12 @@
     outline-offset: -2px;
   }
 
-  @media (min-width: 500px) {
+  @media (min-width: 32rem) {
     width: 20rem;
   }
 
   &:has(.Clear) .Input {
-    padding-right: calc(0.5rem + 1.5rem * 2);
+    padding-right: calc(0.5rem + 2rem * 2);
   }
 }
 
@@ -36,7 +37,7 @@
   width: 100%;
   height: 100%;
   padding-left: 0.5rem;
-  padding-right: calc(0.5rem + 1.5rem);
+  padding-right: calc(0.5rem + 2rem);
   border: none;
   font-family: inherit;
   font-size: 0.875rem;
@@ -56,8 +57,8 @@
   align-items: center;
   justify-content: center;
   bottom: 0;
-  height: 2rem;
-  right: 0.5rem;
+  height: 100%;
+  right: 0;
   border: none;
   color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   padding: 0;
@@ -70,19 +71,23 @@
   align-items: center;
   justify-content: center;
   width: 1.5rem;
-  height: 2rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  height: 100%;
+  color: light-dark(var(--color-neutral-950), white);
   border: none;
   padding: 0;
   background: none;
 }
 
-.ClearIcon,
-.TriggerIcon {
+.ClearIcon {
   width: 1rem;
   height: 1rem;
 }
 
+.TriggerIcon {
+  width: 0.625rem;
+  height: 0.625rem;
+}
+
 .Positioner {
   outline: 0;
 }
@@ -160,7 +165,7 @@
   user-select: none;
   padding-block: 0.5rem;
   padding-inline: 0.5rem;
-  padding-right: 1.25rem;
+  padding-right: 0.5rem;
   display: grid;
   gap: 0.5rem;
   align-items: flex-start;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
index 846cac7a2b6..17c8392d9cf 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
@@ -116,7 +116,7 @@ export default function ExampleAsyncSingleCombobox() {
           <Combobox.Input id={id} placeholder="e.g. Michael" className={styles.Input} />
           <div className={styles.ActionButtons}>
             <Combobox.Clear className={styles.Clear} aria-label="Clear selection">
-              <ClearIcon className={styles.ClearIcon} />
+              <XIcon className={styles.ClearIcon} />
             </Combobox.Clear>
             <Combobox.Trigger className={styles.Trigger} aria-label="Open popup">
               <ChevronDownIcon className={styles.TriggerIcon} />
@@ -159,42 +159,42 @@ export default function ExampleAsyncSingleCombobox() {
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
-    </svg>
-  );
-}
-
-function ClearIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M18 6L6 18" />
-      <path d="M6 6l12 12" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M6 9l6 6 6-6" />
+      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
+      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
+
+function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index 7b38cc2a3c2..48ac6acfe3d 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -111,26 +111,26 @@ export default function ExampleAsyncSingleCombobox() {
         });
       }}
     >
-      <div className="relative flex flex-col gap-1 text-sm font-bold text-neutral-900">
+      <div className="relative flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         <label htmlFor={id}>Assign reviewer</label>
-        <Combobox.InputGroup className="relative box-content h-10 w-[16rem] rounded-md border border-neutral-200 bg-[canvas] focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 md:w-[20rem] [&>input]:pr-[calc(0.5rem+1.5rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+1.5rem*2)]">
+        <Combobox.InputGroup className="relative h-8 w-64 border border-neutral-950 bg-transparent focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 dark:border-white md:w-80 [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
           <Combobox.Input
             id={id}
             placeholder="e.g. Michael"
-            className="box-border h-full w-full border-0 bg-transparent pl-3.5 text-base font-normal text-neutral-900 outline-none"
+            className="h-full w-full border-0 bg-transparent pl-2 text-sm font-normal text-neutral-950 outline-none dark:text-white"
           />
-          <div className="absolute bottom-0 right-2 flex h-10 items-center justify-center text-neutral-600">
+          <div className="absolute right-0 bottom-0 flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
             <Combobox.Clear
-              className="combobox-clear flex h-10 w-6 items-center justify-center rounded border-0 bg-transparent p-0"
+              className="combobox-clear flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white"
               aria-label="Clear selection"
             >
-              <ClearIcon className="size-4" />
+              <XIcon className="size-4" />
             </Combobox.Clear>
             <Combobox.Trigger
-              className="flex h-10 w-6 items-center justify-center rounded border-0 bg-transparent p-0"
+              className="flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white"
               aria-label="Open popup"
             >
-              <ChevronDownIcon className="size-4" />
+              <ChevronDownIcon className="size-2.5" />
             </Combobox.Trigger>
           </div>
         </Combobox.InputGroup>
@@ -139,19 +139,19 @@ export default function ExampleAsyncSingleCombobox() {
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
           <Combobox.Popup
-            className="box-border w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto scroll-pb-2 scroll-pt-2 overscroll-contain rounded-md bg-[canvas] py-2 text-neutral-900 shadow-[0_0.625rem_0.9375rem_-0.1875rem_var(--color-neutral-200),0_0.25rem_0.375rem_-0.25rem_var(--color-neutral-200)] outline outline-1 outline-neutral-200 transition-[transform,scale,opacity] data-[ending-style]:transition-none data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:-outline-offset-1 dark:shadow-none dark:outline-neutral-300"
+            className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-2 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:transition-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-busy={isPending || undefined}
           >
             <Combobox.Status>
               {status ? (
-                <div className="flex items-center gap-2 py-1 pl-4 pr-5 text-sm text-neutral-600">
+                <div className="flex items-center gap-2 py-1 pr-5 pl-2 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
                   {status}
                 </div>
               ) : null}
             </Combobox.Status>
             <Combobox.Empty>
               {emptyMessage ? (
-                <div className="px-4 py-2 text-[0.875rem] leading-4 text-neutral-600">
+                <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                   {emptyMessage}
                 </div>
               ) : null}
@@ -161,14 +161,14 @@ export default function ExampleAsyncSingleCombobox() {
                 <Combobox.Item
                   key={user.id}
                   value={user}
-                  className="grid cursor-default select-none grid-cols-[0.75rem_1fr] items-start gap-2 py-2 pl-4 pr-5 text-base leading-[1.2rem] outline-none [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-neutral-900 [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-2 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1] [@media(hover:hover)]:[&[data-highlighted]]:before:rounded [@media(hover:hover)]:[&[data-highlighted]]:before:bg-neutral-100 [@media(hover:hover)]:[&[data-highlighted]]:before:content-['']"
+                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-start gap-2 px-2 py-2 text-sm leading-[1.2rem] outline-none select-none [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-neutral-950 [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-100 dark:[@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:before:bg-neutral-800"
                 >
                   <Combobox.ItemIndicator className="col-start-1 mt-1">
                     <CheckIcon className="size-3" />
                   </Combobox.ItemIndicator>
                   <span className="col-start-2 flex flex-col gap-1">
                     <span className="text-[0.95rem] font-bold">{user.name}</span>
-                    <span className="flex flex-wrap gap-3 text-[0.8125rem] text-neutral-600">
+                    <span className="flex flex-wrap gap-3 text-[0.8125rem] text-neutral-500 dark:text-neutral-400">
                       <span className="opacity-80">@{user.username}</span>
                       <span>{user.title}</span>
                     </span>
@@ -185,42 +185,42 @@ export default function ExampleAsyncSingleCombobox() {
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
-    </svg>
-  );
-}
-
-function ClearIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M18 6L6 18" />
-      <path d="M6 6l12 12" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M6 9l6 6 6-6" />
+      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
+      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
+
+function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
index fe5fbe957e1..bcc1e385bff 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
@@ -23,35 +23,43 @@
   gap: 0.125rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: transparent;
-  padding: 0.25rem 0.375rem;
+  min-height: 2rem;
+  padding: 0.25rem 0.5rem;
   width: 16rem;
   cursor: text;
 
+  @media (min-width: 32rem) {
+    width: 22rem;
+  }
+
+  &:has(.Chip) {
+    padding-inline: 0.25rem;
+  }
+
   &:focus-within {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
   }
-
-  @media (min-width: 500px) {
-    width: 22rem;
-  }
 }
 
 .Chips {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.125rem;
+  gap: 0.25rem;
   width: 100%;
 }
 
 .Chip {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
+  min-height: calc(1.5rem - 2px);
   background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   color: light-dark(var(--color-neutral-950), white);
   font-size: 0.875rem;
-  padding: 0.2rem 0.2rem 0.2rem 0.4rem;
+  line-height: 1;
+  padding: 0 0.2rem 0 0.4rem;
   overflow: hidden;
   gap: 0.25rem;
   outline: 0;
@@ -71,28 +79,47 @@
 }
 
 .ChipRemove {
+  box-sizing: border-box;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
   border: none;
   background: none;
-  padding: 0.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
   color: inherit;
 
-  &:hover {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    }
   }
 }
 
+.Chip:focus-within .ChipRemove {
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-neutral-700), var(--color-neutral-200));
+    }
+  }
+}
+
+.ChipRemoveIcon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
 .Input {
   flex: 1;
   box-sizing: border-box;
-  padding-left: 0.5rem;
+  padding: 0;
   margin: 0;
   border: none;
-  height: 2rem;
+  height: calc(1.5rem - 2px);
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1;
   font-weight: 400;
   background-color: transparent;
   color: light-dark(var(--color-neutral-950), white);
@@ -119,10 +146,19 @@
   overflow-y: auto;
   scroll-padding-block: 0.5rem;
   overscroll-behavior: contain;
-
+  transition:
+    opacity 0.1s,
+    transform 0.1s;
+  transform-origin: var(--transform-origin);
   border: 1px solid light-dark(var(--color-neutral-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
   @media (prefers-color-scheme: dark) {
     box-shadow: none;
   }
@@ -135,7 +171,7 @@
   user-select: none;
   padding-block: 0.5rem;
   padding-left: 0.5rem;
-  padding-right: 2rem;
+  padding-right: 0.5rem;
   display: grid;
   gap: 0.5rem;
   align-items: center;
@@ -205,7 +241,7 @@
   background: none;
   text-align: left;
   color: light-dark(var(--color-neutral-950), white);
-  padding: 0.5rem 2rem 0.5rem 0.5rem;
+  padding: 0.5rem;
   cursor: default;
 }
 
@@ -270,18 +306,17 @@
 }
 
 .Title {
-  margin-top: -0.375rem;
-  margin-bottom: 0.25rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
 .Description {
   margin: 0 0 1rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .TextField {
@@ -292,7 +327,10 @@
   background-color: transparent;
   color: light-dark(var(--color-neutral-950), white);
   padding-inline: 0.5rem;
-  font: inherit;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
 
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
@@ -303,7 +341,7 @@
 .Actions {
   display: flex;
   justify-content: end;
-  gap: 1rem;
+  gap: 0.75rem;
   margin-top: 1rem;
 }
 
@@ -312,16 +350,16 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
+  line-height: 1.25rem;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
@@ -332,7 +370,7 @@
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
index 1b214178de9..741488dc9c6 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
@@ -142,7 +142,7 @@ export default function ExampleCreatableCombobox() {
                           className={styles.ChipRemove}
                           aria-label={`Remove ${label.value}`}
                         >
-                          <XIcon />
+                          <XIcon className={styles.ChipRemoveIcon} />
                         </Combobox.ChipRemove>
                       </Combobox.Chip>
                     ))}
@@ -221,27 +221,25 @@ export default function ExampleCreatableCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="butt"
-      strokeLinejoin="miter"
-      aria-hidden
-      {...props}
-    >
-      <path d="M6 1v10M1 6h10" />
+    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
@@ -249,19 +247,16 @@ function PlusIcon(props: React.ComponentProps<'svg'>) {
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width={16}
-      height={16}
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden
+      strokeWidth="1"
       {...props}
     >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
+      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
+      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
index 18094b63f9f..d1d9006dc55 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
@@ -121,27 +121,30 @@ export default function ExampleCreatableCombobox() {
           highlightedItemRef.current = item;
         }}
       >
-        <div className="max-w-112 flex flex-col gap-1">
-          <label className="text-sm font-bold text-neutral-900" htmlFor={id}>
+        <div className="max-w-[28rem] flex flex-col gap-1">
+          <label
+            className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white"
+            htmlFor={id}
+          >
             Labels
           </label>
-          <Combobox.InputGroup className="w-64 cursor-text rounded-md border border-neutral-200 bg-[canvas] px-1.5 py-1 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 min-[500px]:w-[22rem]">
-            <Combobox.Chips className="flex w-full flex-wrap items-center gap-0.5">
+          <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-transparent px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
+            <Combobox.Chips className="flex w-full flex-wrap items-center gap-1">
               <Combobox.Value>
                 {(value: LabelItem[]) => (
                   <React.Fragment>
                     {value.map((label) => (
                       <Combobox.Chip
                         key={label.id}
-                        className="flex items-center gap-1 rounded-md bg-neutral-100 px-1.5 py-[0.2rem] text-sm text-neutral-900 outline-none cursor-default [@media(hover:hover)]:[&[data-highlighted]]:bg-blue-800 [@media(hover:hover)]:[&[data-highlighted]]:text-neutral-50 focus-within:bg-blue-800 focus-within:text-neutral-50"
+                        className="group flex min-h-[calc(1.5rem-2px)] cursor-default items-center gap-1 overflow-hidden bg-neutral-100 py-0 pr-[0.2rem] pl-[0.4rem] text-sm leading-none text-neutral-950 outline-none focus-within:bg-neutral-950 focus-within:text-white [@media(hover:hover)]:data-highlighted:bg-neutral-950 [@media(hover:hover)]:data-highlighted:text-white dark:bg-neutral-800 dark:text-white dark:focus-within:bg-white dark:focus-within:text-neutral-950 dark:[@media(hover:hover)]:data-highlighted:bg-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950"
                         aria-label={label.value}
                       >
                         {label.value}
                         <Combobox.ChipRemove
-                          className="rounded-md p-1 text-inherit hover:bg-neutral-200"
+                          className="flex size-4 items-center justify-center border-0 bg-transparent p-0 text-inherit hover:bg-neutral-200 group-focus-within:hover:bg-neutral-700 dark:hover:bg-neutral-700 dark:group-focus-within:hover:bg-neutral-200"
                           aria-label={`Remove ${label.value}`}
                         >
-                          <XIcon />
+                          <XIcon className="size-3" />
                         </Combobox.ChipRemove>
                       </Combobox.Chip>
                     ))}
@@ -149,7 +152,7 @@ export default function ExampleCreatableCombobox() {
                       ref={comboboxInputRef}
                       id={id}
                       placeholder={value.length > 0 ? '' : 'e.g. bug'}
-                      className="min-w-12 flex-1 h-8 rounded-md border-0 bg-transparent pl-2 text-base font-normal text-neutral-900 outline-none"
+                      className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-transparent p-0 text-sm leading-none font-normal text-neutral-950 outline-none dark:text-white"
                       onKeyDown={handleInputKeyDown}
                     />
                   </React.Fragment>
@@ -161,9 +164,9 @@ export default function ExampleCreatableCombobox() {
 
         <Combobox.Portal>
           <Combobox.Positioner className="z-50 outline-none" sideOffset={4}>
-            <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-lg bg-[canvas] py-2 text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300">
+            <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-2 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Combobox.Empty>
-                <div className="px-4 py-2 text-[0.925rem] leading-4 text-neutral-600">
+                <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                   No labels found.
                 </div>
               </Combobox.Empty>
@@ -172,7 +175,7 @@ export default function ExampleCreatableCombobox() {
                   item.creatable ? (
                     <Combobox.Item
                       key={item.id}
-                      className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-neutral-50 [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-2 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1] [@media(hover:hover)]:[&[data-highlighted]]:before:rounded-sm [@media(hover:hover)]:[&[data-highlighted]]:before:bg-neutral-900"
+                      className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-selected:relative data-selected:z-0 data-selected:text-neutral-950 data-selected:before:absolute data-selected:before:inset-0 data-selected:before:z-[-1] [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-white [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-950 dark:data-selected:text-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950 dark:[@media(hover:hover)]:data-highlighted:before:bg-white"
                       value={item}
                     >
                       <span className="col-start-1">
@@ -183,7 +186,7 @@ export default function ExampleCreatableCombobox() {
                   ) : (
                     <Combobox.Item
                       key={item.id}
-                      className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-neutral-50 [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-2 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1] [@media(hover:hover)]:[&[data-highlighted]]:before:rounded-sm [@media(hover:hover)]:[&[data-highlighted]]:before:bg-neutral-900"
+                      className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-selected:relative data-selected:z-0 data-selected:text-neutral-950 data-selected:before:absolute data-selected:before:inset-0 data-selected:before:z-[-1] [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-white [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-950 dark:data-selected:text-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950 dark:[@media(hover:hover)]:data-highlighted:before:bg-white"
                       value={item}
                     >
                       <Combobox.ItemIndicator className="col-start-1">
@@ -201,31 +204,29 @@ export default function ExampleCreatableCombobox() {
 
       <Dialog.Root open={openDialog} onOpenChange={setOpenDialog}>
         <Dialog.Portal>
-          <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity dark:opacity-70 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 supports-[-webkit-touch-callout:none]:absolute" />
+          <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity dark:opacity-70 data-starting-style:opacity-0 data-ending-style:opacity-0 supports-[-webkit-touch-callout:none]:absolute" />
           <Dialog.Popup
-            className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 mt-[-2rem] w-[24rem] max-w-[calc(100vw-3rem)] rounded-lg bg-[canvas] p-6 text-neutral-900 outline-1 outline-neutral-200 transition-all data-[starting-style]:opacity-0 data-[starting-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:scale-90 dark:-outline-offset-1 dark:outline-neutral-300"
+            className="fixed top-1/2 left-1/2 mt-[-2rem] w-[24rem] max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 border border-neutral-950 bg-white p-6 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-all data-starting-style:scale-90 data-starting-style:opacity-0 data-ending-style:scale-90 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             initialFocus={createInputRef}
           >
-            <Dialog.Title className="-mt-1.5 mb-1 text-lg tracking-[-0.0025em] font-bold">
-              Create new label
-            </Dialog.Title>
-            <Dialog.Description className="mb-4 text-base text-neutral-600">
+            <Dialog.Title className="text-sm leading-5 font-bold">Create new label</Dialog.Title>
+            <Dialog.Description className="mb-4 text-sm leading-5 text-neutral-600 dark:text-neutral-400">
               Add a new label to select.
             </Dialog.Description>
             <form onSubmit={handleCreateSubmit}>
               <input
                 ref={createInputRef}
-                className="w-full h-10 rounded-md border border-neutral-200 bg-[canvas] text-neutral-900 px-2.5 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 font-normal"
+                className="h-8 w-full border border-neutral-950 bg-transparent px-2 text-sm leading-5 font-normal text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:text-white"
                 placeholder="Label name"
                 defaultValue={pendingQueryRef.current}
               />
-              <div className="mt-4 flex justify-end gap-4">
-                <Dialog.Close className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base text-neutral-900 select-none hover:bg-neutral-100 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100 font-normal">
+              <div className="mt-4 flex justify-end gap-3">
+                <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700">
                   Cancel
                 </Dialog.Close>
                 <button
                   type="submit"
-                  className="flex h-10 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100"
+                  className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700"
                 >
                   Create
                 </button>
@@ -240,27 +241,25 @@ export default function ExampleCreatableCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="butt"
-      strokeLinejoin="miter"
-      aria-hidden
-      {...props}
-    >
-      <path d="M6 1v10M1 6h10" />
+    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
@@ -268,19 +267,16 @@ function PlusIcon(props: React.ComponentProps<'svg'>) {
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width={16}
-      height={16}
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden
+      strokeWidth="1"
       {...props}
     >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
+      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
+      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
index c4c2366cdf9..e688a46d06c 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
@@ -1,4 +1,5 @@
 .InputGroup {
+  box-sizing: border-box;
   position: relative;
   width: 16rem;
   height: 2rem;
@@ -12,13 +13,13 @@
 }
 
 .InputGroup:has(.Clear) .Input {
-  padding-right: calc(0.5rem + 1.5rem * 2);
+  padding-right: calc(0.5rem + 2rem * 2);
 }
 
 .Input {
   box-sizing: border-box;
   padding-left: 0.5rem;
-  padding-right: calc(0.5rem + 1.5rem);
+  padding-right: calc(0.5rem + 2rem);
   margin: 0;
   border: none;
   width: 100%;
@@ -47,15 +48,14 @@
 }
 
 .ActionButtons {
-  --size: 1.5rem;
   box-sizing: border-box;
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   bottom: 0;
-  height: 2rem;
-  right: 0.5rem;
+  height: 100%;
+  right: 0;
   border: none;
   color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   padding: 0;
@@ -67,20 +67,24 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--size);
-  height: 2rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  width: 1.5rem;
+  height: 100%;
+  color: light-dark(var(--color-neutral-950), white);
   border: none;
   padding: 0;
   background: none;
 }
 
-.ClearIcon,
-.TriggerIcon {
+.ClearIcon {
   width: 1rem;
   height: 1rem;
 }
 
+.TriggerIcon {
+  width: 0.625rem;
+  height: 0.625rem;
+}
+
 .Positioner {
   outline: 0;
 }
@@ -129,7 +133,7 @@
 
 .GroupLabel {
   box-sizing: border-box;
-  padding: 0.5rem 1rem 0.25rem 0.5rem;
+  padding: 0.5rem 0.5rem 0.25rem 1.75rem;
   font-size: 0.75rem;
   font-weight: 700;
   line-height: 1rem;
@@ -147,7 +151,7 @@
   outline: 0;
   cursor: default;
   user-select: none;
-  padding: 0.5rem 2rem 0.5rem 0.5rem;
+  padding: 0.5rem;
   display: grid;
   grid-template-columns: 0.75rem 1fr;
   gap: 0.5rem;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
index b38493325c6..9ee513e525e 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleGroupedCombobox() {
           <Combobox.Input placeholder="e.g. Mango" className={styles.Input} id={id} />
           <div className={styles.ActionButtons}>
             <Combobox.Clear className={styles.Clear} aria-label="Clear selection">
-              <ClearIcon className={styles.ClearIcon} />
+              <XIcon className={styles.ClearIcon} />
             </Combobox.Clear>
             <Combobox.Trigger className={styles.Trigger} aria-label="Open popup">
               <ChevronDownIcon className={styles.TriggerIcon} />
@@ -55,42 +55,42 @@ export default function ExampleGroupedCombobox() {
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
-    </svg>
-  );
-}
-
-function ClearIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M18 6L6 18" />
-      <path d="M6 6l12 12" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M6 9l6 6 6-6" />
+      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
+      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
+
+function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index 7f3eeea305f..7b0fbc35ef9 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -6,26 +6,26 @@ export default function ExampleGroupedCombobox() {
   const id = React.useId();
   return (
     <Combobox.Root items={groupedProduce}>
-      <div className="relative flex flex-col gap-1 text-sm font-bold text-neutral-900">
+      <div className="relative flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         <label htmlFor={id}>Select produce</label>
-        <Combobox.InputGroup className="relative box-content h-10 w-[16rem] rounded-md border border-neutral-200 bg-[canvas] focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 [&>input]:pr-[calc(0.5rem+1.5rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+1.5rem*2)]">
+        <Combobox.InputGroup className="relative h-8 w-64 border border-neutral-950 bg-transparent focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 dark:border-white [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
           <Combobox.Input
             placeholder="e.g. Mango"
             id={id}
-            className="h-full w-full border-0 bg-transparent pl-3.5 text-base font-normal text-neutral-900 outline-none"
+            className="h-full w-full border-0 bg-transparent pl-2 text-sm font-normal text-neutral-950 outline-none dark:text-white"
           />
-          <div className="absolute right-2 bottom-0 flex h-10 items-center justify-center text-neutral-600">
+          <div className="absolute right-0 bottom-0 flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
             <Combobox.Clear
-              className="combobox-clear flex h-10 w-6 items-center justify-center rounded bg-transparent p-0"
+              className="combobox-clear flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white"
               aria-label="Clear selection"
             >
-              <ClearIcon className="size-4" />
+              <XIcon className="size-4" />
             </Combobox.Clear>
             <Combobox.Trigger
-              className="flex h-10 w-6 items-center justify-center rounded bg-transparent p-0"
+              className="flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white"
               aria-label="Open popup"
             >
-              <ChevronDownIcon className="size-4" />
+              <ChevronDownIcon className="size-2.5" />
             </Combobox.Trigger>
           </div>
         </Combobox.InputGroup>
@@ -33,23 +33,23 @@ export default function ExampleGroupedCombobox() {
 
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
-          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-hidden rounded-md bg-[canvas] pt-0 text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:shadow-none dark:outline-neutral-300 duration-100">
+          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Combobox.Empty>
-              <div className="p-4 text-[0.925rem] leading-4 text-neutral-600">
+              <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No produce found.
               </div>
             </Combobox.Empty>
-            <Combobox.List className="outline-0 overflow-y-auto scroll-pt-[2.25rem] scroll-pb-[0.5rem] overscroll-contain max-h-[min(23rem,var(--available-height))]">
+            <Combobox.List className="max-h-[min(23rem,var(--available-height))] overflow-auto overscroll-contain scroll-pt-[2.25rem] scroll-pb-2 outline-0">
               {(group: ProduceGroup) => (
                 <Combobox.Group key={group.value} items={group.items} className="block pb-2">
-                  <Combobox.GroupLabel className="sticky top-0 z-[1] mb-0 mr-2 mt-0 ml-0 w-[calc(100%-0.5rem)] bg-[canvas] pr-4 pl-[2.25rem] pt-3 pb-1 text-[0.7rem] font-bold uppercase tracking-wider">
+                  <Combobox.GroupLabel className="sticky top-0 z-[1] bg-white py-2 pr-2 pb-1 pl-7 text-xs leading-4 font-bold tracking-wider text-neutral-500 uppercase dark:bg-neutral-950 dark:text-neutral-400">
                     {group.value}
                   </Combobox.GroupLabel>
                   <Combobox.Collection>
                     {(item: Produce) => (
                       <Combobox.Item
                         key={item.id}
-                        className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900"
+                        className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                         value={item}
                       >
                         <Combobox.ItemIndicator className="col-start-1 flex items-center justify-center">
@@ -70,42 +70,42 @@ export default function ExampleGroupedCombobox() {
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
-    </svg>
-  );
-}
-
-function ClearIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M18 6L6 18" />
-      <path d="M6 6l12 12" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M6 9l6 6 6-6" />
+      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
+      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
+
+function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
index f3551baa443..100f893ee5f 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
@@ -1,6 +1,7 @@
 .InputGroup {
+  box-sizing: border-box;
   position: relative;
-  width: 16rem;
+  width: 14rem;
   height: 2rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: transparent;
@@ -11,14 +12,14 @@
   }
 
   &:has(.Clear) .Input {
-    padding-right: calc(0.5rem + 1.5rem * 2);
+    padding-right: calc(0.5rem + 2rem * 2);
   }
 }
 
 .Input {
   box-sizing: border-box;
   padding-left: 0.5rem;
-  padding-right: calc(0.5rem + 1.5rem);
+  padding-right: calc(0.5rem + 2rem);
   margin: 0;
   border: none;
   width: 100%;
@@ -52,8 +53,8 @@
   align-items: center;
   justify-content: center;
   bottom: 0;
-  height: 2rem;
-  right: 0.5rem;
+  height: 100%;
+  right: 0;
   border: none;
   color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   padding: 0;
@@ -66,19 +67,23 @@
   align-items: center;
   justify-content: center;
   width: 1.5rem;
-  height: 2rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  height: 100%;
+  color: light-dark(var(--color-neutral-950), white);
   border: none;
   padding: 0;
   background: none;
 }
 
-.ClearIcon,
-.TriggerIcon {
+.ClearIcon {
   width: 1rem;
   height: 1rem;
 }
 
+.TriggerIcon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
 .Positioner {
   outline: 0;
 }
@@ -131,7 +136,7 @@
   user-select: none;
   padding-block: 0.5rem;
   padding-left: 0.5rem;
-  padding-right: 2rem;
+  padding-right: 0.5rem;
   display: grid;
   gap: 0.5rem;
   align-items: center;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
index b6c5f29e9a1..c22a4c91756 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleCombobox() {
           <Combobox.Input placeholder="e.g. Apple" id={id} className={styles.Input} />
           <div className={styles.ActionButtons}>
             <Combobox.Clear className={styles.Clear} aria-label="Clear selection">
-              <ClearIcon className={styles.ClearIcon} />
+              <XIcon className={styles.ClearIcon} />
             </Combobox.Clear>
             <Combobox.Trigger className={styles.Trigger} aria-label="Open popup">
               <ChevronDownIcon className={styles.TriggerIcon} />
@@ -46,42 +46,42 @@ export default function ExampleCombobox() {
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
-    </svg>
-  );
-}
-
-function ClearIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M18 6L6 18" />
-      <path d="M6 6l12 12" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M6 9l6 6 6-6" />
+      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
+      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
+
+function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
index bdcc7bc1900..0e0ae5b1e94 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
@@ -6,26 +6,26 @@ export default function ExampleCombobox() {
   const id = React.useId();
   return (
     <Combobox.Root items={fruits}>
-      <div className="relative flex flex-col gap-1 text-sm font-bold text-neutral-900">
+      <div className="relative flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         <label htmlFor={id}>Choose a fruit</label>
-        <Combobox.InputGroup className="relative box-content h-10 w-64 rounded-md border border-neutral-200 bg-[canvas] focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 [&>input]:pr-[calc(0.5rem+1.5rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+1.5rem*2)]">
+        <Combobox.InputGroup className="relative h-8 w-56 border border-neutral-950 bg-transparent focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 dark:border-white [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
           <Combobox.Input
             placeholder="e.g. Apple"
             id={id}
-            className="h-full w-full border-0 bg-transparent pl-3.5 text-base font-normal text-neutral-900 outline-none"
+            className="h-full w-full border-0 bg-transparent pl-2 text-sm font-normal text-neutral-950 outline-none dark:text-white"
           />
-          <div className="absolute right-2 bottom-0 flex h-10 items-center justify-center text-neutral-600">
+          <div className="absolute right-0 bottom-0 flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
             <Combobox.Clear
-              className="combobox-clear flex h-10 w-6 items-center justify-center rounded bg-transparent p-0"
+              className="combobox-clear flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white"
               aria-label="Clear selection"
             >
-              <ClearIcon className="size-4" />
+              <XIcon className="size-4" />
             </Combobox.Clear>
             <Combobox.Trigger
-              className="flex h-10 w-6 items-center justify-center rounded bg-transparent p-0"
+              className="flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white"
               aria-label="Open popup"
             >
-              <ChevronDownIcon className="size-4" />
+              <ChevronDownIcon className="size-3" />
             </Combobox.Trigger>
           </div>
         </Combobox.InputGroup>
@@ -33,16 +33,18 @@ export default function ExampleCombobox() {
 
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
-          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] rounded-md bg-[canvas] text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300 duration-100">
+          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Combobox.Empty>
-              <div className="p-4 text-[0.925rem] leading-4 text-neutral-600">No fruits found.</div>
+              <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
+                No fruits found.
+              </div>
             </Combobox.Empty>
-            <Combobox.List className="outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-[empty]:p-0">
+            <Combobox.List className="max-h-[min(23rem,var(--available-height))] overflow-y-auto overscroll-contain py-2 scroll-py-2 outline-0 data-empty:p-0">
               {(item: Fruit) => (
                 <Combobox.Item
                   key={item.value}
                   value={item}
-                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900"
+                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                 >
                   <Combobox.ItemIndicator className="col-start-1">
                     <CheckIcon className="size-3" />
@@ -59,42 +61,42 @@ export default function ExampleCombobox() {
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
-    </svg>
-  );
-}
-
-function ClearIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M18 6L6 18" />
-      <path d="M6 6l12 12" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M6 9l6 6 6-6" />
+      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
+      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
+
+function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
index 3137af3ab88..66120e07b84 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
@@ -11,21 +11,21 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  height: 2.5rem;
-  padding-left: 0.875rem;
-  padding-right: 0.75rem;
+  height: 2rem;
+  padding-left: 0.75rem;
+  padding-right: 0.5rem;
   margin: 0;
   outline: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
   font-family: inherit;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
   color: light-dark(var(--color-neutral-950), white);
   cursor: default;
   background-color: light-dark(white, var(--color-neutral-950));
   user-select: none;
-  min-width: 12rem;
+  min-width: 10rem;
 
   @media (hover: hover) {
     &:hover {
@@ -33,6 +33,10 @@
     }
   }
 
+  &:active {
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  }
+
   &[data-popup-open] {
     background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
@@ -48,7 +52,7 @@
 }
 
 .Placeholder {
-  opacity: 0.6;
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .InputContainer {
@@ -142,7 +146,7 @@
   min-width: var(--anchor-width);
   padding-block: 0.5rem;
   padding-left: 0.5rem;
-  padding-right: 2rem;
+  padding-right: 0.5rem;
   display: grid;
   gap: 0.5rem;
   align-items: center;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
index 5e7711fcf07..4c96e5e5c82 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
@@ -46,24 +46,32 @@ export default function ExamplePopoverCombobox() {
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
+      width="12"
       height="12"
-      viewBox="0 0 8 12"
+      viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.5"
+      strokeWidth="2"
       {...props}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="m7 15 5 5 5-5" />
+      <path d="m7 9 5-5 5 5" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index a6024ab39c6..7a2aaad0b6c 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -4,13 +4,17 @@ import { Combobox } from '@base-ui/react/combobox';
 
 export default function ExamplePopoverCombobox() {
   return (
-    <div className="flex flex-col gap-1">
+    <div className="flex flex-col items-start gap-1">
       <Combobox.Root items={countries}>
-        <Combobox.Label className="cursor-default text-sm font-bold text-neutral-900">
+        <Combobox.Label className="cursor-default text-sm leading-5 font-bold text-neutral-950 dark:text-white">
           Country
         </Combobox.Label>
-        <Combobox.Trigger className="flex bg-[canvas] h-10 min-w-[12rem] items-center justify-between gap-3 rounded-md border border-neutral-200 pr-3 pl-3.5 text-base text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-neutral-100 cursor-default font-normal">
-          <Combobox.Value placeholder={<span className="opacity-60">Select country</span>} />
+        <Combobox.Trigger className="flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white pr-2 pl-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800">
+          <Combobox.Value
+            placeholder={
+              <span className="text-neutral-600 dark:text-neutral-400">Select country</span>
+            }
+          />
           <Combobox.Icon className="flex">
             <ChevronUpDownIcon />
           </Combobox.Icon>
@@ -18,26 +22,26 @@ export default function ExamplePopoverCombobox() {
         <Combobox.Portal>
           <Combobox.Positioner align="start" sideOffset={4}>
             <Combobox.Popup
-              className="[--input-container-height:3rem] origin-[var(--transform-origin)] max-w-[var(--available-width)] max-h-[24rem] rounded-lg bg-[canvas] shadow-lg shadow-neutral-200 text-neutral-900 outline-1 outline-neutral-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-neutral-300"
+              className="[--input-container-height:2rem] max-h-[24rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[transform,opacity] duration-150 data-starting-style:scale-90 data-starting-style:opacity-0 data-ending-style:scale-90 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
               aria-label="Select country"
             >
-              <div className="w-80 h-[var(--input-container-height)] text-center p-2">
+              <div className="h-[var(--input-container-height)] w-80 bg-white text-center dark:bg-neutral-950">
                 <Combobox.Input
                   placeholder="e.g. United Kingdom"
-                  className="h-10 w-full font-normal rounded-md border border-neutral-200 pl-3.5 text-base font-normal text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+                  className="h-8 w-full min-w-72 border-0 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 dark:text-white"
                 />
               </div>
               <Combobox.Empty>
-                <div className="p-4 text-[0.925rem] leading-4 text-neutral-600">
+                <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                   No countries found.
                 </div>
               </Combobox.Empty>
-              <Combobox.List className="overflow-y-auto scroll-py-2 py-2 overscroll-contain max-h-[min(calc(24rem-var(--input-container-height)),calc(var(--available-height)-var(--input-container-height)))] empty:p-0">
+              <Combobox.List className="max-h-[min(calc(24rem-var(--input-container-height)-2px),calc(var(--available-height)-var(--input-container-height)-2px))] overflow-auto overscroll-contain py-2 scroll-py-2 empty:p-0">
                 {(country: Country) => (
                   <Combobox.Item
                     key={country.code}
                     value={country}
-                    className="grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900"
+                    className="grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                   >
                     <Combobox.ItemIndicator className="col-start-1">
                       <CheckIcon className="size-3" />
@@ -57,24 +61,32 @@ export default function ExamplePopoverCombobox() {
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
+      width="12"
       height="12"
-      viewBox="0 0 8 12"
+      viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.5"
+      strokeWidth="2"
       {...props}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="m7 15 5 5 5-5" />
+      <path d="m7 9 5-5 5 5" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
index 6baffd844c1..597aebdfd9f 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
@@ -23,35 +23,43 @@
   gap: 0.125rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: transparent;
-  padding: 0.25rem 0.375rem;
+  min-height: 2rem;
+  padding: 0.25rem 0.5rem;
   width: 16rem;
   cursor: text;
 
+  @media (min-width: 32rem) {
+    width: 22rem;
+  }
+
+  &:has(.Chip) {
+    padding-inline: 0.25rem;
+  }
+
   &:focus-within {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
   }
-
-  @media (min-width: 500px) {
-    width: 22rem;
-  }
 }
 
 .Chips {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.125rem;
+  gap: 0.25rem;
   width: 100%;
 }
 
 .Chip {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
+  min-height: calc(1.5rem - 2px);
   background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   color: light-dark(var(--color-neutral-950), white);
   font-size: 0.875rem;
-  padding: 0.2rem 0.2rem 0.2rem 0.4rem;
+  line-height: 1;
+  padding: 0 0.2rem 0 0.4rem;
   overflow: hidden;
   gap: 0.25rem;
   outline: 0;
@@ -84,9 +92,12 @@
 }
 
 .ChipRemove {
+  box-sizing: border-box;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
   border: none;
   background: none;
-  padding: 0.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -94,20 +105,34 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    }
+  }
+}
+
+.Chip:focus-within .ChipRemove {
+  @media (hover: hover) {
+    &:hover {
+      background-color: light-dark(var(--color-neutral-700), var(--color-neutral-200));
     }
   }
 }
 
+.ChipRemoveIcon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
 .Input {
   flex: 1;
   box-sizing: border-box;
-  padding-left: 0.5rem;
+  padding: 0;
   margin: 0;
   border: none;
-  height: 2rem;
+  height: calc(1.5rem - 2px);
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1;
   font-weight: 400;
   background-color: transparent;
   color: light-dark(var(--color-neutral-950), white);
@@ -138,6 +163,8 @@
     opacity 0.1s,
     transform 0.1s;
   transform-origin: var(--transform-origin);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   &[data-starting-style],
   &[data-ending-style] {
@@ -145,9 +172,6 @@
     transform: scale(0.95);
   }
 
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
-
   @media (prefers-color-scheme: dark) {
     box-shadow: none;
   }
@@ -160,7 +184,7 @@
   user-select: none;
   padding-block: 0.5rem;
   padding-left: 0.5rem;
-  padding-right: 2rem;
+  padding-right: 0.5rem;
   display: grid;
   gap: 0.5rem;
   align-items: center;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
index 91cf2c7b6d5..bf4c40460c5 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
@@ -28,7 +28,7 @@ export default function ExampleMultipleCombobox() {
                         className={styles.ChipRemove}
                         aria-label={`Remove ${language.value}`}
                       >
-                        <XIcon />
+                        <XIcon className={styles.ChipRemoveIcon} />
                       </Combobox.ChipRemove>
                     </Combobox.Chip>
                   ))}
@@ -69,8 +69,16 @@ export default function ExampleMultipleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
@@ -78,19 +86,16 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width={16}
-      height={16}
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden
+      strokeWidth="1"
       {...props}
     >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
+      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
+      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
index b469659f169..5ff0a4df3eb 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
@@ -8,33 +8,36 @@ export default function ExampleMultipleCombobox() {
   return (
     <Combobox.Root items={langs} multiple>
       <div className="max-w-[28rem] flex flex-col gap-1">
-        <label className="text-sm font-bold text-neutral-900" htmlFor={id}>
+        <label
+          className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white"
+          htmlFor={id}
+        >
           Programming languages
         </label>
-        <Combobox.InputGroup className="w-64 cursor-text rounded-md border border-neutral-200 bg-[canvas] px-1.5 py-1 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-blue-800 min-[500px]:w-[22rem]">
-          <Combobox.Chips className="flex w-full flex-wrap items-center gap-0.5">
+        <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-transparent px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
+          <Combobox.Chips className="flex w-full flex-wrap items-center gap-1">
             <Combobox.Value>
               {(value: ProgrammingLanguage[]) => (
                 <React.Fragment>
                   {value.map((language) => (
                     <Combobox.Chip
                       key={language.id}
-                      className="flex items-center gap-1 rounded-md bg-neutral-100 px-1.5 py-[0.2rem] text-sm text-neutral-900 outline-none cursor-default [@media(hover:hover)]:[&[data-highlighted]]:bg-blue-800 [@media(hover:hover)]:[&[data-highlighted]]:text-neutral-50 focus-within:bg-blue-800 focus-within:text-neutral-50"
+                      className="group flex min-h-[calc(1.5rem-2px)] cursor-default items-center gap-1 overflow-hidden bg-neutral-100 py-0 pr-[0.2rem] pl-[0.4rem] text-sm leading-none text-neutral-950 outline-none focus-within:bg-neutral-950 focus-within:text-white [@media(hover:hover)]:data-highlighted:bg-neutral-950 [@media(hover:hover)]:data-highlighted:text-white dark:bg-neutral-800 dark:text-white dark:focus-within:bg-white dark:focus-within:text-neutral-950 dark:[@media(hover:hover)]:data-highlighted:bg-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950"
                       aria-label={language.value}
                     >
                       {language.value}
                       <Combobox.ChipRemove
-                        className="rounded-md p-1 text-inherit hover:bg-neutral-200"
+                        className="flex size-4 items-center justify-center border-0 bg-transparent p-0 text-inherit hover:bg-neutral-200 group-focus-within:hover:bg-neutral-700 dark:hover:bg-neutral-700 dark:group-focus-within:hover:bg-neutral-200"
                         aria-label={`Remove ${language.value}`}
                       >
-                        <XIcon />
+                        <XIcon className="size-3" />
                       </Combobox.ChipRemove>
                     </Combobox.Chip>
                   ))}
                   <Combobox.Input
                     id={id}
                     placeholder={value.length > 0 ? '' : 'e.g. TypeScript'}
-                    className="min-w-12 flex-1 h-8 rounded-md border-0 bg-transparent pl-2 text-base font-normal text-neutral-900 outline-none"
+                    className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-transparent p-0 text-sm leading-none font-normal text-neutral-950 outline-none dark:text-white"
                   />
                 </React.Fragment>
               )}
@@ -45,9 +48,9 @@ export default function ExampleMultipleCombobox() {
 
       <Combobox.Portal>
         <Combobox.Positioner className="z-50 outline-none" sideOffset={4}>
-          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-[canvas] py-2 text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300">
+          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-2 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Combobox.Empty>
-              <div className="px-4 py-2 text-[0.925rem] leading-4 text-neutral-600">
+              <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No languages found.
               </div>
             </Combobox.Empty>
@@ -55,7 +58,7 @@ export default function ExampleMultipleCombobox() {
               {(language: ProgrammingLanguage) => (
                 <Combobox.Item
                   key={language.id}
-                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none [@media(hover:hover)]:[&[data-highlighted]]:relative [@media(hover:hover)]:[&[data-highlighted]]:z-0 [@media(hover:hover)]:[&[data-highlighted]]:text-neutral-50 [@media(hover:hover)]:[&[data-highlighted]]:before:absolute [@media(hover:hover)]:[&[data-highlighted]]:before:inset-x-2 [@media(hover:hover)]:[&[data-highlighted]]:before:inset-y-0 [@media(hover:hover)]:[&[data-highlighted]]:before:z-[-1] [@media(hover:hover)]:[&[data-highlighted]]:before:rounded-sm [@media(hover:hover)]:[&[data-highlighted]]:before:bg-neutral-900"
+                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-selected:relative data-selected:z-0 data-selected:text-neutral-950 data-selected:before:absolute data-selected:before:inset-0 data-selected:before:z-[-1] [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-white [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-950 dark:data-selected:text-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950 dark:[@media(hover:hover)]:data-highlighted:before:bg-white"
                   value={language}
                 >
                   <Combobox.ItemIndicator className="col-start-1">
@@ -74,8 +77,16 @@ export default function ExampleMultipleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
@@ -83,19 +94,16 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width={16}
-      height={16}
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden
+      strokeWidth="1"
       {...props}
     >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
+      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
+      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
index e290db7162e..97bf9c8c699 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
@@ -75,7 +75,7 @@
   user-select: none;
   padding-block: 0.5rem;
   padding-left: 0.5rem;
-  padding-right: 2rem;
+  padding-right: 0.5rem;
   display: grid;
   gap: 0.5rem;
   align-items: center;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
index efa8044a9a0..87c10dec7ca 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
@@ -140,8 +140,16 @@ function VirtualizedList({
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
index 1fdcda42167..e93e93a067a 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
@@ -32,16 +32,16 @@ export default function ExampleVirtualizedCombobox() {
         }
       }}
     >
-      <label className="flex flex-col gap-1 text-sm font-bold text-neutral-900">
+      <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         Search 10,000 items
-        <Combobox.Input className="h-10 w-64 rounded-md font-normal border border-neutral-200 pl-3.5 text-base text-neutral-900 bg-[canvas] focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800" />
+        <Combobox.Input className="h-8 w-64 border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white" />
       </label>
 
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
-          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(22rem,var(--available-height))] max-w-[var(--available-width)] rounded-md bg-[canvas] text-neutral-900 outline-1 outline-neutral-200 shadow-lg shadow-neutral-200 dark:-outline-offset-1 dark:outline-neutral-300">
+          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(22rem,var(--available-height))] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Combobox.Empty>
-              <div className="px-4 py-4 text-[0.925rem] leading-4 text-neutral-600">
+              <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No items found.
               </div>
             </Combobox.Empty>
@@ -100,7 +100,7 @@ function VirtualizedList({
     <div
       role="presentation"
       ref={handleScrollElementRef}
-      className="h-[min(22rem,var(--total-size))] max-h-[var(--available-height)] overflow-auto overscroll-contain scroll-p-2"
+      className="h-[min(22rem,var(--total-size))] max-h-[var(--available-height)] overflow-auto overscroll-contain scroll-py-2"
       style={{ '--total-size': `${totalSize}px` } as React.CSSProperties}
     >
       <div role="presentation" className="relative w-full" style={{ height: totalSize }}>
@@ -117,7 +117,7 @@ function VirtualizedList({
               data-index={virtualItem.index}
               ref={virtualizer.measureElement}
               value={item}
-              className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900"
+              className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
               aria-setsize={filteredItems.length}
               aria-posinset={virtualItem.index + 1}
               style={{
@@ -143,8 +143,16 @@ function VirtualizedList({
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.tsx
index 7b9c9825b99..b3b9e30ebd9 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.tsx
@@ -50,7 +50,12 @@ export default function ExampleContextMenu() {
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        d="M3.5 9L7.5 5L3.5 1"
+        stroke="currentColor"
+        strokeWidth="1"
+        vectorEffect="non-scaling-stroke"
+      />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
index 25e9db40212..13f39183c04 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
@@ -53,7 +53,12 @@ export default function ExampleContextMenu() {
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        d="M3.5 9L7.5 5L3.5 1"
+        stroke="currentColor"
+        strokeWidth="1"
+        vectorEffect="non-scaling-stroke"
+      />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
index ccae7767776..752835d7d8b 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
@@ -177,15 +177,18 @@
   padding: 0;
   border: none;
   background-color: transparent;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: light-dark(var(--color-neutral-950), white);
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
-      color: light-dark(var(--color-neutral-950), white);
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
+  &:active {
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
@@ -193,8 +196,8 @@
 }
 
 .CloseIcon {
-  width: 1rem;
-  height: 1rem;
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .Body {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx
index fdbc00b0ed9..8f210ce23ab 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx
@@ -70,13 +70,11 @@ function XIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
+      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
+      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index ec9e95841a5..773ca86ab6b 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -28,9 +28,9 @@ export default function OutsideScrollDialog() {
                     <Dialog.Title className="m-0 text-base font-bold">Dialog</Dialog.Title>
                     <Dialog.Close
                       aria-label="Close"
-                      className="relative top-[-0.25rem] right-[-0.25rem] inline-flex items-center justify-center w-8 h-8 bg-transparent text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-800 hover:text-neutral-950 dark:hover:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+                      className="relative top-[-0.25rem] right-[-0.25rem] inline-flex items-center justify-center w-8 h-8 bg-transparent text-neutral-950 dark:text-white hover:bg-neutral-200 dark:hover:bg-neutral-950 hover:text-neutral-950 dark:hover:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
                     >
-                      <XIcon className="h-4 w-4" />
+                      <XIcon className="h-5 w-5" />
                     </Dialog.Close>
                   </div>
 
@@ -86,13 +86,11 @@ function XIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
+      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
+      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
index 683c3ab0099..68c57ea8170 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
@@ -136,20 +136,15 @@
   }
 
   @media (hover: hover) {
-    &:hover:not([data-disabled]) {
+    &:hover {
       background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
-  &:active:not([data-disabled]) {
+  &:active {
     background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
-  &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-  }
-
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
@@ -157,6 +152,6 @@
 }
 
 .CloseIcon {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1.25rem;
+  height: 1.25rem;
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx
index ea60a8a5f3d..355ed7bc059 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx
@@ -28,13 +28,11 @@ function XIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
+      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
+      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
index 32eb1ec18f5..fdbe14f11b7 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
@@ -32,13 +32,11 @@ function XIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
+      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
+      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
index fb3f4c2a32b..f561da48ee6 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
@@ -56,8 +56,8 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
@@ -70,12 +70,10 @@ function CheckboxCheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M20 6 9 17l-5-5" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index db14d2797fb..04ff001ff64 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -58,8 +58,8 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
@@ -72,12 +72,10 @@ function CheckboxCheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M20 6 9 17l-5-5" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx
index c9e17c76dfc..aea13861ce9 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx
@@ -40,14 +40,12 @@ function DotsIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth={1.5}
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth={1}
       {...props}
     >
-      <circle cx="5" cy="12" r="1" />
-      <circle cx="12" cy="12" r="1" />
-      <circle cx="19" cy="12" r="1" />
+      <circle cx="5" cy="12" r="1" fill="currentColor" vectorEffect="non-scaling-stroke" />
+      <circle cx="12" cy="12" r="1" fill="currentColor" vectorEffect="non-scaling-stroke" />
+      <circle cx="19" cy="12" r="1" fill="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
index eef1975fa10..3bef2f1845d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
@@ -37,8 +37,7 @@ export default function MenuDetachedTriggersSimpleDemo() {
     </React.Fragment>
   );
 }
-
-export function DotsIcon(props: React.ComponentProps<'svg'>) {
+function DotsIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
       width="20"
@@ -46,14 +45,12 @@ export function DotsIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth={1.5}
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth={1}
       {...props}
     >
-      <circle cx="5" cy="12" r="1" />
-      <circle cx="12" cy="12" r="1" />
-      <circle cx="19" cy="12" r="1" />
+      <circle cx="5" cy="12" r="1" fill="currentColor" vectorEffect="non-scaling-stroke" />
+      <circle cx="12" cy="12" r="1" fill="currentColor" vectorEffect="non-scaling-stroke" />
+      <circle cx="19" cy="12" r="1" fill="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
index 6c02585d873..92490456252 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
@@ -87,8 +87,8 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
@@ -102,8 +102,6 @@ function CheckboxCheckIcon(props: React.ComponentProps<'svg'>) {
       fill="none"
       stroke="currentColor"
       strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
     >
       <path d="M20 6 9 17l-5-5" />
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index b9f9ad1278f..b9c93cc2da3 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -93,8 +93,8 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
@@ -108,8 +108,6 @@ function CheckboxCheckIcon(props: React.ComponentProps<'svg'>) {
       fill="none"
       stroke="currentColor"
       strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
     >
       <path d="M20 6 9 17l-5-5" />
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx
index 6739af6f921..96d69317e8e 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx
@@ -29,8 +29,8 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
index be4cb77690c..a224d098542 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
@@ -31,8 +31,8 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx
index be2da65a396..56b3d8c3cb8 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx
@@ -26,8 +26,8 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
index 8636caed834..26cdac3bf9d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
@@ -31,8 +31,8 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
index c2ad1f58fea..d368343aa31 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
@@ -43,8 +43,8 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
@@ -57,12 +57,10 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M20 6 9 17l-5-5" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index 9920c94a962..7e9776b39e0 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -45,8 +45,8 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
@@ -59,12 +59,10 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M20 6 9 17l-5-5" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx
index c91fb00ef1a..85386883d21 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx
@@ -56,8 +56,8 @@ function getOffset({ side }: { side: Menu.Positioner.Props['side'] }) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
@@ -65,7 +65,7 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" strokeWidth="1.5" />
+      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" strokeWidth="1" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
index 4c3f6f3d0a9..0312c942e8f 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
@@ -65,8 +65,8 @@ function getOffset({ side }: { side: Menu.Positioner.Props['side'] }) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
@@ -74,7 +74,7 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" strokeWidth="1.5" />
+      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" strokeWidth="1" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
index 8f5d6eb7320..f1ab0228538 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
@@ -138,13 +138,7 @@ function handleClick(event: React.MouseEvent<HTMLElement>) {
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
-      <path
-        d="M6 12L10 8L6 4"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
+      <path d="M6 12L10 8L6 4" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
index 7b5acf5bc95..d98db2ccdfe 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
@@ -185,13 +185,7 @@ function handleClick(event: React.MouseEvent<HTMLElement>) {
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
-      <path
-        d="M6 12L10 8L6 4"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
+      <path d="M6 12L10 8L6 4" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx
index ef208dd2cc4..e4a0fdc3524 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx
@@ -88,8 +88,8 @@ function Link(props: NavigationMenu.Link.Props) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
index 99b68038ba5..b326a53eea3 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
@@ -97,8 +97,8 @@ function Link(props: NavigationMenu.Link.Props) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx
index 9d140cc67d2..ba0fcbb262f 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx
@@ -131,8 +131,8 @@ function Link(props: NavigationMenu.Link.Props) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
index 5778e161f65..ca793ef97a5 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
@@ -147,8 +147,8 @@ function Link(props: NavigationMenu.Link.Props) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx
index e2a7bc34550..a8e6f135378 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx
@@ -101,8 +101,8 @@ function Link(props: NavigationMenu.Link.Props) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
@@ -110,7 +110,7 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M3.5 1L7.5 5L3.5 9" stroke="currentColor" strokeWidth="1.5" />
+      <path d="M3.5 1L7.5 5L3.5 9" stroke="currentColor" strokeWidth="1" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
index 3408bebf808..ed102b6d25b 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
@@ -115,8 +115,8 @@ function Link(props: NavigationMenu.Link.Props) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" />
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
@@ -124,7 +124,7 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M3.5 1L7.5 5L3.5 9" stroke="currentColor" strokeWidth="1.5" />
+      <path d="M3.5 1L7.5 5L3.5 9" stroke="currentColor" strokeWidth="1" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
index f3a5bfe836b..c0f75f1854f 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
@@ -96,8 +96,18 @@
 
 .Decrement {
   border-right: 1px solid light-dark(var(--color-neutral-950), white);
+
+  svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
 }
 
 .Increment {
   border-left: 1px solid light-dark(var(--color-neutral-950), white);
+
+  svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx
index e5ffb04eb7a..b124e5d61d8 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx
@@ -38,33 +38,17 @@ function CursorGrowIcon(props: React.ComponentProps<'svg'>) {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="10"
-      height="10"
-      viewBox="0 0 10 10"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
-      <path d="M5 0.5V9.5" />
-      <path d="M0.5 5H9.5" />
+    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
 function MinusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="10"
-      height="10"
-      viewBox="0 0 10 10"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
-      <path d="M0.5 5H9.5" />
+    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
index bbf16365b27..276ad616b0c 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
@@ -22,11 +22,11 @@ export default function ExampleNumberField() {
 
       <NumberField.Group className="flex h-8">
         <NumberField.Decrement className={stepperClasses}>
-          <MinusIcon />
+          <MinusIcon className="size-3" />
         </NumberField.Decrement>
         <NumberField.Input className="h-full w-[7ch] border-y border-neutral-950 rounded-none bg-transparent px-3 text-left text-sm font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white" />
         <NumberField.Increment className={stepperClasses}>
-          <PlusIcon />
+          <PlusIcon className="size-3" />
         </NumberField.Increment>
       </NumberField.Group>
     </NumberField.Root>
@@ -43,33 +43,17 @@ function CursorGrowIcon(props: React.ComponentProps<'svg'>) {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="10"
-      height="10"
-      viewBox="0 0 10 10"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
-      <path d="M5 0.5V9.5" />
-      <path d="M0.5 5H9.5" />
+    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
 function MinusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="10"
-      height="10"
-      viewBox="0 0 10 10"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
-      <path d="M0.5 5H9.5" />
+    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx
index 26091ae5918..1ee5752a54a 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx
@@ -104,8 +104,6 @@ function UserIcon(props: React.ComponentProps<'svg'>) {
       fill="none"
       stroke="currentColor"
       strokeWidth={1.5}
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
     >
       <path d="M18 20a6 6 0 0 0-12 0" />
@@ -124,8 +122,6 @@ function ListIcon(props: React.ComponentProps<'svg'>) {
       fill="none"
       stroke="currentColor"
       strokeWidth={1.5}
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
     >
       <path d="M3 5h.01" />
diff --git a/docs/src/app/(docs)/react/components/popover/demos/icons-tw.tsx b/docs/src/app/(docs)/react/components/popover/demos/icons-tw.tsx
index 66c9d3efe2c..2a121c58065 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/icons-tw.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/icons-tw.tsx
@@ -17,8 +17,6 @@ export function UserIcon(props: React.ComponentProps<'svg'>) {
       fill="none"
       stroke="currentColor"
       strokeWidth={1.5}
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
     >
       <path d="M18 20a6 6 0 0 0-12 0" />
@@ -37,8 +35,6 @@ export function ListIcon(props: React.ComponentProps<'svg'>) {
       fill="none"
       stroke="currentColor"
       strokeWidth={1.5}
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
     >
       <path d="M3 5h.01" />
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
index e393d5dc7af..e5d0bfb6bb1 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
@@ -62,8 +62,6 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
       fill="none"
       stroke="currentColor"
       strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
     >
       <path d="m7 15 5 5 5-5" />
@@ -80,12 +78,10 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M20 6 9 17l-5-5" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index b655280f7f7..dee97f8d8b2 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -74,8 +74,6 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
       fill="none"
       stroke="currentColor"
       strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
     >
       <path d="m7 15 5 5 5-5" />
@@ -92,12 +90,10 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M20 6 9 17l-5-5" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
index 83422a72c30..005a71bcb0b 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
@@ -53,8 +53,6 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
       fill="none"
       stroke="currentColor"
       strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
     >
       <path d="m7 15 5 5 5-5" />
@@ -71,12 +69,10 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M20 6 9 17l-5-5" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index d61e9b2beca..186a2da3941 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -65,8 +65,6 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
       fill="none"
       stroke="currentColor"
       strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
     >
       <path d="m7 15 5 5 5-5" />
@@ -83,12 +81,10 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M20 6 9 17l-5-5" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
index d24bf376406..e7d924c9c19 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
@@ -73,8 +73,6 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
       fill="none"
       stroke="currentColor"
       strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
     >
       <path d="m7 15 5 5 5-5" />
@@ -91,12 +89,10 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M20 6 9 17l-5-5" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index 228e8fd625a..a428e757723 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -80,8 +80,6 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
       fill="none"
       stroke="currentColor"
       strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
     >
       <path d="m7 15 5 5 5-5" />
@@ -98,12 +96,10 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M20 6 9 17l-5-5" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
index 5165f50e0d0..a2e49a15967 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
@@ -60,8 +60,6 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
       fill="none"
       stroke="currentColor"
       strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
     >
       <path d="m7 15 5 5 5-5" />
@@ -78,12 +76,10 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M20 6 9 17l-5-5" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index 9043a3c9d71..0d5f897d9b7 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -69,8 +69,6 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
       fill="none"
       stroke="currentColor"
       strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
     >
       <path d="m7 15 5 5 5-5" />
@@ -87,12 +85,10 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M20 6 9 17l-5-5" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
index caa8362a67e..8fd976be7e3 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
@@ -134,8 +134,6 @@ function ClipboardIcon(props: React.ComponentProps<'svg'>) {
       fill="none"
       stroke="currentColor"
       strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
     >
       <rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
@@ -152,12 +150,10 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M20 6 9 17l-5-5" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index ab7f26f780e..f31f7b0c380 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -150,8 +150,6 @@ function ClipboardIcon(props: React.ComponentProps<'svg'>) {
       fill="none"
       stroke="currentColor"
       strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
     >
       <rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
@@ -168,12 +166,10 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M20 6 9 17l-5-5" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.tsx
index 48db716de4b..c704701c6f2 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.tsx
@@ -21,14 +21,7 @@ export default function ExampleToggleGroup() {
 
 function AlignLeftIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      stroke="currentColor"
-      strokeLinecap="round"
-      {...props}
-    >
+    <svg width="16" height="16" viewBox="0 0 16 16" stroke="currentColor" {...props}>
       <path d="M2.5 3.5H13.5" />
       <path d="M2.5 9.5H13.5" />
       <path d="M2.5 6.5H10.5" />
@@ -39,14 +32,7 @@ function AlignLeftIcon(props: React.ComponentProps<'svg'>) {
 
 function AlignCenterIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      stroke="currentColor"
-      strokeLinecap="round"
-      {...props}
-    >
+    <svg width="16" height="16" viewBox="0 0 16 16" stroke="currentColor" {...props}>
       <path d="M3 3.5H14" />
       <path d="M3 9.5H14" />
       <path d="M4.5 6.5H12.5" />
@@ -57,14 +43,7 @@ function AlignCenterIcon(props: React.ComponentProps<'svg'>) {
 
 function AlignRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      stroke="currentColor"
-      strokeLinecap="round"
-      {...props}
-    >
+    <svg width="16" height="16" viewBox="0 0 16 16" stroke="currentColor" {...props}>
       <path d="M2.5 3.5H13.5" />
       <path d="M2.5 9.5H13.5" />
       <path d="M5.5 6.5H13.5" />
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
index 5358e51847f..d4a9423e2a6 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
@@ -35,14 +35,7 @@ export default function ExampleToggleGroup() {
 
 function AlignLeftIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      stroke="currentColor"
-      strokeLinecap="round"
-      {...props}
-    >
+    <svg width="16" height="16" viewBox="0 0 16 16" stroke="currentColor" {...props}>
       <path d="M2.5 3.5H13.5" />
       <path d="M2.5 9.5H13.5" />
       <path d="M2.5 6.5H10.5" />
@@ -53,14 +46,7 @@ function AlignLeftIcon(props: React.ComponentProps<'svg'>) {
 
 function AlignCenterIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      stroke="currentColor"
-      strokeLinecap="round"
-      {...props}
-    >
+    <svg width="16" height="16" viewBox="0 0 16 16" stroke="currentColor" {...props}>
       <path d="M3 3.5H14" />
       <path d="M3 9.5H14" />
       <path d="M4.5 6.5H12.5" />
@@ -71,14 +57,7 @@ function AlignCenterIcon(props: React.ComponentProps<'svg'>) {
 
 function AlignRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      stroke="currentColor"
-      strokeLinecap="round"
-      {...props}
-    >
+    <svg width="16" height="16" viewBox="0 0 16 16" stroke="currentColor" {...props}>
       <path d="M2.5 3.5H13.5" />
       <path d="M2.5 9.5H13.5" />
       <path d="M5.5 6.5H13.5" />
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
index 7013b07deda..dcc6551269f 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
@@ -79,8 +79,6 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
       fill="none"
       stroke="currentColor"
       strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
     >
       <path d="m7 15 5 5 5-5" />
@@ -97,12 +95,10 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M20 6 9 17l-5-5" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
index fae1fc289d9..a43e0fd4a06 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
@@ -96,8 +96,6 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
       fill="none"
       stroke="currentColor"
       strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
       {...props}
     >
       <path d="m7 15 5 5 5-5" />
@@ -114,12 +112,10 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeWidth="1"
       {...props}
     >
-      <path d="M20 6 9 17l-5-5" />
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx
index fa8b7b2947c..d7864f44172 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx
@@ -70,8 +70,7 @@ function InfoIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
+      strokeWidth={1}
       strokeLinejoin="round"
       {...props}
     >
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx
index bac78dcd154..d173bd08326 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx
@@ -61,8 +61,7 @@ function InfoIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
+      strokeWidth={1}
       strokeLinejoin="round"
       {...props}
     >
@@ -81,14 +80,13 @@ function HelpIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
+      strokeWidth={1}
       strokeLinejoin="round"
       {...props}
     >
-      <circle cx="12" cy="12" r="10" />
-      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
-      <path d="M12 17h.01" />
+      <circle cx="12" cy="12" r="10" vectorEffect="non-scaling-stroke" />
+      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" vectorEffect="non-scaling-stroke" />
+      <path d="M12 17h.01" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
@@ -101,8 +99,7 @@ function AlertIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
+      strokeWidth={1}
       strokeLinejoin="round"
       {...props}
     >
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx
index bb614d97a46..98ccf3b0789 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx
@@ -34,8 +34,7 @@ function InfoIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
+      strokeWidth={1}
       strokeLinejoin="round"
       {...props}
     >
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx
index c45e50a4749..bf8bb9f43e9 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx
@@ -8,8 +8,7 @@ export function InfoIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
+      strokeWidth={1}
       strokeLinejoin="round"
       {...props}
     >
@@ -28,14 +27,14 @@ export function HelpIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
+      strokeWidth={1}
+      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
     >
-      <circle cx="12" cy="12" r="10" />
-      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
-      <path d="M12 17h.01" />
+      <circle cx="12" cy="12" r="10" vectorEffect="non-scaling-stroke" />
+      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" vectorEffect="non-scaling-stroke" />
+      <path d="M12 17h.01" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
@@ -48,8 +47,7 @@ export function AlertIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
+      strokeWidth={1}
       strokeLinejoin="round"
       {...props}
     >

From fba9d166b03cc3721f8be963d81a7f7c53e942b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 5 May 2026 13:34:28 +0200
Subject: [PATCH 112/257] Combobox: prevent group label obscuring scrollbar on
 iOS

---
 .../combobox/demos/grouped/css-modules/index.module.css    | 7 ++++---
 .../components/combobox/demos/grouped/tailwind/index.tsx   | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
index e688a46d06c..f48da857fff 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
@@ -133,7 +133,11 @@
 
 .GroupLabel {
   box-sizing: border-box;
+  position: sticky;
+  z-index: 1;
+  top: 0;
   padding: 0.5rem 0.5rem 0.25rem 1.75rem;
+  margin: 0 0.5rem 0 0; /* Prevent overlap with iOS overlay scrollbars. */
   font-size: 0.75rem;
   font-weight: 700;
   line-height: 1rem;
@@ -141,9 +145,6 @@
   text-transform: uppercase;
   letter-spacing: 0.05em;
   background-color: light-dark(white, var(--color-neutral-950));
-  position: sticky;
-  z-index: 1;
-  top: 0;
 }
 
 .Item {
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index 7b0fbc35ef9..aa68efdabc5 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -42,7 +42,7 @@ export default function ExampleGroupedCombobox() {
             <Combobox.List className="max-h-[min(23rem,var(--available-height))] overflow-auto overscroll-contain scroll-pt-[2.25rem] scroll-pb-2 outline-0">
               {(group: ProduceGroup) => (
                 <Combobox.Group key={group.value} items={group.items} className="block pb-2">
-                  <Combobox.GroupLabel className="sticky top-0 z-[1] bg-white py-2 pr-2 pb-1 pl-7 text-xs leading-4 font-bold tracking-wider text-neutral-500 uppercase dark:bg-neutral-950 dark:text-neutral-400">
+                  <Combobox.GroupLabel className="sticky top-0 z-[1] mr-2 bg-white py-2 pr-2 pb-1 pl-7 text-xs leading-4 font-bold tracking-wider text-neutral-500 uppercase dark:bg-neutral-950 dark:text-neutral-400">
                     {group.value}
                   </Combobox.GroupLabel>
                   <Combobox.Collection>

From d4c031259e60ed111fd362e0068bb4006edfbd83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 5 May 2026 13:58:54 +0200
Subject: [PATCH 113/257] Sticky group labels: avoid obscuring scrollbar on iOS

---
 .../autocomplete/demos/grid/css-modules/index.module.css | 7 ++++---
 .../autocomplete/demos/grid/tailwind/index.tsx           | 8 ++++++--
 .../demos/grouped/css-modules/index.module.css           | 9 +++++----
 .../autocomplete/demos/grouped/tailwind/index.tsx        | 2 +-
 .../select/demos/grouped/css-modules/index.module.css    | 9 +++++----
 .../components/select/demos/grouped/tailwind/index.tsx   | 2 +-
 6 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
index eaeafdfcc3a..b506befae40 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
@@ -181,7 +181,11 @@
 
 .GroupLabel {
   box-sizing: border-box;
+  position: sticky;
+  z-index: 1;
+  top: 0;
   padding: 0.5rem;
+  margin: 0 0.5rem 0 0; /* Prevent overlap with iOS overlay scrollbars. */
   font-size: 0.75rem;
   font-weight: 700;
   line-height: 1rem;
@@ -189,9 +193,6 @@
   text-transform: uppercase;
   letter-spacing: 0.05em;
   background-color: light-dark(white, var(--color-neutral-950));
-  position: sticky;
-  z-index: 1;
-  top: 0;
 }
 
 .Group {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
index b1cd2677427..88b6397ce5a 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
@@ -79,8 +79,12 @@ export default function ExampleEmojiPicker() {
                 </Autocomplete.Empty>
                 <Autocomplete.List className="max-h-[min(calc(20.5rem-var(--input-container-height)-2px),calc(var(--available-height)-var(--input-container-height)-2px))] overflow-auto scroll-pt-10 scroll-pb-[0.35rem] overscroll-contain empty:p-0">
                   {(group: EmojiGroup) => (
-                    <Autocomplete.Group key={group.value} items={group.items} className="block pb-2">
-                      <Autocomplete.GroupLabel className="sticky top-0 z-[1] bg-white p-2 text-xs font-bold text-neutral-500 uppercase tracking-wider dark:bg-neutral-950 dark:text-neutral-400">
+                    <Autocomplete.Group
+                      key={group.value}
+                      items={group.items}
+                      className="block pb-2"
+                    >
+                      <Autocomplete.GroupLabel className="sticky top-0 z-[1] bg-white p-2 mr-2 text-xs font-bold text-neutral-500 uppercase tracking-wider dark:bg-neutral-950 dark:text-neutral-400">
                         {group.label}
                       </Autocomplete.GroupLabel>
                       <div className="px-2 pb-1 pt-0" role="presentation">
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
index 1085c6bb4ef..0ac735960db 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
@@ -70,7 +70,11 @@
 
 .GroupLabel {
   box-sizing: border-box;
-  padding: 0.5rem 1rem 0.25rem 0.5rem;
+  position: sticky;
+  z-index: 1;
+  top: 0;
+  padding: 0.5rem 0.5rem 0.25rem;
+  margin: 0 0.5rem 0 0; /* Prevent overlap with iOS overlay scrollbars. */
   font-size: 0.75rem;
   font-weight: 700;
   line-height: 1rem;
@@ -78,9 +82,6 @@
   text-transform: uppercase;
   letter-spacing: 0.05em;
   background-color: light-dark(white, var(--color-neutral-950));
-  position: sticky;
-  z-index: 1;
-  top: 0;
 }
 
 .Item {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
index 765b6455e51..0680c999341 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
@@ -23,7 +23,7 @@ export default function ExampleGroupAutocomplete() {
             <Autocomplete.List className="outline-0 overflow-y-auto scroll-pt-[2.25rem] scroll-pb-[0.5rem] overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-empty:p-0">
               {(group: TagGroup) => (
                 <Autocomplete.Group key={group.value} items={group.items} className="block pb-2">
-                  <Autocomplete.GroupLabel className="sticky top-0 z-[1] bg-white pr-4 pb-1 pl-2 pt-2 text-xs font-bold text-neutral-500 uppercase tracking-wider dark:bg-neutral-950 dark:text-neutral-400">
+                  <Autocomplete.GroupLabel className="sticky top-0 z-[1] bg-white pt-2 px-2 pb-1 text-xs font-bold text-neutral-500 uppercase tracking-wider dark:bg-neutral-950 dark:text-neutral-400">
                     {group.value}
                   </Autocomplete.GroupLabel>
                   <Autocomplete.Collection>
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index 78457524962..23e7cb77830 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -122,7 +122,11 @@
 
 .GroupLabel {
   box-sizing: border-box;
-  padding: 0.5rem 1rem 0.25rem calc(0.625rem + 0.75rem + 0.5rem);
+  position: sticky;
+  z-index: 1;
+  top: 0;
+  padding: 0.5rem 0.5rem 0.25rem calc(0.625rem + 0.75rem + 0.5rem);
+  margin: 0 0.5rem 0 0; /* Prevent overlap with iOS overlay scrollbars. */
   font-size: 0.75rem;
   font-weight: 700;
   line-height: 1rem;
@@ -130,9 +134,6 @@
   letter-spacing: 0.05em;
   color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   background-color: light-dark(white, var(--color-neutral-950));
-  position: sticky;
-  z-index: 1;
-  top: 0;
 }
 
 .Item {
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index dee97f8d8b2..95618a3c552 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -32,7 +32,7 @@ export default function ExampleSelectGrouped() {
                 {groupedProduce.map((group, index) => (
                   <React.Fragment key={group.value}>
                     <Select.Group className="block pb-0.5">
-                      <Select.GroupLabel className="sticky top-0 z-[1] bg-white pr-4 pb-1 pl-[1.875rem] pt-2 text-xs font-bold text-neutral-500 uppercase tracking-wider dark:bg-neutral-950 dark:text-neutral-400">
+                      <Select.GroupLabel className="sticky top-0 z-[1] bg-white mr-2 pr-2 pb-1 pl-[1.875rem] pt-2 text-xs font-bold text-neutral-500 uppercase tracking-wider dark:bg-neutral-950 dark:text-neutral-400">
                         {group.value}
                       </Select.GroupLabel>
                       {group.items.map((item) => (

From e5bdd681b2dae79e35c72050401da29704692b5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 5 May 2026 14:01:31 +0200
Subject: [PATCH 114/257] Autocomplete: adjust button size

---
 .../demos/command-palette/css-modules/index.module.css | 10 +++++-----
 .../demos/command-palette/tailwind/index.tsx           |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
index d7f144185a7..200a80e72ec 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
@@ -3,16 +3,16 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
+  line-height: 1.25rem;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
   cursor: default;
@@ -24,7 +24,7 @@
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
index d43e5f36e7f..65371fba135 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleAutocompleteCommandPalette() {
 
   return (
     <Dialog.Root open={open} onOpenChange={setOpen}>
-      <Dialog.Trigger className="flex h-10 cursor-default items-center justify-center border border-neutral-950 bg-white px-3.5 text-base font-normal text-neutral-950 select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-800">
+      <Dialog.Trigger className="flex h-8 cursor-default items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700">
         Open command palette
       </Dialog.Trigger>
       <Dialog.Portal>

From b1aec88f508c2577775004778db43c700b67de6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 5 May 2026 14:22:58 +0200
Subject: [PATCH 115/257] Autocomplete: tweaks

---
 .../command-palette/css-modules/index.module.css | 16 +++++++---------
 .../demos/command-palette/tailwind/index.tsx     | 16 ++++++++--------
 .../demos/grid/css-modules/index.module.css      |  2 +-
 .../autocomplete/demos/grid/tailwind/index.tsx   |  2 +-
 4 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
index 200a80e72ec..d65293a213c 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
@@ -73,7 +73,6 @@
   max-height: min(36rem, calc(100dvh - 5rem));
   display: flex;
   flex-direction: column;
-  overflow: hidden;
 
   &[data-starting-style],
   &[data-ending-style] {
@@ -111,8 +110,8 @@
   }
 
   &:focus {
-    border-bottom-color: var(--color-neutral-100);
-    outline: none;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -1px;
   }
 }
 
@@ -163,8 +162,7 @@
   align-items: center;
   min-height: 2rem;
   padding: 0 0.5rem;
-  font-size: 0.9375rem;
-  letter-spacing: 0.00625em;
+  font-size: 0.875rem;
   line-height: 1;
   font-weight: 400;
   color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
@@ -253,7 +251,7 @@
   padding: 0.625rem 0.75rem;
   border-top: 1px solid light-dark(var(--color-neutral-950), white);
   font-size: 0.75rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
   background-color: light-dark(white, var(--color-neutral-950));
 }
 
@@ -276,9 +274,9 @@
     ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
   font-weight: 400;
   line-height: 1;
-  color: light-dark(var(--color-neutral-700), var(--color-neutral-300));
-  background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  background-color: light-dark(var(--color-neutral-100), var(--color-neutral-900));
+  border: 1px solid light-dark(var(--color-neutral-400), var(--color-neutral-600));
 }
 
 .VisuallyHiddenClose {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
index 65371fba135..8277aaef8cd 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
@@ -20,7 +20,7 @@ export default function ExampleAutocompleteCommandPalette() {
         <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 ease-[cubic-bezier(0.45,1.005,0,1.005)] data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="fixed inset-0 flex items-start justify-center overflow-hidden px-2 pt-18 pb-2">
           <Dialog.Popup
-            className="relative flex max-h-[min(36rem,calc(100dvh-5rem))] w-[calc(100vw-1rem)] max-w-[28rem] flex-col overflow-hidden border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[opacity,transform,scale,translate] duration-150 data-ending-style:-translate-y-4 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:-translate-y-4 data-starting-style:scale-95 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+            className="relative flex max-h-[min(36rem,calc(100dvh-5rem))] w-[calc(100vw-1rem)] max-w-[28rem] flex-col border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[opacity,transform,scale,translate] duration-150 data-ending-style:-translate-y-4 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:-translate-y-4 data-starting-style:scale-95 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-label="Command palette"
           >
             <Autocomplete.Root
@@ -31,7 +31,7 @@ export default function ExampleAutocompleteCommandPalette() {
               keepHighlight
             >
               <Autocomplete.Input
-                className="h-8 w-full border-0 border-b border-neutral-950 bg-transparent px-2 text-sm font-normal tracking-[0.016em] text-neutral-950 outline-none placeholder:text-neutral-500 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+                className="h-8 w-full border-0 border-b border-neutral-950 bg-transparent px-2 text-sm font-normal tracking-[0.016em] text-neutral-950 outline-none placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
                 placeholder="Search for apps and commands…"
               />
               <Dialog.Close className="sr-only">Close command palette</Dialog.Close>
@@ -52,7 +52,7 @@ export default function ExampleAutocompleteCommandPalette() {
                           items={group.items}
                           className="not-last:mb-1"
                         >
-                          <Autocomplete.GroupLabel className="m-0 flex h-8 items-center px-2 text-[0.9375rem] tracking-[0.00625em] font-normal leading-none text-neutral-500 dark:text-neutral-400 select-none outline-none">
+                          <Autocomplete.GroupLabel className="m-0 flex min-h-8 cursor-default items-center px-2 text-sm leading-none font-normal text-neutral-500 select-none outline-none dark:text-neutral-400">
                             {group.value}
                           </Autocomplete.GroupLabel>
                           <Autocomplete.Collection>
@@ -63,7 +63,7 @@ export default function ExampleAutocompleteCommandPalette() {
                                 onClick={handleItemClick}
                                 className="grid min-h-8 cursor-default grid-cols-[minmax(0,1fr)_auto] items-center gap-2 pl-2 pr-3 text-sm font-normal leading-[1.25] tracking-[0.016em] outline-none select-none [scroll-margin-block:0.25rem] data-highlighted:bg-neutral-100 dark:data-highlighted:bg-neutral-800"
                               >
-                                <span className="truncate font-normal">{item.label}</span>
+                                <span className="min-w-0 truncate font-normal">{item.label}</span>
                                 <span className="shrink-0 whitespace-nowrap text-[0.875rem] tracking-[0.00625em] text-neutral-500 data-highlighted:text-neutral-700 dark:text-neutral-400 dark:data-highlighted:text-neutral-300">
                                   {group.value === 'Suggestions' ? 'Application' : 'Command'}
                                 </span>
@@ -80,19 +80,19 @@ export default function ExampleAutocompleteCommandPalette() {
                 </ScrollArea.Scrollbar>
               </ScrollArea.Root>
 
-              <div className="flex items-center justify-between border-t border-neutral-950 bg-white px-3 py-2.5 text-xs text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-neutral-400">
+              <div className="flex items-center justify-between border-t border-neutral-950 bg-white px-3 py-2.5 text-xs text-neutral-600 dark:border-white dark:bg-neutral-950 dark:text-neutral-400">
                 <div className="flex items-center gap-2">
                   <span>Activate</span>
-                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center border border-neutral-950 bg-neutral-100 px-1 text-[0.625rem] font-normal text-neutral-700 dark:border-white dark:bg-neutral-800 dark:text-neutral-300">
+                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center border border-neutral-400 bg-neutral-100 px-1 font-mono text-[0.625rem] leading-none font-normal text-neutral-600 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-400">
                     Enter
                   </kbd>
                 </div>
                 <div className="flex items-center gap-2">
                   <span>Actions</span>
-                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center border border-neutral-950 bg-neutral-100 px-1 text-[0.625rem] font-normal text-neutral-700 dark:border-white dark:bg-neutral-800 dark:text-neutral-300">
+                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center border border-neutral-400 bg-neutral-100 px-1 font-mono text-[0.625rem] leading-none font-normal text-neutral-600 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-400">
                     Cmd
                   </kbd>
-                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center border border-neutral-950 bg-neutral-100 px-1 text-[0.625rem] font-normal text-neutral-700 dark:border-white dark:bg-neutral-800 dark:text-neutral-300">
+                  <kbd className="inline-flex h-5 min-w-5 items-center justify-center border border-neutral-400 bg-neutral-100 px-1 font-mono text-[0.625rem] leading-none font-normal text-neutral-600 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-400">
                     K
                   </kbd>
                 </div>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
index b506befae40..3de15bf3cf9 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
@@ -21,6 +21,7 @@
   font-weight: 400;
   color: light-dark(var(--color-neutral-950), white);
   outline: none;
+  background-color: transparent;
 
   &:focus {
     position: relative;
@@ -115,7 +116,6 @@
   box-sizing: border-box;
   padding-inline: 0.5rem;
   margin: 0;
-  /* border: 1px solid light-dark(var(--color-neutral-950), white); */
   width: 100%;
   height: 2rem;
   font-family: inherit;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
index 88b6397ce5a..53718b85ae6 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
@@ -35,7 +35,7 @@ export default function ExampleEmojiPicker() {
         <input
           ref={textInputRef}
           type="text"
-          className="-mr-px h-8 border border-r-0 border-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:relative focus:outline-2 focus:-outline-offset-2 focus:outline-solid focus:outline-blue-800 dark:border-white dark:text-white"
+          className="-mr-px h-8 border border-r-0 border-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none bg-transparent focus:relative focus:outline-2 focus:-outline-offset-2 focus:outline-solid focus:outline-blue-800 dark:border-white dark:text-white"
           placeholder="iMessage"
           value={textValue}
           onChange={(event) => setTextValue(event.target.value)}

From 7ccfe2e9e27607b20414c559d0611fc37905ceeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 5 May 2026 14:44:23 +0200
Subject: [PATCH 116/257] Autocomplete: command palette scrollbar tweaks

---
 .../css-modules/index.module.css              | 45 +++++++++++--------
 .../demos/command-palette/tailwind/index.tsx  | 20 ++++-----
 2 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
index d65293a213c..af5222bb1bc 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
@@ -95,17 +95,17 @@
   border: none;
   border-bottom: 1px solid light-dark(var(--color-neutral-950), white);
   width: 100%;
-  height: 2rem;
+  height: 2.5rem;
   border-radius: 0;
   font-family: inherit;
   font-size: 0.875rem;
+  font-weight: 400;
   background-color: transparent;
   color: light-dark(var(--color-neutral-950), white);
   letter-spacing: 0.016em;
   outline: none;
 
   &::placeholder {
-    font-weight: 400;
     color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
@@ -139,7 +139,7 @@
 
 .List {
   box-sizing: border-box;
-  padding: 0.5rem;
+  padding: 0.5rem 0;
 
   &:empty {
     padding: 0;
@@ -161,7 +161,7 @@
   display: flex;
   align-items: center;
   min-height: 2rem;
-  padding: 0 0.5rem;
+  padding: 0 1.5rem 0 1rem;
   font-size: 0.875rem;
   line-height: 1;
   font-weight: 400;
@@ -175,7 +175,7 @@
   user-select: none;
   scroll-margin-block: 0.25rem;
   min-height: 2rem;
-  padding: 0 0.75rem 0 0.5rem;
+  padding: 0 1.5rem;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 0.5rem;
@@ -224,26 +224,35 @@
 .Scrollbar {
   display: flex;
   justify-content: center;
-  width: 1.5rem;
-  margin-right: -0.25rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
+  background-color: light-dark(rgb(0 0 0 / 12%), rgb(255 255 255 / 12%));
+  width: 1rem;
+  opacity: 0;
+  transition: opacity 150ms;
+  pointer-events: none;
+
+  &[data-scrolling] {
+    transition-duration: 0ms;
+  }
 
-.ScrollbarThumb {
-  display: flex;
-  justify-content: center;
-  width: 100%;
+  &[data-hovering],
+  &[data-scrolling] {
+    opacity: 1;
+    pointer-events: auto;
+  }
 
   &::before {
     content: '';
-    display: block;
+    position: absolute;
+    width: 1.25rem;
     height: 100%;
-    width: 0.25rem;
-    background-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 }
 
+.ScrollbarThumb {
+  width: 100%;
+  background-color: light-dark(var(--color-neutral-950), white);
+}
+
 .Footer {
   display: flex;
   align-items: center;
@@ -259,7 +268,7 @@
 .FooterRight {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.25rem;
 }
 
 .Kbd {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
index 8277aaef8cd..72dbb6a6708 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
@@ -20,7 +20,7 @@ export default function ExampleAutocompleteCommandPalette() {
         <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 ease-[cubic-bezier(0.45,1.005,0,1.005)] data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="fixed inset-0 flex items-start justify-center overflow-hidden px-2 pt-18 pb-2">
           <Dialog.Popup
-            className="relative flex max-h-[min(36rem,calc(100dvh-5rem))] w-[calc(100vw-1rem)] max-w-[28rem] flex-col border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[opacity,transform,scale,translate] duration-150 data-ending-style:-translate-y-4 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:-translate-y-4 data-starting-style:scale-95 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+            className="relative flex max-h-[min(36rem,calc(100dvh-5rem))] w-[calc(100vw-1rem)] max-w-[28rem] flex-col border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-150 data-ending-style:-translate-y-4 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:-translate-y-4 data-starting-style:scale-95 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-label="Command palette"
           >
             <Autocomplete.Root
@@ -31,7 +31,7 @@ export default function ExampleAutocompleteCommandPalette() {
               keepHighlight
             >
               <Autocomplete.Input
-                className="h-8 w-full border-0 border-b border-neutral-950 bg-transparent px-2 text-sm font-normal tracking-[0.016em] text-neutral-950 outline-none placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+                className="h-10 w-full border-0 border-b border-neutral-950 bg-transparent px-2 text-sm font-normal tracking-[0.016em] text-neutral-950 outline-none placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
                 placeholder="Search for apps and commands…"
               />
               <Dialog.Close className="sr-only">Close command palette</Dialog.Close>
@@ -45,14 +45,14 @@ export default function ExampleAutocompleteCommandPalette() {
                       </div>
                     </Autocomplete.Empty>
 
-                    <Autocomplete.List className="p-2">
+                    <Autocomplete.List className="py-2">
                       {(group: Group) => (
                         <Autocomplete.Group
                           key={group.value}
                           items={group.items}
                           className="not-last:mb-1"
                         >
-                          <Autocomplete.GroupLabel className="m-0 flex min-h-8 cursor-default items-center px-2 text-sm leading-none font-normal text-neutral-500 select-none outline-none dark:text-neutral-400">
+                          <Autocomplete.GroupLabel className="m-0 flex min-h-8 cursor-default items-center pr-6 pl-4 text-sm leading-none font-normal text-neutral-500 select-none outline-none dark:text-neutral-400">
                             {group.value}
                           </Autocomplete.GroupLabel>
                           <Autocomplete.Collection>
@@ -61,10 +61,10 @@ export default function ExampleAutocompleteCommandPalette() {
                                 key={item.value}
                                 value={item}
                                 onClick={handleItemClick}
-                                className="grid min-h-8 cursor-default grid-cols-[minmax(0,1fr)_auto] items-center gap-2 pl-2 pr-3 text-sm font-normal leading-[1.25] tracking-[0.016em] outline-none select-none [scroll-margin-block:0.25rem] data-highlighted:bg-neutral-100 dark:data-highlighted:bg-neutral-800"
+                                className="group grid min-h-8 cursor-default grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-6 text-sm font-normal leading-[1.25] tracking-[0.016em] outline-none select-none [scroll-margin-block:0.25rem] data-highlighted:bg-neutral-100 dark:data-highlighted:bg-neutral-800"
                               >
                                 <span className="min-w-0 truncate font-normal">{item.label}</span>
-                                <span className="shrink-0 whitespace-nowrap text-[0.875rem] tracking-[0.00625em] text-neutral-500 data-highlighted:text-neutral-700 dark:text-neutral-400 dark:data-highlighted:text-neutral-300">
+                                <span className="shrink-0 whitespace-nowrap text-[0.875rem] tracking-[0.00625em] text-neutral-500 group-data-highlighted:text-neutral-700 dark:text-neutral-400 dark:group-data-highlighted:text-neutral-300">
                                   {group.value === 'Suggestions' ? 'Application' : 'Command'}
                                 </span>
                               </Autocomplete.Item>
@@ -75,19 +75,19 @@ export default function ExampleAutocompleteCommandPalette() {
                     </Autocomplete.List>
                   </ScrollArea.Content>
                 </ScrollArea.Viewport>
-                <ScrollArea.Scrollbar className="-mr-1 flex w-6 justify-center py-2">
-                  <ScrollArea.Thumb className="flex w-full justify-center before:block before:h-full before:w-1 before:bg-neutral-500 dark:before:bg-neutral-400 before:content-['']" />
+                <ScrollArea.Scrollbar className="flex w-4 justify-center bg-black/12 opacity-0 transition-opacity pointer-events-none before:absolute before:h-full before:w-5 before:content-[''] data-hovering:opacity-100 data-hovering:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-scrolling:pointer-events-auto dark:bg-white/12">
+                  <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
                 </ScrollArea.Scrollbar>
               </ScrollArea.Root>
 
               <div className="flex items-center justify-between border-t border-neutral-950 bg-white px-3 py-2.5 text-xs text-neutral-600 dark:border-white dark:bg-neutral-950 dark:text-neutral-400">
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-1">
                   <span>Activate</span>
                   <kbd className="inline-flex h-5 min-w-5 items-center justify-center border border-neutral-400 bg-neutral-100 px-1 font-mono text-[0.625rem] leading-none font-normal text-neutral-600 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-400">
                     Enter
                   </kbd>
                 </div>
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-1">
                   <span>Actions</span>
                   <kbd className="inline-flex h-5 min-w-5 items-center justify-center border border-neutral-400 bg-neutral-100 px-1 font-mono text-[0.625rem] leading-none font-normal text-neutral-600 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-400">
                     Cmd

From 300dc8689eeaa5d736fdd3858730facc58583b59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 5 May 2026 14:55:16 +0200
Subject: [PATCH 117/257] data-[*] -> data-*

---
 .../tailwind/index.tsx                        |  4 +-
 .../tailwind/index.tsx                        |  4 +-
 .../demos/hero/tailwind/index.tsx             |  4 +-
 .../demos/hero/tailwind/index.tsx             |  4 +-
 .../demos/submenu/tailwind/index.tsx          |  6 +--
 .../close-confirmation/tailwind/index.tsx     |  6 +--
 .../tailwind/index.tsx                        |  4 +-
 .../tailwind/index.tsx                        |  4 +-
 .../dialog/demos/hero/tailwind/index.tsx      |  4 +-
 .../demos/inside-scroll/tailwind/index.tsx    |  6 +--
 .../dialog/demos/nested/tailwind/index.tsx    |  6 +--
 .../demos/outside-scroll/tailwind/index.tsx   | 10 ++--
 .../demos/uncontained/tailwind/index.tsx      |  6 +--
 .../demos/checkbox-items/tailwind/index.tsx   |  6 +--
 .../tailwind/index.tsx                        |  6 +--
 .../detached-triggers-full/tailwind/index.tsx | 18 ++++----
 .../tailwind/index.tsx                        |  6 +--
 .../demos/group-labels/tailwind/index.tsx     |  6 +--
 .../menu/demos/hero/tailwind/index.tsx        |  6 +--
 .../demos/open-on-hover/tailwind/index.tsx    |  6 +--
 .../menu/demos/radio-items/tailwind/index.tsx |  6 +--
 .../menu/demos/submenu/tailwind/index.tsx     |  8 ++--
 .../menubar/demos/hero/tailwind/index.tsx     | 46 +++++++++----------
 .../demos/hero/tailwind/index.tsx             | 22 ++++-----
 .../demos/nested-inline/tailwind/index.tsx    | 34 +++++++-------
 .../demos/nested/tailwind/index.tsx           | 26 +++++------
 .../tailwind/index.tsx                        |  8 ++--
 .../detached-triggers-full/tailwind/index.tsx | 10 ++--
 .../tailwind/index.tsx                        |  4 +-
 .../popover/demos/hero/tailwind/index.tsx     |  4 +-
 .../demos/open-on-hover/tailwind/index.tsx    |  4 +-
 .../tailwind/index.tsx                        |  8 ++--
 .../detached-triggers-full/tailwind/index.tsx |  8 ++--
 .../tailwind/index.tsx                        |  4 +-
 .../demos/hero/tailwind/index.tsx             |  4 +-
 .../scroll-area/demos/both/tailwind/index.tsx |  4 +-
 .../scroll-area/demos/hero/tailwind/index.tsx |  2 +-
 .../demos/scroll-fade/tailwind/index.tsx      |  2 +-
 .../toast/demos/anchored/tailwind/index.tsx   |  4 +-
 .../toast/demos/hero/tailwind/index.tsx       |  4 +-
 .../toast/demos/position/tailwind/index.tsx   |  4 +-
 .../toolbar/demos/hero/tailwind/index.tsx     | 16 +++----
 .../tailwind/index.tsx                        |  2 +-
 .../detached-triggers-full/tailwind/index.tsx | 10 ++--
 .../tailwind/index.tsx                        |  2 +-
 .../tooltip/demos/hero/tailwind/index.tsx     |  2 +-
 .../forms/demos/components/autocomplete.tsx   |  4 +-
 .../forms/demos/components/button.tsx         |  2 +-
 .../forms/demos/components/checkbox.tsx       |  4 +-
 .../forms/demos/components/combobox.tsx       |  6 +--
 .../handbook/forms/demos/components/radio.tsx |  4 +-
 .../forms/demos/components/select.tsx         |  6 +--
 .../forms/demos/components/switch.tsx         |  4 +-
 .../handbook/forms/demos/components/toast.tsx |  2 +-
 .../(docs)/react/handbook/styling/page.mdx    |  8 ++--
 55 files changed, 205 insertions(+), 205 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 2b11230000c..3e5a5bd5ea3 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -70,8 +70,8 @@ export default function AlertDialogDetachedTriggersControlledDemo() {
       >
         {({ payload }) => (
           <AlertDialog.Portal>
-            <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-            <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+            <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
+            <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
               <AlertDialog.Title className="text-sm font-bold">
                 {payload?.message ?? 'Are you sure?'}
               </AlertDialog.Title>
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
index aed850d00a9..b35c455f16e 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -18,8 +18,8 @@ export default function AlertDialogDetachedTriggersSimpleDemo() {
 
       <AlertDialog.Root handle={demoAlertDialog}>
         <AlertDialog.Portal>
-          <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-          <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+          <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
+          <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
             <AlertDialog.Title className="text-sm font-bold">Discard draft?</AlertDialog.Title>
             <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
               This action cannot be undone.
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
index 4512b940ebe..d4a01590c68 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
@@ -10,8 +10,8 @@ export default function ExampleAlertDialog() {
     <AlertDialog.Root>
       <AlertDialog.Trigger className={dangerButtonClasses}>Discard draft</AlertDialog.Trigger>
       <AlertDialog.Portal>
-        <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+        <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
+        <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
           <AlertDialog.Title className="text-sm font-bold">Discard draft?</AlertDialog.Title>
           <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
             You can’t undo this action.
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
index bf79c9fdeac..c56f59acaf9 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
@@ -1,7 +1,7 @@
 import { ContextMenu } from '@base-ui/react/context-menu';
 
 const itemClass =
-  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400";
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
 
 export default function ExampleMenu() {
   return (
@@ -11,7 +11,7 @@ export default function ExampleMenu() {
       </ContextMenu.Trigger>
       <ContextMenu.Portal>
         <ContextMenu.Positioner className="outline-hidden">
-          <ContextMenu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <ContextMenu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <ContextMenu.Item className={itemClass}>Add to Library</ContextMenu.Item>
             <ContextMenu.Item className={itemClass}>Add to Playlist</ContextMenu.Item>
             <ContextMenu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
index 13f39183c04..328f043e7a2 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
@@ -2,11 +2,11 @@ import * as React from 'react';
 import { ContextMenu } from '@base-ui/react/context-menu';
 
 const popupClass =
-  'origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
+  'origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
 const itemClass =
-  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 data-[disabled]:text-neutral-500 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-neutral-400";
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 data-disabled:text-neutral-500 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white dark:data-disabled:text-neutral-400";
 const submenuTriggerClass =
-  "flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 data-[disabled]:text-neutral-500 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-neutral-400";
+  "flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 data-disabled:text-neutral-500 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white dark:data-disabled:text-neutral-400";
 
 export default function ExampleContextMenu() {
   return (
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
index e6c62e54583..96e92b170de 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
@@ -28,8 +28,8 @@ export default function ExampleDialog() {
         Tweet
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-[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))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Popup className="fixed top-[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))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-nested-dialog-open:after:absolute data-nested-dialog-open:after:inset-0 data-nested-dialog-open:after:bg-black/5 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
           <Dialog.Title id={titleId} className="text-sm font-bold">
             New tweet
           </Dialog.Title>
@@ -67,7 +67,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))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:bg-black/5 data-[starting-style]:scale-[0.98] data-[starting-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))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-nested-dialog-open:after:absolute data-nested-dialog-open:after:inset-0 data-nested-dialog-open:after:bg-black/5 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
             <AlertDialog.Title className="text-sm font-bold">Discard tweet?</AlertDialog.Title>
             <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
               Your tweet will be lost.
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 8b99e93e022..ba6feb1d268 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -63,8 +63,8 @@ export default function DialogDetachedTriggersControlledDemo() {
       >
         {({ payload }) => (
           <Dialog.Portal>
-            <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-            <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+            <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
+            <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
               {payload !== undefined && (
                 <Dialog.Title className="text-sm font-bold">Dialog {payload}</Dialog.Title>
               )}
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
index f9f54fdc79e..277cd7d5b8f 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -16,8 +16,8 @@ export default function DialogDetachedTriggersSimpleDemo() {
 
       <Dialog.Root handle={demoDialog}>
         <Dialog.Portal>
-          <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-          <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+          <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
+          <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
             <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
             <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
               You are all caught up. Good job!
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
index 3199e5d0fdc..090b071a50b 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
@@ -7,8 +7,8 @@ export default function ExampleDialog() {
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
           <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
           <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
             You are all caught up. Good job!
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
index b1424d3f94c..2c457235c42 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
@@ -9,9 +9,9 @@ export default function InsideScrollDialog() {
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-starting-style:opacity-0 data-ending-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="fixed inset-0 flex items-center justify-center overflow-hidden py-6 [@media(min-height:600px)]:pb-12 [@media(min-height:600px)]:pt-8">
-          <Dialog.Popup className="relative flex w-[min(40rem,calc(100vw-2rem))] max-h-full max-w-full min-h-0 flex-col overflow-hidden bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0">
+          <Dialog.Popup className="relative flex w-[min(40rem,calc(100vw-2rem))] max-h-full max-w-full min-h-0 flex-col overflow-hidden bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-ending-style:scale-[0.98] data-ending-style:opacity-0">
             <div className="px-4 pt-4 pb-3">
               <Dialog.Title className="m-0 mb-1 text-base font-bold">Dialog</Dialog.Title>
               <Dialog.Description className="m-0 text-sm text-neutral-600 dark:text-neutral-400">
@@ -31,7 +31,7 @@ export default function InsideScrollDialog() {
                   ))}
                 </ScrollArea.Content>
               </ScrollArea.Viewport>
-              <ScrollArea.Scrollbar className="pointer-events-none flex w-3 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity duration-150 before:absolute before:h-full before:w-4 before:content-[''] data-[hovering]:pointer-events-auto data-[hovering]:opacity-100 data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0">
+              <ScrollArea.Scrollbar className="pointer-events-none flex w-3 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity duration-150 before:absolute before:h-full before:w-4 before:content-[''] data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0">
                 <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
               </ScrollArea.Scrollbar>
             </ScrollArea.Root>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
index d2982a7ce2f..ab01774c945 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
@@ -7,8 +7,8 @@ export default function ExampleDialog() {
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-[ending-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:opacity-100 data-[starting-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0">
+        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-ending-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
           <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
           <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
             You are all caught up. Good job!
@@ -19,7 +19,7 @@ export default function ExampleDialog() {
                 Customize
               </Dialog.Trigger>
               <Dialog.Portal>
-                <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-[ending-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0 data-[nested-dialog-open]:after:opacity-100 data-[starting-style]:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0">
+                <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-ending-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
                   <Dialog.Title className="text-sm font-bold">Customize notifications</Dialog.Title>
                   <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
                     Review your settings here.
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index 773ca86ab6b..f23dbefe160 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -11,18 +11,18 @@ export default function OutsideScrollDialog() {
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 bg-black/20 dark:bg-black/50 transition-opacity duration-[350ms] ease-[var(--ease-out-fast)] data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-[220ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Backdrop className="fixed inset-0 bg-black/20 dark:bg-black/50 transition-opacity duration-[350ms] ease-[var(--ease-out-fast)] data-starting-style:opacity-0 data-ending-style:opacity-0 data-ending-style:duration-[220ms] data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="group/dialog fixed inset-0">
           <ScrollArea.Root
             style={{ position: undefined }}
-            className="h-full overscroll-contain group-data-[ending-style]/dialog:pointer-events-none"
+            className="h-full overscroll-contain group-data-ending-style/dialog:pointer-events-none"
           >
-            <ScrollArea.Viewport className="h-full overscroll-contain group-data-[ending-style]/dialog:pointer-events-none">
+            <ScrollArea.Viewport className="h-full overscroll-contain group-data-ending-style/dialog:pointer-events-none">
               <ScrollArea.Content className="flex min-h-full items-center justify-center">
                 <Dialog.Popup
                   ref={popupRef}
                   initialFocus={popupRef}
-                  className="outline-0 relative mx-auto my-16 w-[min(40rem,calc(100vw-2rem))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate] duration-[350ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-[starting-style]:translate-y-[100dvh] data-[ending-style]:translate-y-[max(100dvh,100%)] data-[ending-style]:duration-[220ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] motion-reduce:transition-none"
+                  className="outline-0 relative mx-auto my-16 w-[min(40rem,calc(100vw-2rem))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate] duration-[350ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-starting-style:translate-y-[100dvh] data-ending-style:translate-y-[max(100dvh,100%)] data-ending-style:duration-[220ms] data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] motion-reduce:transition-none"
                 >
                   <div className="mb-1 flex items-start justify-between gap-3">
                     <Dialog.Title className="m-0 text-base font-bold">Dialog</Dialog.Title>
@@ -68,7 +68,7 @@ export default function OutsideScrollDialog() {
                 </Dialog.Popup>
               </ScrollArea.Content>
             </ScrollArea.Viewport>
-            <ScrollArea.Scrollbar className="pointer-events-none flex w-3 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity duration-[250ms] data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-[75ms] data-[scrolling]:delay-[0ms] hover:pointer-events-auto hover:opacity-100 hover:duration-[75ms] hover:delay-[0ms] group-data-[ending-style]/dialog:opacity-0 group-data-[ending-style]/dialog:duration-[250ms]">
+            <ScrollArea.Scrollbar className="pointer-events-none flex w-3 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity duration-[250ms] data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-[75ms] data-scrolling:delay-[0ms] hover:pointer-events-auto hover:opacity-100 hover:duration-[75ms] hover:delay-[0ms] group-data-ending-style/dialog:opacity-0 group-data-ending-style/dialog:duration-[250ms]">
               <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
             </ScrollArea.Scrollbar>
           </ScrollArea.Root>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
index fdbe14f11b7..2d26bcb06b8 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
@@ -7,16 +7,16 @@ export default function ExampleUncontainedDialog() {
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black/20 dark:bg-black/50 transition-opacity duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black/20 dark:bg-black/50 transition-opacity duration-150 data-starting-style:opacity-0 data-ending-style:opacity-0 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="fixed inset-0 grid place-items-center px-4 py-12 xl:py-6">
-          <Dialog.Popup className="group/popup relative flex h-full w-full max-w-[70rem] xl:max-w-none justify-center pointer-events-none transition-opacity duration-150 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0">
+          <Dialog.Popup className="group/popup relative flex h-full w-full max-w-[70rem] xl:max-w-none justify-center pointer-events-none transition-opacity duration-150 data-starting-style:opacity-0 data-ending-style:opacity-0">
             <Dialog.Close
               className="absolute right-0 -top-10 flex h-8 w-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none hover:bg-neutral-100 dark:hover:bg-neutral-800 xl:top-0 xl:h-10 xl:w-10 pointer-events-auto focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
               aria-label="Close"
             >
               <XIcon className="h-6 w-6" />
             </Dialog.Close>
-            <div className="pointer-events-auto box-border h-full w-full max-w-[70rem] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[starting-style]/popup:scale-105" />
+            <div className="pointer-events-auto box-border h-full w-full max-w-[70rem] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-starting-style/popup:scale-105" />
           </Dialog.Popup>
         </Dialog.Viewport>
       </Dialog.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index 04ff001ff64..85497e7a7e3 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const checkboxItemClass =
-  "grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400";
+  "grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
 
 export default function ExampleMenu() {
   const [showMinimap, setShowMinimap] = React.useState(true);
@@ -12,12 +12,12 @@ export default function ExampleMenu() {
 
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Workspace <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
             <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.CheckboxItem
               checked={showMinimap}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
index ed4cc27388a..1fd72761c0e 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -3,11 +3,11 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const itemClass =
-  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400";
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
 const triggerClass =
-  'flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-neutral-100 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
+  'flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-neutral-100 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 const popupClass =
-  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
+  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
 
 interface MenuItemDefinition {
   label: string;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
index 7b61889e154..0c4d45ee9c0 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
@@ -40,9 +40,9 @@ const triggerClass = `
   rounded-none border border-neutral-950 bg-white
   px-3 text-sm font-normal text-neutral-950
   select-none
-  hover:bg-neutral-50 active:bg-neutral-100 data-[popup-open]:bg-neutral-100
+  hover:bg-neutral-50 active:bg-neutral-100 data-popup-open:bg-neutral-100
   dark:border-white dark:bg-neutral-950 dark:text-white
-  dark:hover:bg-neutral-900 dark:active:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800
+  dark:hover:bg-neutral-900 dark:active:bg-neutral-800 dark:data-popup-open:bg-neutral-800
   focus-visible:outline focus-visible:outline-2
   focus-visible:-outline-offset-2 focus-visible:outline-blue-800
 `;
@@ -50,11 +50,11 @@ const triggerClass = `
 const itemClass = `
   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-white
-  data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1
-  data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1]
-  data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-['']
-  dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white
+  data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white
+  data-highlighted:before:absolute data-highlighted:before:inset-x-1
+  data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1]
+  data-highlighted:before:bg-neutral-950 data-highlighted:before:content-['']
+  dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white
 `;
 
 export default function MenuDetachedTriggersFullDemo() {
@@ -90,8 +90,8 @@ export default function MenuDetachedTriggersFullDemo() {
                   bg-white text-neutral-950 outline-none drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12
                   transition-[width,height,opacity,scale]
                   duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]
-                  data-[starting-style]:scale-90 data-[starting-style]:opacity-0
-                  data-[ending-style]:scale-90 data-[ending-style]:opacity-0
+                  data-starting-style:scale-90 data-starting-style:opacity-0
+                  data-ending-style:scale-90 data-ending-style:opacity-0
                   data-instant:transition-none
                   dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none
                 `}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
index 3bef2f1845d..c300a4bb8a2 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
@@ -4,9 +4,9 @@ import { Menu } from '@base-ui/react/menu';
 
 const demoMenu = Menu.createHandle();
 const popupClass =
-  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
+  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
 const itemClass =
-  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400";
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
 
 export default function MenuDetachedTriggersSimpleDemo() {
   return (
@@ -14,7 +14,7 @@ export default function MenuDetachedTriggersSimpleDemo() {
       <Menu.Trigger
         handle={demoMenu}
         aria-label="Project actions"
-        className="flex size-8 items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         <DotsIcon />
       </Menu.Trigger>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index b9c93cc2da3..2738953268b 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const itemClass =
-  "grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400";
+  "grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
 
 export default function ExampleMenu() {
   const [value, setValue] = React.useState('date');
@@ -13,12 +13,12 @@ export default function ExampleMenu() {
 
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         View <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
             <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
 
             <Menu.Group>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
index a224d098542..5258b5c08c5 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
@@ -2,17 +2,17 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const itemClass =
-  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400";
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
 
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Song <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
             <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.Item className={itemClass}>Add to Library</Menu.Item>
             <Menu.Item className={itemClass}>Add to Playlist</Menu.Item>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
index 26cdac3bf9d..abf9b86051d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
@@ -2,20 +2,20 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const itemClass =
-  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400";
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
 
 export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger
         openOnHover
-        className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         Add to playlist <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
             <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.Item className={itemClass}>Get Up!</Menu.Item>
             <Menu.Item className={itemClass}>Inside Out</Menu.Item>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index 7e9776b39e0..ba284057784 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -3,18 +3,18 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const radioItemClass =
-  "grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400";
+  "grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
 
 export default function ExampleMenu() {
   const [value, setValue] = React.useState('date');
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Sort <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
             <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.RadioGroup value={value} onValueChange={setValue}>
               <Menu.RadioItem value="date" className={radioItemClass}>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
index 0312c942e8f..289a99fc603 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
@@ -3,16 +3,16 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const popupClass =
-  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
+  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
 const itemClass =
-  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 data-[disabled]:text-neutral-500 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-neutral-400";
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 data-disabled:text-neutral-500 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white dark:data-disabled:text-neutral-400";
 const submenuTriggerClass =
-  "flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 data-[disabled]:text-neutral-500 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-neutral-400";
+  "flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 data-disabled:text-neutral-500 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white dark:data-disabled:text-neutral-400";
 
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-[popup-open]:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Song <ChevronDownIcon className="-mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
index d98db2ccdfe..5b6c7fa3226 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
@@ -12,49 +12,49 @@ export default function ExampleMenubar() {
         </Menu.Trigger>
         <Menu.Portal>
           <Menu.Positioner className="outline-none" sideOffset={4}>
-            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
               >
                 New
               </Menu.Item>
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
               >
                 Open
               </Menu.Item>
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
               >
                 Save
               </Menu.Item>
 
               <Menu.SubmenuRoot>
-                <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white">
+                <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white">
                   Export
                   <ChevronRightIcon />
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
                   <Menu.Positioner className="outline-none" sideOffset={-4} alignOffset={-4}>
-                    <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+                    <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
                       >
                         PDF
                       </Menu.Item>
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
                       >
                         PNG
                       </Menu.Item>
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
                       >
                         SVG
                       </Menu.Item>
@@ -66,7 +66,7 @@ export default function ExampleMenubar() {
               <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
               >
                 Print
               </Menu.Item>
@@ -81,22 +81,22 @@ export default function ExampleMenubar() {
         </Menu.Trigger>
         <Menu.Portal>
           <Menu.Positioner className="outline-none" sideOffset={4}>
-            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
               >
                 Cut
               </Menu.Item>
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
               >
                 Copy
               </Menu.Item>
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
               >
                 Paste
               </Menu.Item>
@@ -111,43 +111,43 @@ export default function ExampleMenubar() {
         </Menu.Trigger>
         <Menu.Portal>
           <Menu.Positioner className="outline-none" sideOffset={4}>
-            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
               >
                 Zoom In
               </Menu.Item>
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
               >
                 Zoom Out
               </Menu.Item>
 
               <Menu.SubmenuRoot>
-                <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white">
+                <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white">
                   Layout
                   <ChevronRightIcon />
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
                   <Menu.Positioner className="outline-none" sideOffset={-4} alignOffset={-4}>
-                    <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+                    <Menu.Popup className="origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
                       >
                         Single Page
                       </Menu.Item>
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
                       >
                         Two Pages
                       </Menu.Item>
                       <Menu.Item
                         onClick={handleClick}
-                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                        className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
                       >
                         Continuous
                       </Menu.Item>
@@ -159,7 +159,7 @@ export default function ExampleMenubar() {
               <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
               <Menu.Item
                 onClick={handleClick}
-                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white"
+                className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white"
               >
                 Full Screen
               </Menu.Item>
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
index b326a53eea3..0729343353b 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleNavigationMenu() {
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
             Overview
-            <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-[popup-open]:rotate-180">
+            <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
               <ChevronDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
@@ -32,7 +32,7 @@ export default function ExampleNavigationMenu() {
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
             Handbook
-            <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-[popup-open]:rotate-180">
+            <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
               <ChevronDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
@@ -65,13 +65,13 @@ export default function ExampleNavigationMenu() {
           sideOffset={10}
           collisionPadding={{ top: 5, bottom: 5, left: 20, right: 20 }}
           collisionAvoidance={{ side: 'none' }}
-          className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-[instant]:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
+          className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
           style={{
             ['--duration' as string]: '160ms',
             ['--easing' as string]: 'ease-out',
           }}
         >
-          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
             <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
@@ -104,19 +104,19 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 }
 
 const triggerClassName =
-  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-[popup-open]:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
+  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const contentClassName =
   'h-full p-2 min-[500px]:w-max min-[500px]:max-w-[400px] ' +
   'transition-[opacity,transform,translate] duration-[var(--duration)] ease-[var(--easing)] ' +
-  'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 ' +
-  'data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] ' +
-  'data-[starting-style]:data-[activation-direction=right]:translate-x-[50%] ' +
-  'data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] ' +
-  'data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%]';
+  'data-starting-style:opacity-0 data-ending-style:opacity-0 ' +
+  'data-starting-style:data-[activation-direction=left]:translate-x-[-50%] ' +
+  'data-starting-style:data-[activation-direction=right]:translate-x-[50%] ' +
+  'data-ending-style:data-[activation-direction=left]:translate-x-[50%] ' +
+  'data-ending-style:data-[activation-direction=right]:translate-x-[-50%]';
 
 const linkCardClassName =
-  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-[popup-open]:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
+  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const overviewLinks = [
   {
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
index ca793ef97a5..786b10ae006 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleNavigationMenu() {
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
             Product
-            <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-[popup-open]:rotate-180">
+            <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
               <ChevronDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
@@ -68,7 +68,7 @@ export default function ExampleNavigationMenu() {
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
             Learn
-            <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-[popup-open]:rotate-180">
+            <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
               <ChevronDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
@@ -115,13 +115,13 @@ export default function ExampleNavigationMenu() {
           sideOffset={10}
           collisionPadding={{ top: 5, bottom: 5, left: 20, right: 20 }}
           collisionAvoidance={{ side: 'none' }}
-          className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-[instant]:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
+          className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
           style={{
             ['--duration' as string]: '160ms',
             ['--easing' as string]: 'ease-out',
           }}
         >
-          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
             <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
@@ -154,31 +154,31 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 }
 
 const triggerClassName =
-  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-[popup-open]:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
+  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const sharedContentClassName =
   'h-full w-[calc(100vw_-_40px)] ' +
   'transition-[opacity,translate] duration-[calc(var(--duration)*0.5),var(--duration)] ease-[ease,cubic-bezier(0.4,0,0.2,1)] ' +
-  'data-[starting-style]:data-[activation-direction=left]:opacity-0 data-[starting-style]:data-[activation-direction=right]:opacity-0 data-[ending-style]:opacity-0 ' +
-  'data-[ending-style]:duration-[calc(var(--duration)*0.5)] data-[ending-style]:ease-[ease] ' +
-  'data-[starting-style]:data-[activation-direction=left]:translate-x-[-2rem] ' +
-  'data-[starting-style]:data-[activation-direction=right]:translate-x-[2rem] ' +
-  'data-[ending-style]:data-[activation-direction=left]:translate-x-[2rem] ' +
-  'data-[ending-style]:data-[activation-direction=right]:translate-x-[-2rem]';
+  'data-starting-style:data-[activation-direction=left]:opacity-0 data-starting-style:data-[activation-direction=right]:opacity-0 data-ending-style:opacity-0 ' +
+  'data-ending-style:duration-[calc(var(--duration)*0.5)] data-ending-style:ease-[ease] ' +
+  'data-starting-style:data-[activation-direction=left]:translate-x-[-2rem] ' +
+  'data-starting-style:data-[activation-direction=right]:translate-x-[2rem] ' +
+  'data-ending-style:data-[activation-direction=left]:translate-x-[2rem] ' +
+  'data-ending-style:data-[activation-direction=right]:translate-x-[-2rem]';
 
 const productContentClassName = `${sharedContentClassName} p-0 min-[700px]:[width:min(675px,calc(100vw-40px))]`;
 
 const guidesContentClassName = `${sharedContentClassName} p-0 min-[700px]:[width:min(500px,calc(100vw-40px))]`;
 
 const submenuTriggerClassName =
-  'm-0 flex w-full min-w-[10rem] flex-col items-start gap-1 border-0 bg-transparent p-2 text-left text-inherit hover:bg-neutral-100 data-[popup-open]:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
+  'm-0 flex w-full min-w-[10rem] flex-col items-start gap-1 border-0 bg-transparent p-2 text-left text-inherit hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const submenuContentClassName =
   'flex h-full translate-x-0 flex-col gap-4 p-4 transition-[opacity,translate,filter] duration-[var(--duration)] ease-[var(--easing)] min-[700px]:duration-[calc(var(--duration)*1.35)] min-[700px]:ease-[cubic-bezier(0.16,1,0.3,1)] ' +
-  'data-[starting-style]:data-[activation-direction=left]:opacity-0 data-[starting-style]:data-[activation-direction=right]:opacity-0 data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=right]:translate-x-[50%] ' +
-  'data-[ending-style]:opacity-0 data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%] ' +
-  'min-[700px]:data-[starting-style]:data-[activation-direction=up]:opacity-0 min-[700px]:data-[starting-style]:data-[activation-direction=down]:opacity-0 min-[700px]:data-[starting-style]:data-[activation-direction=up]:translate-y-[-72px] min-[700px]:data-[starting-style]:data-[activation-direction=down]:translate-y-[72px] ' +
-  'min-[700px]:data-[ending-style]:data-[activation-direction=up]:translate-y-[72px] min-[700px]:data-[ending-style]:data-[activation-direction=down]:translate-y-[-72px]';
+  'data-starting-style:data-[activation-direction=left]:opacity-0 data-starting-style:data-[activation-direction=right]:opacity-0 data-starting-style:data-[activation-direction=left]:translate-x-[-50%] data-starting-style:data-[activation-direction=right]:translate-x-[50%] ' +
+  'data-ending-style:opacity-0 data-ending-style:data-[activation-direction=left]:translate-x-[50%] data-ending-style:data-[activation-direction=right]:translate-x-[-50%] ' +
+  'min-[700px]:data-starting-style:data-[activation-direction=up]:opacity-0 min-[700px]:data-starting-style:data-[activation-direction=down]:opacity-0 min-[700px]:data-starting-style:data-[activation-direction=up]:translate-y-[-72px] min-[700px]:data-starting-style:data-[activation-direction=down]:translate-y-[72px] ' +
+  'min-[700px]:data-ending-style:data-[activation-direction=up]:translate-y-[72px] min-[700px]:data-ending-style:data-[activation-direction=down]:translate-y-[-72px]';
 
 const linkCardClassName =
-  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-[popup-open]:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
+  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
index ed102b6d25b..556bee36d18 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleNavigationMenu() {
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
             Overview
-            <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-[popup-open]:rotate-180">
+            <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
               <ChevronDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
@@ -33,7 +33,7 @@ export default function ExampleNavigationMenu() {
                       <p className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
                         How to use Base UI effectively.
                       </p>
-                      <NavigationMenu.Icon className="absolute top-1/2 right-2.5 flex h-2.5 w-2.5 -translate-y-1/2 items-center justify-center transition-transform duration-200 ease-in-out data-[popup-open]:rotate-180">
+                      <NavigationMenu.Icon className="absolute top-1/2 right-2.5 flex h-2.5 w-2.5 -translate-y-1/2 items-center justify-center transition-transform duration-200 ease-in-out data-popup-open:rotate-180">
                         <ChevronRightIcon />
                       </NavigationMenu.Icon>
                     </NavigationMenu.Trigger>
@@ -61,13 +61,13 @@ export default function ExampleNavigationMenu() {
                       alignOffset={-8}
                       align="end"
                       side="right"
-                      className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-[instant]:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
+                      className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
                       style={{
                         ['--duration' as string]: '160ms',
                         ['--easing' as string]: 'ease-out',
                       }}
                     >
-                      <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+                      <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
                         <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
                       </NavigationMenu.Popup>
                     </NavigationMenu.Positioner>
@@ -83,13 +83,13 @@ export default function ExampleNavigationMenu() {
         <NavigationMenu.Positioner
           sideOffset={10}
           collisionPadding={{ top: 5, bottom: 5, left: 20, right: 20 }}
-          className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-[instant]:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
+          className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
           style={{
             ['--duration' as string]: '160ms',
             ['--easing' as string]: 'ease-out',
           }}
         >
-          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-[ease] data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
             <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
@@ -130,20 +130,20 @@ function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
 }
 
 const triggerClassName =
-  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-[popup-open]:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
+  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const contentTransitionClassName =
   'transition-[opacity,transform,translate] duration-[var(--duration)] ease-[var(--easing)] ' +
-  'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 ' +
-  'data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] ' +
-  'data-[starting-style]:data-[activation-direction=right]:translate-x-[50%] ' +
-  'data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] ' +
-  'data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%]';
+  'data-starting-style:opacity-0 data-ending-style:opacity-0 ' +
+  'data-starting-style:data-[activation-direction=left]:translate-x-[-50%] ' +
+  'data-starting-style:data-[activation-direction=right]:translate-x-[50%] ' +
+  'data-ending-style:data-[activation-direction=left]:translate-x-[50%] ' +
+  'data-ending-style:data-[activation-direction=right]:translate-x-[-50%]';
 
 const contentClassName = `h-full w-[calc(100vw_-_40px)] p-2 min-[500px]:w-max min-[500px]:min-w-[400px] ${contentTransitionClassName}`;
 
 const linkCardClassName =
-  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-[popup-open]:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-neutral-800 dark:data-[popup-open]:bg-neutral-800';
+  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const overviewLinks = [
   {
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
index 9d4bb57b874..606a74d4afe 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
     <React.Fragment>
       <div className="flex gap-2 flex-wrap justify-center">
         <Popover.Trigger
-          className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoPopover}
           id="trigger-1"
         >
@@ -26,7 +26,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
         </Popover.Trigger>
 
         <Popover.Trigger
-          className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoPopover}
           id="trigger-2"
         >
@@ -34,7 +34,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
         </Popover.Trigger>
 
         <Popover.Trigger
-          className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoPopover}
           id="trigger-3"
         >
@@ -64,7 +64,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
             className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)]"
             sideOffset={8}
           >
-            <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+            <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
               <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
               <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
index c3a260f3ad3..e5c16d310cc 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
@@ -10,7 +10,7 @@ export default function PopoverDetachedTriggersFullDemo() {
   return (
     <div className="flex gap-2">
       <Popover.Trigger
-        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
         payload={NotificationsPanel}
       >
@@ -18,7 +18,7 @@ export default function PopoverDetachedTriggersFullDemo() {
       </Popover.Trigger>
 
       <Popover.Trigger
-        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
         payload={ActivityPanel}
       >
@@ -26,7 +26,7 @@ export default function PopoverDetachedTriggersFullDemo() {
       </Popover.Trigger>
 
       <Popover.Trigger
-        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
         payload={ProfilePanel}
       >
@@ -38,9 +38,9 @@ export default function PopoverDetachedTriggersFullDemo() {
           <Popover.Portal>
             <Popover.Positioner
               sideOffset={8}
-              className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[instant]:transition-none"
+              className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none"
             >
-              <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[31.25rem] origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[instant]:transition-none data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+              <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[31.25rem] origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:scale-90 data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-90 data-starting-style:opacity-0">
                 <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
 
                 <Popover.Viewport
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
index 269698b0635..419cba78b93 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
       <Popover.Trigger
-        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
       >
         <BellIcon aria-label="Notifications" />
@@ -18,7 +18,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
       <Popover.Root handle={demoPopover}>
         <Popover.Portal>
           <Popover.Positioner sideOffset={8}>
-            <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+            <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
               <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
               <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
index db10aad142b..7faea089f93 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
@@ -4,12 +4,12 @@ import { BellIcon } from '../../icons-tw';
 export default function ExamplePopover() {
   return (
     <Popover.Root>
-      <Popover.Trigger className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Popover.Trigger className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         <BellIcon aria-label="Notifications" />
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
-          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
             <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
             <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
index af7d13fb622..7c9ae184f2f 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
@@ -6,13 +6,13 @@ export default function ExamplePopover() {
     <Popover.Root>
       <Popover.Trigger
         openOnHover
-        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-[popup-open]:bg-neutral-100 dark:data-[popup-open]:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         <BellIcon aria-label="Notifications" />
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
-          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0">
+          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
             <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
             <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
index 72c24d63560..c43a185e9b2 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -67,7 +67,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
         <p className="m-0 text-base text-neutral-950 text-balance dark:text-white">
           Discover{' '}
           <PreviewCard.Trigger
-            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
             handle={demoPreviewCard}
             href="https://en.wikipedia.org/wiki/Typography"
             id="trigger-1"
@@ -77,7 +77,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
           </PreviewCard.Trigger>
           ,{' '}
           <PreviewCard.Trigger
-            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
             handle={demoPreviewCard}
             href="https://en.wikipedia.org/wiki/Industrial_design"
             id="trigger-2"
@@ -87,7 +87,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
           </PreviewCard.Trigger>
           , or{' '}
           <PreviewCard.Trigger
-            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
             handle={demoPreviewCard}
             href="https://en.wikipedia.org/wiki/Art"
             id="trigger-3"
@@ -121,7 +121,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)]"
             >
-              <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+              <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
                 <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
                 {payload}
               </PreviewCard.Popup>
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
index b83bcfe3182..dc276d29ab3 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
@@ -58,7 +58,7 @@ export default function PreviewCardDetachedTriggersFullDemo() {
       <p className="m-0 text-base text-neutral-950 text-balance dark:text-white">
         Discover{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
           handle={demoPreviewCard}
           href="https://en.wikipedia.org/wiki/Typography"
           payload={cardContents.typography}
@@ -67,7 +67,7 @@ export default function PreviewCardDetachedTriggersFullDemo() {
         </PreviewCard.Trigger>
         ,{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
           handle={demoPreviewCard}
           href="https://en.wikipedia.org/wiki/Design"
           payload={cardContents.design}
@@ -76,7 +76,7 @@ export default function PreviewCardDetachedTriggersFullDemo() {
         </PreviewCard.Trigger>
         , or{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
           handle={demoPreviewCard}
           href="https://en.wikipedia.org/wiki/Art"
           payload={cardContents.art}
@@ -93,7 +93,7 @@ export default function PreviewCardDetachedTriggersFullDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]"
             >
-              <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[width,height,opacity,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+              <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[width,height,opacity,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
                 <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
 
                 <PreviewCard.Viewport className="relative overflow-clip w-full h-full [&_[data-previous]]:w-[var(--popup-width)] [&_[data-previous]]:translate-x-0 [&_[data-previous]]:opacity-100 [&_[data-previous]]:transition-[translate,opacity] [&_[data-previous]]:duration-[350ms,175ms] [&_[data-previous]]:ease-[cubic-bezier(0.22,1,0.36,1)] [&_[data-current]]:w-[var(--popup-width)] [&_[data-current]]:translate-x-0 [&_[data-current]]:opacity-100 [&_[data-current]]:transition-[translate,opacity] [&_[data-current]]:duration-[350ms,175ms] [&_[data-current]]:ease-[cubic-bezier(0.22,1,0.36,1)] data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:-translate-x-[30%] data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:opacity-0 data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:translate-x-[30%] data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:opacity-0 data-[activation-direction~='left']:[&_[data-previous][data-ending-style]]:translate-x-[30%] data-[activation-direction~='left']:[&_[data-previous][data-ending-style]]:opacity-0 data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:-translate-x-[30%] data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:opacity-0">
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
index d0877d8d6c1..411569f5ee1 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function PreviewCardDetachedTriggersSimpleDemo() {
       <p className="m-0 text-base text-neutral-950 text-balance dark:text-white">
         The principles of good{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
           handle={demoPreviewCard}
           href="https://en.wikipedia.org/wiki/Typography"
         >
@@ -21,7 +21,7 @@ export default function PreviewCardDetachedTriggersSimpleDemo() {
       <PreviewCard.Root handle={demoPreviewCard}>
         <PreviewCard.Portal>
           <PreviewCard.Positioner sideOffset={8}>
-            <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+            <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
               <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
               <div className="box-border flex w-min flex-col gap-2 p-2">
                 <img
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
index aa7cdbf2c6a..da022b881bc 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExamplePreviewCard() {
       <p className="m-0 text-base text-neutral-950 text-balance dark:text-white">
         The principles of good{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-[popup-open]:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-[popup-open]:decoration-blue-500"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
           href="https://en.wikipedia.org/wiki/Typography"
         >
           typography
@@ -16,7 +16,7 @@ export default function ExamplePreviewCard() {
 
       <PreviewCard.Portal>
         <PreviewCard.Positioner sideOffset={8}>
-          <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-[ending-style]:[transform:scale(0.98)] data-[ending-style]:opacity-0 data-[starting-style]:[transform:scale(0.98)] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+          <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
             <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
             <div className="box-border flex w-min flex-col gap-2 p-2">
               <img
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
index 3e14fe71255..85912715167 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
@@ -17,11 +17,11 @@ export default function ExampleScrollAreaBoth() {
           </ul>
         </ScrollArea.Content>
       </ScrollArea.Viewport>
-      <ScrollArea.Scrollbar className="relative m-px flex bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:content-[''] data-[orientation=vertical]:w-4 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:bottom-0 data-[hovering]:pointer-events-auto data-[hovering]:opacity-100 data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0">
+      <ScrollArea.Scrollbar className="relative m-px flex bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:content-[''] data-[orientation=vertical]:w-4 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:bottom-0 data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0">
         <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
       </ScrollArea.Scrollbar>
       <ScrollArea.Scrollbar
-        className="relative m-px flex bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:content-[''] data-[orientation=vertical]:w-4 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:bottom-0 data-[hovering]:pointer-events-auto data-[hovering]:opacity-100 data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0"
+        className="relative m-px flex bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:content-[''] data-[orientation=vertical]:w-4 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:bottom-0 data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0"
         orientation="horizontal"
       >
         <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
index 7966a633616..2681bfc2d96 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
@@ -26,7 +26,7 @@ export default function ExampleScrollArea() {
           </p>
         </ScrollArea.Content>
       </ScrollArea.Viewport>
-      <ScrollArea.Scrollbar className="m-px flex w-4 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:h-full before:w-5 before:content-[''] data-[hovering]:opacity-100 data-[hovering]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0 data-[scrolling]:pointer-events-auto">
+      <ScrollArea.Scrollbar className="m-px flex w-4 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:h-full before:w-5 before:content-[''] data-hovering:opacity-100 data-hovering:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-scrolling:pointer-events-auto">
         <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
       </ScrollArea.Scrollbar>
     </ScrollArea.Root>
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
index 77168e1528d..e46ea25cb9d 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
@@ -26,7 +26,7 @@ export default function ExampleScrollAreaScrollFade() {
           </p>
         </ScrollArea.Content>
       </ScrollArea.Viewport>
-      <ScrollArea.Scrollbar className="m-px flex w-4 justify-center bg-black/8 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:h-full before:w-5 before:content-[''] data-[hovering]:opacity-100 data-[hovering]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0 data-[scrolling]:pointer-events-auto">
+      <ScrollArea.Scrollbar className="m-px flex w-4 justify-center bg-black/8 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:h-full before:w-5 before:content-[''] data-hovering:opacity-100 data-hovering:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-scrolling:pointer-events-auto">
         <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
       </ScrollArea.Scrollbar>
     </ScrollArea.Root>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index f31f7b0c380..3a2cf6875b2 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -123,9 +123,9 @@ function StackedToasts() {
           <Toast.Root
             key={toast.id}
             toast={toast}
-            className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+            className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-limited:opacity-0 data-starting-style:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-expanded:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
           >
-            <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-[behind]:opacity-0 data-[expanded]:opacity-100">
+            <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100">
               <div className="min-w-0 flex-1">
                 <Toast.Title className="text-sm font-bold" />
                 <Toast.Description className="text-sm" />
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
index 972a9f57018..f850107813e 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
@@ -44,9 +44,9 @@ function ToastList() {
     <Toast.Root
       key={toast.id}
       toast={toast}
-      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-limited:opacity-0 data-starting-style:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-expanded:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
     >
-      <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-[behind]:opacity-0 data-[expanded]:opacity-100">
+      <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100">
         <div className="min-w-0 flex-1">
           <Toast.Title className="text-sm font-bold" />
           <Toast.Description className="text-sm" />
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
index 51bfd769c8f..f415feaec90 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
@@ -45,9 +45,9 @@ function ToastList() {
       key={toast.id}
       toast={toast}
       swipeDirection="up"
-      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)+(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))] absolute top-0 right-0 left-0 z-[calc(1000-var(--toast-index))] mx-auto w-full origin-top [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(-150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)+(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))] absolute top-0 right-0 left-0 z-[calc(1000-var(--toast-index))] mx-auto w-full origin-top [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-limited:opacity-0 data-starting-style:[transform:translateY(-150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)] data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-expanded:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
     >
-      <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-[behind]:opacity-0 data-[expanded]:opacity-100">
+      <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100">
         <div className="min-w-0 flex-1">
           <Toast.Title className="text-sm font-bold" />
           <Toast.Description className="text-sm" />
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
index a43e0fd4a06..33145458e7a 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleToolbar() {
           render={<Toggle />}
           aria-label="Align left"
           value="align-left"
-          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-[popup-open]:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         >
           Align Left
         </Toolbar.Button>
@@ -20,7 +20,7 @@ export default function ExampleToolbar() {
           render={<Toggle />}
           aria-label="Align right"
           value="align-right"
-          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-[popup-open]:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         >
           Align Right
         </Toolbar.Button>
@@ -28,13 +28,13 @@ export default function ExampleToolbar() {
       <Toolbar.Separator className="m-1 h-4 w-px bg-neutral-950 dark:bg-white" />
       <Toolbar.Group className="flex" aria-label="Numerical format">
         <Toolbar.Button
-          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-[popup-open]:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           aria-label="Format as currency"
         >
           $
         </Toolbar.Button>
         <Toolbar.Button
-          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-[popup-open]:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           aria-label="Format as percent"
         >
           %
@@ -44,7 +44,7 @@ export default function ExampleToolbar() {
       <Select.Root defaultValue="Helvetica">
         <Toolbar.Button
           render={<Select.Trigger />}
-          className="flex h-8 min-w-32 cursor-default items-center justify-between border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-[popup-open]:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-[popup-open]:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-32 cursor-default items-center justify-between border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         >
           <Select.Value />
           <Select.Icon className="flex">
@@ -53,10 +53,10 @@ export default function ExampleToolbar() {
         </Toolbar.Button>
         <Select.Portal>
           <Select.Positioner className="z-10 outline-none select-none" sideOffset={8}>
-            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto border border-neutral-950 bg-white bg-clip-padding text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:translate-y-px data-[side=none]:scale-100 data-[side=none]:opacity-100 data-[side=none]:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[side=none]:data-[starting-style]:scale-100 data-[side=none]:data-[starting-style]:opacity-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto border border-neutral-950 bg-white bg-clip-padding text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:translate-y-px data-[side=none]:scale-100 data-[side=none]:opacity-100 data-[side=none]:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-starting-style:opacity-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.Item
                 value="Helvetica"
-                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-neutral-950 data-[highlighted]:text-white pointer-coarse:py-2.5 dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-neutral-950"
+                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none group-data-[side=none]:pr-12 data-highlighted:bg-neutral-950 data-highlighted:text-white pointer-coarse:py-2.5 dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
               >
                 <Select.ItemIndicator className="col-start-1">
                   <CheckIcon className="block size-3" />
@@ -65,7 +65,7 @@ export default function ExampleToolbar() {
               </Select.Item>
               <Select.Item
                 value="Arial"
-                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none group-data-[side=none]:pr-12 data-[highlighted]:bg-neutral-950 data-[highlighted]:text-white pointer-coarse:py-2.5 dark:data-[highlighted]:bg-white dark:data-[highlighted]:text-neutral-950"
+                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none group-data-[side=none]:pr-12 data-highlighted:bg-neutral-950 data-highlighted:text-white pointer-coarse:py-2.5 dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
               >
                 <Select.ItemIndicator className="col-start-1">
                   <CheckIcon className="block size-3" />
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
index 23441c750c5..f5a77005f60 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -12,7 +12,7 @@ const buttonClass =
   'flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
-  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
+  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
 
 const arrowClass =
   "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
index 1f30d35fe67..e427298b7af 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
@@ -9,7 +9,7 @@ const triggerClass =
   'box-border flex size-8 items-center justify-center border border-neutral-950 bg-white text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const arrowClass =
-  "relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[instant]:transition-none data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
+  "relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
 
 export default function TooltipDetachedTriggersFullDemo() {
   return (
@@ -47,7 +47,7 @@ export default function TooltipDetachedTriggersFullDemo() {
                 transition-[top,left,right,bottom,transform]
                 duration-[0.35s]
                 ease-[cubic-bezier(0.22,1,0.36,1)]
-                data-[instant]:transition-none"
+                data-instant:transition-none"
             >
               <Tooltip.Popup
                 className="
@@ -62,9 +62,9 @@ export default function TooltipDetachedTriggersFullDemo() {
                   transition-[width,height,opacity,scale]
                   duration-[0.35s]
                   ease-[cubic-bezier(0.22,1,0.36,1)]
-                  data-[ending-style]:opacity-0 data-[ending-style]:scale-90
-                  data-[instant]:transition-none
-                  data-[starting-style]:opacity-0 data-[starting-style]:scale-90"
+                  data-ending-style:opacity-0 data-ending-style:scale-90
+                  data-instant:transition-none
+                  data-starting-style:opacity-0 data-starting-style:scale-90"
               >
                 <Tooltip.Arrow className={arrowClass} />
 
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
index 98a7471eba5..7caaf643c8e 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
@@ -9,7 +9,7 @@ const triggerClass =
   'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
-  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
+  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
 
 const arrowClass =
   "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
index 53b51064f61..8e7ab0c50e8 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
@@ -5,7 +5,7 @@ const triggerClass =
   'flex size-8 items-center justify-center border-0 bg-transparent text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
-  'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[instant]:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
+  'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
 
 const arrowClass =
   "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
index 10b95e0b097..84c7ef8b399 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
@@ -29,7 +29,7 @@ export function Portal(props: Autocomplete.Portal.Props) {
 export function Positioner({ className, ...props }: Autocomplete.Positioner.Props) {
   return (
     <Autocomplete.Positioner
-      className={clsx('outline-none data-[empty]:hidden', className)}
+      className={clsx('outline-none data-empty:hidden', className)}
       sideOffset={4}
       {...props}
     />
@@ -56,7 +56,7 @@ export function Item({ className, ...props }: Autocomplete.Item.Props) {
   return (
     <Autocomplete.Item
       className={clsx(
-        'flex flex-col gap-0.25 cursor-default py-2 pr-8 pl-4 text-base leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded data-[highlighted]:before:bg-neutral-900',
+        'flex flex-col gap-0.25 cursor-default py-2 pr-8 pl-4 text-base leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-neutral-50 data-highlighted:before:absolute data-highlighted:before:inset-x-2 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:rounded data-highlighted:before:bg-neutral-900',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx
index 0487c3e4902..688087a2f4e 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx
@@ -7,7 +7,7 @@ export function Button({ className, ...props }: React.ComponentPropsWithoutRef<'
     <BaseButton
       type="button"
       className={clsx(
-        'flex items-center justify-center h-10 px-3.5 m-0 outline-0 border border-neutral-200 rounded-md bg-neutral-50 font-inherit text-base font-normal leading-6 text-neutral-900 select-none hover:data-[disabled]:bg-neutral-50 hover:bg-neutral-100 active:data-[disabled]:bg-neutral-50 active:bg-neutral-200 active:shadow-[inset_0_1px_3px_rgba(0,0,0,0.1)] active:border-t-neutral-300 active:data-[disabled]:shadow-none active:data-[disabled]:border-t-neutral-200 focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1 data-[disabled]:text-neutral-500',
+        'flex items-center justify-center h-10 px-3.5 m-0 outline-0 border border-neutral-200 rounded-md bg-neutral-50 font-inherit text-base font-normal leading-6 text-neutral-900 select-none hover:data-disabled:bg-neutral-50 hover:bg-neutral-100 active:data-disabled:bg-neutral-50 active:bg-neutral-200 active:shadow-[inset_0_1px_3px_rgba(0,0,0,0.1)] active:border-t-neutral-300 active:data-disabled:shadow-none active:data-disabled:border-t-neutral-200 focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1 data-disabled:text-neutral-500',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox.tsx
index 2ed5b3a7d2b..c2be9262b9e 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox.tsx
@@ -6,7 +6,7 @@ export function Root({ className, ...props }: Checkbox.Root.Props) {
   return (
     <Checkbox.Root
       className={clsx(
-        'flex size-5 items-center justify-center rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-neutral-900 data-[unchecked]:border data-[unchecked]:border-neutral-300',
+        'flex size-5 items-center justify-center rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-checked:bg-neutral-900 data-unchecked:border data-unchecked:border-neutral-300',
         className,
       )}
       {...props}
@@ -17,7 +17,7 @@ export function Root({ className, ...props }: Checkbox.Root.Props) {
 export function Indicator({ className, ...props }: Checkbox.Indicator.Props) {
   return (
     <Checkbox.Indicator
-      className={clsx('flex text-neutral-50 data-[unchecked]:hidden', className)}
+      className={clsx('flex text-neutral-50 data-unchecked:hidden', className)}
       {...props}
     />
   );
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
index 958d600f22e..1fd4ae5e68e 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
@@ -63,7 +63,7 @@ export function Popup({ className, ...props }: Combobox.Popup.Props) {
   return (
     <Combobox.Popup
       className={clsx(
-        'w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] rounded-md bg-[canvas] text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300 duration-100',
+        'w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] rounded-md bg-[canvas] text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 transition-[transform,scale,opacity] data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300 duration-100',
         className,
       )}
       {...props}
@@ -87,7 +87,7 @@ export function List({ className, ...props }: Combobox.List.Props) {
   return (
     <Combobox.List
       className={clsx(
-        'outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-[empty]:p-0',
+        'outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-empty:p-0',
         className,
       )}
       {...props}
@@ -99,7 +99,7 @@ export function Item({ className, ...props }: Combobox.Item.Props) {
   return (
     <Combobox.Item
       className={clsx(
-        'grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-neutral-900',
+        'grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-neutral-50 data-highlighted:before:absolute data-highlighted:before:inset-x-2 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:rounded-sm data-highlighted:before:bg-neutral-900',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/radio.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/radio.tsx
index 8384184b935..8327e62b93b 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/radio.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/radio.tsx
@@ -6,7 +6,7 @@ export function Root({ className, ...props }: Radio.Root.Props) {
   return (
     <Radio.Root
       className={clsx(
-        'flex size-5 items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-[checked]:bg-neutral-900 data-[unchecked]:border data-[unchecked]:border-neutral-300',
+        'flex size-5 items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-checked:bg-neutral-900 data-unchecked:border data-unchecked:border-neutral-300',
         className,
       )}
       {...props}
@@ -18,7 +18,7 @@ export function Indicator({ className, ...props }: Radio.Indicator.Props) {
   return (
     <Radio.Indicator
       className={clsx(
-        'flex before:size-2 before:rounded-full before:bg-neutral-50 data-[unchecked]:hidden',
+        'flex before:size-2 before:rounded-full before:bg-neutral-50 data-unchecked:hidden',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
index ec69cbc0f27..91e11325f8d 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
@@ -16,7 +16,7 @@ export function Trigger({ className, ...props }: Select.Trigger.Props) {
   return (
     <Select.Trigger
       className={clsx(
-        'flex h-10 min-w-36 items-center justify-between gap-3 rounded-md border border-neutral-200 pr-3 pl-3.5 text-base text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-[popup-open]:bg-neutral-100 cursor-default not-[[data-filled]]:text-neutral-500 bg-[canvas]',
+        'flex h-10 min-w-36 items-center justify-between gap-3 rounded-md border border-neutral-200 pr-3 pl-3.5 text-base text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-popup-open:bg-neutral-100 cursor-default not-data-filled:text-neutral-500 bg-[canvas]',
         className,
       )}
       {...props}
@@ -50,7 +50,7 @@ export function Popup({ className, ...props }: Select.Popup.Props) {
   return (
     <Select.Popup
       className={clsx(
-        'group origin-[var(--transform-origin)] bg-clip-padding rounded-md bg-[canvas] text-neutral-900 shadow-lg shadow-neutral-200 outline outline-neutral-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[side=none]: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-neutral-300',
+        'group origin-[var(--transform-origin)] bg-clip-padding rounded-md bg-[canvas] text-neutral-900 shadow-lg shadow-neutral-200 outline outline-neutral-200 transition-[transform,scale,opacity] data-ending-style:scale-90 data-ending-style:opacity-0 data-[side=none]: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-neutral-300',
         className,
       )}
       {...props}
@@ -98,7 +98,7 @@ export function Item({ className, ...props }: Select.Item.Props) {
   return (
     <Select.Item
       className={clsx(
-        'grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-3 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-neutral-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-neutral-900 pointer-coarse:py-2.5 pointer-coarse:text-[0.925rem]',
+        'grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-3 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-neutral-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-neutral-900 pointer-coarse:py-2.5 pointer-coarse:text-[0.925rem]',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx
index 41c3cd5259a..1d4765f6496 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx
@@ -6,7 +6,7 @@ export function Root({ className, ...props }: Switch.Root.Props) {
   return (
     <Switch.Root
       className={clsx(
-        'relative flex h-6 w-10 rounded-full bg-gradient-to-r from-neutral-700 from-35% to-neutral-200 to-65% bg-[length:6.5rem_100%] bg-[100%_0%] bg-no-repeat p-px shadow-[inset_0_1.5px_2px] shadow-neutral-200 outline-1 -outline-offset-1 outline-neutral-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-neutral-100 data-[checked]:bg-[0%_0%] data-[checked]:active:bg-neutral-500 dark:from-neutral-500 dark:shadow-black/75 dark:outline-white/15 dark:data-[checked]:shadow-none',
+        'relative flex h-6 w-10 rounded-full bg-gradient-to-r from-neutral-700 from-35% to-neutral-200 to-65% bg-[length:6.5rem_100%] bg-[100%_0%] bg-no-repeat p-px shadow-[inset_0_1.5px_2px] shadow-neutral-200 outline-1 -outline-offset-1 outline-neutral-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-neutral-100 data-checked:bg-[0%_0%] data-checked:active:bg-neutral-500 dark:from-neutral-500 dark:shadow-black/75 dark:outline-white/15 dark:data-checked:shadow-none',
         className,
       )}
       {...props}
@@ -18,7 +18,7 @@ export function Thumb({ className, ...props }: Switch.Thumb.Props) {
   return (
     <Switch.Thumb
       className={clsx(
-        'aspect-square h-full rounded-full bg-white shadow-[0_0_1px_1px,0_1px_1px,1px_2px_4px_-1px] shadow-neutral-100 transition-transform duration-150 data-[checked]:translate-x-4 dark:shadow-black/25',
+        'aspect-square h-full rounded-full bg-white shadow-[0_0_1px_1px,0_1px_1px,1px_2px_4px_-1px] shadow-neutral-100 transition-transform duration-150 data-checked:translate-x-4 dark:shadow-black/25',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
index ff85a6b1103..2bca5f2d01a 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
@@ -9,7 +9,7 @@ function Toasts() {
     <Toast.Root
       key={toast.id}
       toast={toast}
-      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] rounded-lg border border-neutral-200 bg-neutral-50 bg-clip-padding p-4 shadow-lg select-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] rounded-lg border border-neutral-200 bg-neutral-50 bg-clip-padding p-4 shadow-lg select-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-limited:opacity-0 data-starting-style:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
     >
       <Toast.Content className="overflow-hidden transition-opacity [transition-duration:250ms]">
         <Toast.Title className="text-[0.975rem] leading-5 font-bold" />
diff --git a/docs/src/app/(docs)/react/handbook/styling/page.mdx b/docs/src/app/(docs)/react/handbook/styling/page.mdx
index e18d90aa821..b7c832841c9 100644
--- a/docs/src/app/(docs)/react/handbook/styling/page.mdx
+++ b/docs/src/app/(docs)/react/handbook/styling/page.mdx
@@ -71,16 +71,16 @@ import { Menu } from '@base-ui/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-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100 data-[popup-open]:bg-neutral-100">
+      <Menu.Trigger className="flex h-10 items-center justify-center gap-1.5 rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100 data-popup-open:bg-neutral-100">
         Song
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-none" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-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-neutral-300">
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-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-neutral-900">
+          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-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-neutral-300">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-neutral-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-neutral-900">
               Add to Library
             </Menu.Item>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-neutral-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-neutral-900">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-neutral-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-neutral-900">
               Add to Playlist
             </Menu.Item>
           </Menu.Popup>

From 70e712d27b07be076ac810ac086086d34e922f1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 5 May 2026 15:05:37 +0200
Subject: [PATCH 118/257] Autocomplete: tweak alignment on command palette demo

---
 .../demos/command-palette/css-modules/index.module.css        | 4 ++--
 .../autocomplete/demos/command-palette/tailwind/index.tsx     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
index af5222bb1bc..74358c9fea4 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
@@ -90,7 +90,7 @@
 
 .Input {
   box-sizing: border-box;
-  padding-inline: 0.5rem;
+  padding: 0 0.75rem;
   margin: 0;
   border: none;
   border-bottom: 1px solid light-dark(var(--color-neutral-950), white);
@@ -161,7 +161,7 @@
   display: flex;
   align-items: center;
   min-height: 2rem;
-  padding: 0 1.5rem 0 1rem;
+  padding: 0 1.5rem 0 0.75rem;
   font-size: 0.875rem;
   line-height: 1;
   font-weight: 400;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
index 72dbb6a6708..d676a7c7cdb 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
@@ -31,7 +31,7 @@ export default function ExampleAutocompleteCommandPalette() {
               keepHighlight
             >
               <Autocomplete.Input
-                className="h-10 w-full border-0 border-b border-neutral-950 bg-transparent px-2 text-sm font-normal tracking-[0.016em] text-neutral-950 outline-none placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+                className="h-10 w-full border-0 border-b border-neutral-950 bg-transparent px-4 text-sm font-normal tracking-[0.016em] text-neutral-950 outline-none placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
                 placeholder="Search for apps and commands…"
               />
               <Dialog.Close className="sr-only">Close command palette</Dialog.Close>
@@ -80,7 +80,7 @@ export default function ExampleAutocompleteCommandPalette() {
                 </ScrollArea.Scrollbar>
               </ScrollArea.Root>
 
-              <div className="flex items-center justify-between border-t border-neutral-950 bg-white px-3 py-2.5 text-xs text-neutral-600 dark:border-white dark:bg-neutral-950 dark:text-neutral-400">
+              <div className="flex items-center justify-between border-t border-neutral-950 bg-white px-4 py-2.5 text-xs text-neutral-600 dark:border-white dark:bg-neutral-950 dark:text-neutral-400">
                 <div className="flex items-center gap-1">
                   <span>Activate</span>
                   <kbd className="inline-flex h-5 min-w-5 items-center justify-center border border-neutral-400 bg-neutral-100 px-1 font-mono text-[0.625rem] leading-none font-normal text-neutral-600 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-400">

From d28d4a696b19c520f11af74c757d9e9c8ea5af73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 5 May 2026 15:08:55 +0200
Subject: [PATCH 119/257] All: remove box-border TW classes

---
 .../dialog/demos/uncontained/tailwind/index.tsx      |  2 +-
 .../drawer/demos/mobile-nav/tailwind/index.tsx       |  6 +++---
 .../drawer/demos/swipe-area/tailwind/index.tsx       |  2 +-
 .../menu/demos/checkbox-items/tailwind/index.tsx     |  2 +-
 .../detached-triggers-controlled/tailwind/index.tsx  |  2 +-
 .../demos/detached-triggers-full/tailwind/index.tsx  |  4 ++--
 .../detached-triggers-simple/tailwind/index.tsx      |  2 +-
 .../menu/demos/group-labels/tailwind/index.tsx       |  2 +-
 .../components/menu/demos/hero/tailwind/index.tsx    |  2 +-
 .../menu/demos/open-on-hover/tailwind/index.tsx      |  2 +-
 .../menu/demos/radio-items/tailwind/index.tsx        |  2 +-
 .../components/menu/demos/submenu/tailwind/index.tsx |  2 +-
 .../navigation-menu/demos/hero/tailwind/index.tsx    |  4 ++--
 .../demos/nested-inline/tailwind/index.tsx           |  2 +-
 .../navigation-menu/demos/nested/tailwind/index.tsx  |  4 ++--
 .../otp-field/demos/alphanumeric/tailwind/index.tsx  |  2 +-
 .../demos/focused-placeholder/tailwind/index.tsx     |  2 +-
 .../otp-field/demos/grouped/tailwind/index.tsx       |  4 ++--
 .../otp-field/demos/hero/tailwind/index.tsx          |  2 +-
 .../otp-field/demos/password/tailwind/index.tsx      |  2 +-
 .../detached-triggers-controlled/tailwind/index.tsx  |  2 +-
 .../demos/detached-triggers-full/tailwind/index.tsx  |  2 +-
 .../detached-triggers-simple/tailwind/index.tsx      |  2 +-
 .../components/popover/demos/hero/tailwind/index.tsx |  2 +-
 .../popover/demos/open-on-hover/tailwind/index.tsx   |  2 +-
 .../detached-triggers-controlled/tailwind/index.tsx  | 12 ++++++------
 .../demos/detached-triggers-full/tailwind/index.tsx  |  8 ++++----
 .../detached-triggers-simple/tailwind/index.tsx      |  6 +++---
 .../preview-card/demos/hero/tailwind/index.tsx       |  6 +++---
 .../scroll-area/demos/both/tailwind/index.tsx        |  2 +-
 .../scroll-area/demos/hero/tailwind/index.tsx        |  2 +-
 .../scroll-area/demos/scroll-fade/tailwind/index.tsx |  2 +-
 .../slider/demos/edge-alignment/tailwind/index.tsx   |  2 +-
 .../components/slider/demos/hero/tailwind/index.tsx  |  2 +-
 .../slider/demos/range-slider/tailwind/index.tsx     |  4 ++--
 .../slider/demos/vertical/tailwind/index.tsx         |  2 +-
 .../components/switch/demos/hero/tailwind/index.tsx  |  2 +-
 .../detached-triggers-controlled/tailwind/index.tsx  |  2 +-
 .../demos/detached-triggers-full/tailwind/index.tsx  |  4 ++--
 .../detached-triggers-simple/tailwind/index.tsx      |  2 +-
 .../components/tooltip/demos/hero/tailwind/index.tsx |  2 +-
 .../direction-provider/demos/hero/tailwind/index.tsx |  2 +-
 42 files changed, 62 insertions(+), 62 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
index 2d26bcb06b8..13e74b5b066 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function ExampleUncontainedDialog() {
             >
               <XIcon className="h-6 w-6" />
             </Dialog.Close>
-            <div className="pointer-events-auto box-border h-full w-full max-w-[70rem] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-starting-style/popup:scale-105" />
+            <div className="pointer-events-auto h-full w-full max-w-[70rem] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-starting-style/popup:scale-105" />
           </Dialog.Popup>
         </Dialog.Viewport>
       </Dialog.Portal>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
index e24d2b4f43a..8ad942e4077 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
@@ -61,11 +61,11 @@ export default function ExampleDrawerMobileNav() {
         <Drawer.Viewport className="group fixed inset-0">
           <ScrollArea.Root
             style={{ position: undefined }}
-            className="box-border h-full overscroll-contain transition-transform duration-600 ease-[cubic-bezier(0.45,1.005,0,1.005)] group-data-starting-style:translate-y-[100dvh] group-data-ending-style:pointer-events-none"
+            className="h-full overscroll-contain transition-transform duration-600 ease-[cubic-bezier(0.45,1.005,0,1.005)] group-data-starting-style:translate-y-[100dvh] group-data-ending-style:pointer-events-none"
           >
-            <ScrollArea.Viewport className="box-border h-full overscroll-contain touch-auto">
+            <ScrollArea.Viewport className="h-full overscroll-contain touch-auto">
               <ScrollArea.Content className="flex min-h-full items-end justify-center pt-8 min-[42rem]:px-16 min-[42rem]:py-16">
-                <Drawer.Popup className="group box-border w-full max-w-[42rem] outline-none transition-transform duration-600 ease-[cubic-bezier(0.45,1.005,0,1.005)] [transform:translateY(var(--drawer-swipe-movement-y))] data-swiping:select-none data-ending-style:[transform:translateY(calc(max(100dvh,100%)+2px))] data-ending-style:duration-350 data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] motion-reduce:transition-none">
+                <Drawer.Popup className="group w-full max-w-[42rem] outline-none transition-transform duration-600 ease-[cubic-bezier(0.45,1.005,0,1.005)] [transform:translateY(var(--drawer-swipe-movement-y))] data-swiping:select-none data-ending-style:[transform:translateY(calc(max(100dvh,100%)+2px))] data-ending-style:duration-350 data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] motion-reduce:transition-none">
                   <nav
                     aria-label="Navigation"
                     className="relative flex flex-col border-t border-neutral-950 bg-white px-6 pt-4 pb-6 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-shadow duration-350 ease-[cubic-bezier(0.375,0.015,0.545,0.455)] group-data-ending-style:shadow-[0.25rem_0.25rem_0] group-data-ending-style:shadow-black/0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none min-[42rem]:border"
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
index ed8ffaadf36..348d865bcab 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
@@ -11,7 +11,7 @@ export default function ExampleDrawerSwipeArea() {
       className="relative min-h-80 w-full overflow-hidden border border-neutral-950 bg-white text-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white"
     >
       <Drawer.Root swipeDirection="right" modal={false}>
-        <Drawer.SwipeArea className="absolute inset-y-0 right-0 z-[1] box-border w-10 border-l-2 border-dashed border-blue-800 bg-blue-800/10 dark:border-blue-500 dark:bg-blue-500/10">
+        <Drawer.SwipeArea className="absolute inset-y-0 right-0 z-[1] w-10 border-l-2 border-dashed border-blue-800 bg-blue-800/10 dark:border-blue-500 dark:bg-blue-500/10">
           <span className="pointer-events-none absolute right-0 top-1/2 z-0 mr-2 -translate-y-1/2 -rotate-90 origin-center whitespace-nowrap text-xs font-bold tracking-[0.12em] text-blue-800 uppercase dark:text-blue-500">
             Swipe here
           </span>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index 85497e7a7e3..f17da17aa0d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
           <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
-            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.CheckboxItem
               checked={showMinimap}
               onCheckedChange={setShowMinimap}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
index 1fd72761c0e..52f8ea5c1e6 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -96,7 +96,7 @@ export default function MenuDetachedTriggersControlledDemo() {
           <Menu.Portal>
             <Menu.Positioner sideOffset={8} className="outline-hidden">
               <Menu.Popup className={popupClass}>
-                <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+                <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
 
                 {payload &&
                   MENUS[payload].map((item, index) => (
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
index 0c4d45ee9c0..2e5e9a5bd28 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
@@ -105,7 +105,7 @@ export default function MenuDetachedTriggersFullDemo() {
                     data-[side=left]:right-[-9px] data-[side=left]:rotate-90
                     data-[side=right]:left-[-9px] data-[side=right]:-rotate-90
                     data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180
-                    before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border
+                    before:content-[''] before:absolute before:bottom-0 before:left-1/2
                     before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))]
                     before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white
                     before:[transform:translate(-50%,50%)_rotate(45deg)]
@@ -114,7 +114,7 @@ export default function MenuDetachedTriggersFullDemo() {
 
                 <Menu.Viewport
                   className={`
-                    relative h-full w-full box-border overflow-clip
+                    relative h-full w-full overflow-clip
                     p-0
                     [&_[data-current]]:w-[var(--popup-width)]
                     [&_[data-current]]:translate-x-0 [&_[data-current]]:opacity-100
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
index c300a4bb8a2..c278639c2cd 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
@@ -23,7 +23,7 @@ export default function MenuDetachedTriggersSimpleDemo() {
         <Menu.Portal>
           <Menu.Positioner sideOffset={8} className="outline-hidden">
             <Menu.Popup className={popupClass}>
-              <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+              <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Menu.Item className={itemClass}>Rename</Menu.Item>
               <Menu.Item className={itemClass}>Duplicate</Menu.Item>
               <Menu.Item className={itemClass}>Move to folder</Menu.Item>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index 2738953268b..4dc98489024 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -19,7 +19,7 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
           <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
-            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
 
             <Menu.Group>
               <Menu.GroupLabel className="cursor-default py-2 pr-8 pl-7.5 text-xs font-bold tracking-wider text-neutral-500 uppercase select-none dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
index 5258b5c08c5..3b91892c39e 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
           <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
-            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.Item className={itemClass}>Add to Library</Menu.Item>
             <Menu.Item className={itemClass}>Add to Playlist</Menu.Item>
             <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
index abf9b86051d..e2effe5c4e9 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
           <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
-            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.Item className={itemClass}>Get Up!</Menu.Item>
             <Menu.Item className={itemClass}>Inside Out</Menu.Item>
             <Menu.Item className={itemClass}>Night Beats</Menu.Item>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index ba284057784..740296bd3f1 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -15,7 +15,7 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
           <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
-            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.RadioGroup value={value} onValueChange={setValue}>
               <Menu.RadioItem value="date" className={radioItemClass}>
                 <Menu.RadioItemIndicator className="col-start-1">
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
index 289a99fc603..7ce9b23ae27 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
           <Menu.Popup className={popupClass}>
-            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.Item className={itemClass}>Add to Library</Menu.Item>
 
             <Menu.SubmenuRoot>
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
index 0729343353b..ab55a49eb89 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleNavigationMenu() {
           </NavigationMenu.Trigger>
 
           <NavigationMenu.Content className={contentClassName}>
-            <ul className="box-border m-0 grid list-none grid-cols-2 p-0 max-[500px]:grid-cols-1">
+            <ul className="m-0 grid list-none grid-cols-2 p-0 max-[500px]:grid-cols-1">
               {overviewLinks.map((item) => (
                 <li key={item.href}>
                   <Link href={item.href} className={linkCardClassName}>
@@ -38,7 +38,7 @@ export default function ExampleNavigationMenu() {
           </NavigationMenu.Trigger>
 
           <NavigationMenu.Content className={contentClassName}>
-            <ul className="m-0 box-border flex max-w-[400px] list-none flex-col justify-center p-0">
+            <ul className="m-0 flex max-w-[400px] list-none flex-col justify-center p-0">
               {handbookLinks.map((item) => (
                 <li key={item.href}>
                   <Link href={item.href} className={linkCardClassName}>
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
index 786b10ae006..a63f80af90b 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
@@ -25,7 +25,7 @@ export default function ExampleNavigationMenu() {
               defaultValue="developers"
             >
               <div className="grid grid-cols-1 overflow-hidden overflow-clip min-[700px]:grid-cols-[13rem_minmax(0,1fr)]">
-                <NavigationMenu.List className="m-0 box-border flex list-none flex-row gap-1 overflow-x-auto p-2 min-[700px]:h-[var(--popup-height)] min-[700px]:flex-col min-[700px]:gap-0 min-[700px]:overflow-x-visible min-[700px]:overflow-y-clip min-[700px]:border-r min-[700px]:border-r-neutral-950 min-[700px]:transition-[height] min-[700px]:duration-[var(--duration)] min-[700px]:ease-[var(--easing)] dark:min-[700px]:border-r-white">
+                <NavigationMenu.List className="m-0 flex list-none flex-row gap-1 overflow-x-auto p-2 min-[700px]:h-[var(--popup-height)] min-[700px]:flex-col min-[700px]:gap-0 min-[700px]:overflow-x-visible min-[700px]:overflow-y-clip min-[700px]:border-r min-[700px]:border-r-neutral-950 min-[700px]:transition-[height] min-[700px]:duration-[var(--duration)] min-[700px]:ease-[var(--easing)] dark:min-[700px]:border-r-white">
                   {audienceMenus.map((menu) => (
                     <NavigationMenu.Item key={menu.value} value={menu.value}>
                       <NavigationMenu.Trigger className={submenuTriggerClassName}>
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
index 556bee36d18..aef8bdd4fb0 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleNavigationMenu() {
           </NavigationMenu.Trigger>
 
           <NavigationMenu.Content className={contentClassName}>
-            <ul className="box-border m-0 grid list-none grid-cols-2 p-0 min-[640px]:grid-cols-[12rem_12rem]">
+            <ul className="m-0 grid list-none grid-cols-2 p-0 min-[640px]:grid-cols-[12rem_12rem]">
               {overviewLinks.map((item) => (
                 <li key={item.href}>
                   <Link href={item.href} className={linkCardClassName}>
@@ -38,7 +38,7 @@ export default function ExampleNavigationMenu() {
                       </NavigationMenu.Icon>
                     </NavigationMenu.Trigger>
                     <NavigationMenu.Content className={contentClassName}>
-                      <ul className="m-0 box-border flex max-w-[400px] list-none flex-col justify-center p-0">
+                      <ul className="m-0 flex max-w-[400px] list-none flex-col justify-center p-0">
                         {handbookLinks.map((item) => (
                           <li key={item.href}>
                             <Link href={item.href} className={linkCardClassName}>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
index 05981953814..3cc756ef647 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
@@ -22,7 +22,7 @@ export default function OTPFieldAlphanumericDemo() {
         {Array.from({ length: CODE_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="box-border m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
             aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
           />
         ))}
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
index 014ff5a9358..94df949fe00 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
@@ -21,7 +21,7 @@ export default function OTPFieldFocusedPlaceholderDemo() {
         {Array.from({ length: CODE_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="box-border m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 focus:placeholder:text-transparent dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 focus:placeholder:text-transparent dark:border-white dark:text-white dark:placeholder:text-neutral-400"
             placeholder="•"
             aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
           />
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
index 7b8c30ae922..34098b3f6a4 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function OTPFieldGroupedDemo() {
           {Array.from({ length: 3 }, (_, index) => (
             <OTPField.Input
               key={index}
-              className="box-border m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+              className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
               aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}
             />
           ))}
@@ -26,7 +26,7 @@ export default function OTPFieldGroupedDemo() {
           {Array.from({ length: 3 }, (_, index) => (
             <OTPField.Input
               key={index + 3}
-              className="box-border m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+              className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
               aria-label={`Character ${index + 4} of ${OTP_LENGTH}`}
             />
           ))}
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
index b3d1441829f..3bd140c6f6b 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
@@ -21,7 +21,7 @@ export default function ExampleOTPField() {
         {Array.from({ length: OTP_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="box-border m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
             aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}
           />
         ))}
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
index f7d8e58644d..f3514a5b28a 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
@@ -22,7 +22,7 @@ export default function OTPFieldPasswordDemo() {
         {Array.from({ length: CODE_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="box-border m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
             aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
           />
         ))}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
index 606a74d4afe..1b50ddce1ec 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -65,7 +65,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
             sideOffset={8}
           >
             <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
-              <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+              <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
               <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
                 You are all caught up. Good job!
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
index e5c16d310cc..8f876ab5795 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
@@ -41,7 +41,7 @@ export default function PopoverDetachedTriggersFullDemo() {
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none"
             >
               <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[31.25rem] origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:scale-90 data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-90 data-starting-style:opacity-0">
-                <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+                <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
 
                 <Popover.Viewport
                   className={`
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
index 419cba78b93..1046ef4e2c0 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
@@ -19,7 +19,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
         <Popover.Portal>
           <Popover.Positioner sideOffset={8}>
             <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
-              <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+              <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
               <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
                 You are all caught up. Good job!
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
index 7faea089f93..f228238bd0a 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
@@ -10,7 +10,7 @@ export default function ExamplePopover() {
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
           <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
-            <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+            <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
             <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
               You are all caught up. Good job!
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
index 7c9ae184f2f..75cc54a9401 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExamplePopover() {
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
           <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
-            <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
+            <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
             <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
               You are all caught up. Good job!
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
index c43a185e9b2..6febfe23e42 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -6,7 +6,7 @@ const demoPreviewCard = PreviewCard.createHandle<React.ReactElement>();
 
 const cardContents = {
   typography: (
-    <div className="box-border flex w-min flex-col gap-2 p-2">
+    <div className="flex w-min flex-col gap-2 p-2">
       <img
         width="224"
         height="150"
@@ -20,7 +20,7 @@ const cardContents = {
     </div>
   ),
   design: (
-    <div className="box-border flex w-min flex-col gap-2 p-2">
+    <div className="flex w-min flex-col gap-2 p-2">
       <img
         width="241"
         height="240"
@@ -34,7 +34,7 @@ const cardContents = {
     </div>
   ),
   art: (
-    <div className="box-border flex w-min flex-col gap-2 p-2">
+    <div className="flex w-min flex-col gap-2 p-2">
       <img
         width="206"
         height="240"
@@ -99,7 +99,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
         </p>
         <button
           type="button"
-          className="box-border flex h-10 items-center justify-center border border-neutral-950 bg-white px-3.5 font-[inherit] text-base font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-10 items-center justify-center border border-neutral-950 bg-white px-3.5 font-[inherit] text-base font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
@@ -121,8 +121,8 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)]"
             >
-              <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
-                <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
+              <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+                <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
                 {payload}
               </PreviewCard.Popup>
             </PreviewCard.Positioner>
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
index dc276d29ab3..32aa3a22c77 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
@@ -6,7 +6,7 @@ const demoPreviewCard = PreviewCard.createHandle<React.ReactElement>();
 
 const cardContents = {
   typography: (
-    <div className="box-border flex w-min flex-col gap-2 p-2">
+    <div className="flex w-min flex-col gap-2 p-2">
       <img
         width="224"
         height="150"
@@ -20,7 +20,7 @@ const cardContents = {
     </div>
   ),
   design: (
-    <div className="box-border flex w-min flex-col gap-2 p-2">
+    <div className="flex w-min flex-col gap-2 p-2">
       <img
         width="250"
         height="249"
@@ -34,7 +34,7 @@ const cardContents = {
     </div>
   ),
   art: (
-    <div className="box-border flex w-min flex-col gap-2 p-2">
+    <div className="flex w-min flex-col gap-2 p-2">
       <img
         width="250"
         height="290"
@@ -94,7 +94,7 @@ export default function PreviewCardDetachedTriggersFullDemo() {
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]"
             >
               <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[width,height,opacity,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
-                <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
+                <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
 
                 <PreviewCard.Viewport className="relative overflow-clip w-full h-full [&_[data-previous]]:w-[var(--popup-width)] [&_[data-previous]]:translate-x-0 [&_[data-previous]]:opacity-100 [&_[data-previous]]:transition-[translate,opacity] [&_[data-previous]]:duration-[350ms,175ms] [&_[data-previous]]:ease-[cubic-bezier(0.22,1,0.36,1)] [&_[data-current]]:w-[var(--popup-width)] [&_[data-current]]:translate-x-0 [&_[data-current]]:opacity-100 [&_[data-current]]:transition-[translate,opacity] [&_[data-current]]:duration-[350ms,175ms] [&_[data-current]]:ease-[cubic-bezier(0.22,1,0.36,1)] data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:-translate-x-[30%] data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:opacity-0 data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:translate-x-[30%] data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:opacity-0 data-[activation-direction~='left']:[&_[data-previous][data-ending-style]]:translate-x-[30%] data-[activation-direction~='left']:[&_[data-previous][data-ending-style]]:opacity-0 data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:-translate-x-[30%] data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:opacity-0">
                   {payload}
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
index 411569f5ee1..b29da3b77cc 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
@@ -21,9 +21,9 @@ export default function PreviewCardDetachedTriggersSimpleDemo() {
       <PreviewCard.Root handle={demoPreviewCard}>
         <PreviewCard.Portal>
           <PreviewCard.Positioner sideOffset={8}>
-            <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
-              <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
-              <div className="box-border flex w-min flex-col gap-2 p-2">
+            <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+              <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
+              <div className="flex w-min flex-col gap-2 p-2">
                 <img
                   width="224"
                   height="150"
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
index da022b881bc..2e449f504a1 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
@@ -16,9 +16,9 @@ export default function ExamplePreviewCard() {
 
       <PreviewCard.Portal>
         <PreviewCard.Positioner sideOffset={8}>
-          <PreviewCard.Popup className="relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
-            <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:box-border before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
-            <div className="box-border flex w-min flex-col gap-2 p-2">
+          <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+            <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
+            <div className="flex w-min flex-col gap-2 p-2">
               <img
                 width="224"
                 height="150"
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
index 85912715167..9ff3f40a14d 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function ExampleScrollAreaBoth() {
   return (
     <ScrollArea.Root className="h-80 w-80 max-w-[calc(100vw-8rem)]">
-      <ScrollArea.Viewport className="box-border h-full border border-neutral-950 dark:border-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <ScrollArea.Viewport className="h-full border border-neutral-950 dark:border-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         <ScrollArea.Content className="pt-3 pr-6 pb-6 pl-3">
           <ul className="m-0 grid list-none grid-cols-[repeat(10,6.25rem)] grid-rows-[repeat(10,6.25rem)] gap-3 p-0">
             {Array.from({ length: 100 }, (_, i) => (
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
index 2681bfc2d96..aebc85f917a 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function ExampleScrollArea() {
   return (
     <ScrollArea.Root className="h-[8.5rem] w-96 max-w-[calc(100vw-8rem)] bg-white dark:bg-neutral-950">
-      <ScrollArea.Viewport className="box-border h-full border border-neutral-950 dark:border-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <ScrollArea.Viewport className="h-full border border-neutral-950 dark:border-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         <ScrollArea.Content className="flex flex-col gap-4 py-2 pr-5 pl-3 text-sm leading-[1.375rem] text-neutral-950 dark:text-white">
           <p>
             Vernacular architecture is building done outside any academic tradition, and without
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
index e46ea25cb9d..7be8bbce965 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
@@ -2,7 +2,7 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 
 export default function ExampleScrollAreaScrollFade() {
   return (
-    <ScrollArea.Root className="box-border h-48 w-96 max-w-[calc(100vw-8rem)] bg-neutral-100 dark:bg-neutral-800">
+    <ScrollArea.Root className="h-48 w-96 max-w-[calc(100vw-8rem)] bg-neutral-100 dark:bg-neutral-800">
       <ScrollArea.Viewport className="h-full bg-neutral-100 dark:bg-neutral-800 mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] mask-no-repeat focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         <ScrollArea.Content className="flex flex-col gap-4 py-2 pr-5 pl-3 text-sm leading-[1.375rem] text-neutral-950 dark:text-white">
           <p>
diff --git a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx
index 86fa58a0bf8..a71ebd023e8 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function EdgeAlignedThumb() {
       <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
         <Slider.Track className="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800">
           <Slider.Indicator className="bg-neutral-950 select-none dark:bg-white" />
-          <Slider.Thumb className="box-border size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950" />
+          <Slider.Thumb className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950" />
         </Slider.Track>
       </Slider.Control>
     </Slider.Root>
diff --git a/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx
index 130e74efad8..837c2a234e0 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleSlider() {
           <Slider.Indicator className="bg-neutral-950 select-none dark:bg-white" />
           <Slider.Thumb
             aria-label="Volume"
-            className="box-border size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950"
+            className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950"
           />
         </Slider.Track>
       </Slider.Control>
diff --git a/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx
index 051e408654e..6e0158d0896 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx
@@ -9,12 +9,12 @@ export default function RangeSlider() {
           <Slider.Thumb
             index={0}
             aria-label="Minimum value"
-            className="box-border size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950"
+            className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950"
           />
           <Slider.Thumb
             index={1}
             aria-label="Maximum value"
-            className="box-border size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950"
+            className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950"
           />
         </Slider.Track>
       </Slider.Control>
diff --git a/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx
index 8dea7b47b9a..f599f735618 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function VerticalSlider() {
           <Slider.Indicator className="bg-neutral-950 select-none dark:bg-white" />
           <Slider.Thumb
             aria-label="Volume"
-            className="box-border size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950"
+            className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950"
           />
         </Slider.Track>
       </Slider.Control>
diff --git a/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
index 7c4ecbc6336..f871469dc4d 100644
--- a/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
@@ -5,7 +5,7 @@ export default function ExampleSwitch() {
     <label className="flex items-center gap-2 text-sm font-normal text-neutral-900 dark:text-neutral-50">
       <Switch.Root
         defaultChecked
-        className="box-border flex h-5 w-9 shrink-0 border border-neutral-900 bg-neutral-50 p-0.5 dark:border-neutral-50 dark:bg-neutral-900 data-checked:bg-neutral-900 dark:data-checked:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-5 w-9 shrink-0 border border-neutral-900 bg-neutral-50 p-0.5 dark:border-neutral-50 dark:bg-neutral-900 data-checked:bg-neutral-900 dark:data-checked:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
       >
         <Switch.Thumb className="size-3.5 bg-neutral-900 transition-transform duration-150 data-checked:translate-x-4 data-checked:bg-neutral-50 dark:bg-neutral-50 dark:data-checked:bg-neutral-900" />
       </Switch.Root>
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
index f5a77005f60..72f352d3cf3 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -15,7 +15,7 @@ const popupClass =
   'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
 
 const arrowClass =
-  "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
+  "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
 
 export default function TooltipDetachedTriggersControlledDemo() {
   const [open, setOpen] = React.useState(false);
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
index e427298b7af..f5257e3381d 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
@@ -6,10 +6,10 @@ import { InfoIcon, HelpIcon, AlertIcon } from '../../icons-tw';
 const demoTooltip = Tooltip.createHandle<React.ComponentType>();
 
 const triggerClass =
-  'box-border flex size-8 items-center justify-center border border-neutral-950 bg-white text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
+  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const arrowClass =
-  "relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
+  "relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
 
 export default function TooltipDetachedTriggersFullDemo() {
   return (
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
index 7caaf643c8e..1b6aa13dbbe 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
@@ -12,7 +12,7 @@ const popupClass =
   'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
 
 const arrowClass =
-  "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
+  "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
 
 export default function TooltipDetachedTriggersSimpleDemo() {
   return (
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
index 8e7ab0c50e8..2271bb5bf4b 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
@@ -8,7 +8,7 @@ const popupClass =
   'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
 
 const arrowClass =
-  "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:box-border before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
+  "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
 
 export default function ExampleTooltip() {
   return (
diff --git a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/tailwind/index.tsx
index d437946a359..a4cccc195e1 100644
--- a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleDirectionProvider() {
           <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
             <Slider.Track className="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800">
               <Slider.Indicator className="bg-neutral-950 select-none dark:bg-white" />
-              <Slider.Thumb className="box-border size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950" />
+              <Slider.Thumb className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950" />
             </Slider.Track>
           </Slider.Control>
         </Slider.Root>

From aa637abae68e0e26f3770996ff494382f33abfdb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 5 May 2026 15:21:45 +0200
Subject: [PATCH 120/257] Autocomplete: improve spinner

---
 .../demos/async/css-modules/index.module.css      | 15 ++++++---------
 .../demos/async/css-modules/index.tsx             |  2 +-
 .../autocomplete/demos/async/tailwind/index.tsx   |  4 ++--
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
index 2a016ad1b0b..881859a2d66 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
@@ -111,18 +111,15 @@
 
 .Spinner {
   box-sizing: border-box;
-  width: 1rem;
-  height: 1rem;
-  border: 2px solid light-dark(var(--color-neutral-200), var(--color-neutral-800));
-  border-top: 2px solid var(--color-neutral-600);
+  width: 0.75rem;
+  height: 0.75rem;
   border-radius: 50%;
-  animation: spin 1s linear infinite;
+  border: 1px solid currentColor;
+  border-right-color: transparent;
+  animation: autocompleteSpinner 0.75s linear infinite;
 }
 
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
+@keyframes autocompleteSpinner {
   100% {
     transform: rotate(360deg);
   }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.tsx
index 0ddfec204d1..fbc3e82674c 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.tsx
@@ -18,7 +18,7 @@ export default function ExampleAsyncAutocomplete() {
     if (isPending) {
       return (
         <React.Fragment>
-          <div className={styles.Spinner} aria-hidden />
+          <span className={styles.Spinner} aria-hidden />
           Searching…
         </React.Fragment>
       );
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
index 86df2f07bee..ff427441348 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
@@ -17,8 +17,8 @@ export default function ExampleAsyncAutocomplete() {
     if (isPending) {
       return (
         <React.Fragment>
-          <div
-            className="size-4 animate-spin rounded-full border-2 border-neutral-300 border-t-neutral-600 dark:border-neutral-800 dark:border-t-neutral-400"
+          <span
+            className="inline-block size-3 animate-spin rounded-full border border-current border-r-transparent rtl:border-r-current rtl:border-l-transparent"
             aria-hidden
           />
           Searching…

From a895340c00076faa196e745f8e7c698b0e51947c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 5 May 2026 15:24:03 +0200
Subject: [PATCH 121/257] Combobox: remove unnecessary code

---
 .../demos/async-multiple/css-modules/index.module.css        | 5 -----
 .../combobox/demos/async-multiple/tailwind/index.tsx         | 2 +-
 .../combobox/demos/async-single/css-modules/index.module.css | 5 -----
 .../combobox/demos/async-single/tailwind/index.tsx           | 2 +-
 4 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
index 8e43d054651..077f09a3863 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
@@ -186,11 +186,6 @@
   animation: comboboxSpinner 0.75s linear infinite;
 }
 
-.Spinner:dir(rtl) {
-  border-right-color: currentColor;
-  border-left-color: transparent;
-}
-
 @keyframes comboboxSpinner {
   100% {
     transform: rotate(360deg);
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index ac990b711ae..e1f794173f7 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -42,7 +42,7 @@ export default function ExampleAsyncMultipleCombobox() {
         <React.Fragment>
           <span
             aria-hidden
-            className="inline-block size-3 animate-[spin_0.75s_linear_infinite] rounded-full border border-current border-r-transparent rtl:border-r-current rtl:border-l-transparent"
+            className="inline-block size-3 animate-[spin_0.75s_linear_infinite] rounded-full border border-current border-r-transparent"
           />
           Searching…
         </React.Fragment>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
index 268628ca42a..369b68440c0 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
@@ -147,11 +147,6 @@
   animation: comboboxSpinner 0.75s linear infinite;
 }
 
-.Spinner:dir(rtl) {
-  border-right-color: currentColor;
-  border-left-color: transparent;
-}
-
 @keyframes comboboxSpinner {
   100% {
     transform: rotate(360deg);
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index 48ac6acfe3d..3ce1061fea8 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -31,7 +31,7 @@ export default function ExampleAsyncSingleCombobox() {
         <React.Fragment>
           <span
             aria-hidden
-            className="inline-block size-3 animate-spin rounded-full border border-current border-r-transparent rtl:border-r-current rtl:border-l-transparent"
+            className="inline-block size-3 animate-spin rounded-full border border-current border-r-transparent"
           />
           Searching…
         </React.Fragment>

From 6ae0b1e6764c2a045c7e9bc783185eaf2e081340 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 5 May 2026 15:24:25 +0200
Subject: [PATCH 122/257] Prettier

---
 .../react/components/checkbox/demos/hero/tailwind/index.tsx      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
index 7ef6c865b3e..d9551b61396 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
@@ -26,7 +26,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       fill="none"
       stroke="currentColor"
       strokeWidth="2"
-
       {...props}
     >
       <path d="M20 6 9 17l-5-5" />

From 81901280684b0392a0eb038d35b628fe464d526a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 5 May 2026 15:26:01 +0200
Subject: [PATCH 123/257] Autocomplete: tweak color

---
 .../autocomplete/demos/async/css-modules/index.module.css     | 2 +-
 .../components/autocomplete/demos/async/tailwind/index.tsx    | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
index 881859a2d66..0bd0a8b9ee7 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
@@ -95,7 +95,7 @@
 .MovieYear {
   font-size: 0.875rem;
   line-height: 1rem;
-  opacity: 0.8;
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
 
 .Status {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
index ff427441348..55efdec5317 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
@@ -107,7 +107,9 @@ export default function ExampleAsyncAutocomplete() {
                 >
                   <span className="flex w-full flex-col gap-1">
                     <span className="font-bold leading-5">{movie.title}</span>
-                    <span className="text-sm leading-4 opacity-80">{movie.year}</span>
+                    <span className="text-sm leading-4 text-neutral-500 dark:text-neutral-400">
+                      {movie.year}
+                    </span>
                   </span>
                 </Autocomplete.Item>
               )}

From cb502137045329217fb751e0baffa1c4dab5b883 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 5 May 2026 15:40:18 +0200
Subject: [PATCH 124/257] Combobox: give some love to complex items

---
 .../async-multiple/css-modules/index.module.css      | 10 +++-------
 .../demos/async-multiple/css-modules/index.tsx       |  4 ++--
 .../combobox/demos/async-multiple/tailwind/index.tsx | 10 ++++------
 .../demos/async-single/css-modules/index.module.css  | 12 ++++--------
 .../demos/async-single/css-modules/index.tsx         |  4 ++--
 .../combobox/demos/async-single/tailwind/index.tsx   |  8 ++++----
 6 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
index 077f09a3863..6ecd5f1b807 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
@@ -252,7 +252,8 @@
 }
 
 .ItemTitle {
-  font-size: 0.95rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
@@ -260,15 +261,10 @@
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
-  font-size: 0.8125rem;
+  font-size: 0.75rem;
   color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
 
-.ItemUsername {
-  opacity: 0.8;
-}
-
 .ItemEmail {
   font-size: 0.75rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
index d1f37073a8c..396f7532293 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
@@ -181,11 +181,11 @@ export default function ExampleAsyncMultipleCombobox() {
                   </Combobox.ItemIndicator>
                   <span className={styles.ItemText}>
                     <span className={styles.ItemTitle}>{user.name}</span>
+                    <span className={styles.ItemEmail}>{user.email}</span>
                     <span className={styles.ItemSubtitle}>
-                      <span className={styles.ItemUsername}>@{user.username}</span>
+                      <span>@{user.username}</span>
                       <span>{user.title}</span>
                     </span>
-                    <span className={styles.ItemEmail}>{user.email}</span>
                   </span>
                 </Combobox.Item>
               )}
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index e1f794173f7..1d0dba69dc5 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -204,14 +204,12 @@ export default function ExampleAsyncMultipleCombobox() {
                     <CheckIcon className="size-3" />
                   </Combobox.ItemIndicator>
                   <span className="col-start-2 flex flex-col gap-1">
-                    <span className="text-[0.95rem] font-bold">{user.name}</span>
-                    <span className="flex flex-wrap gap-2 text-[0.8125rem] text-neutral-500 dark:text-neutral-400">
-                      <span className="opacity-80">@{user.username}</span>
+                    <span className="text-sm leading-5 font-bold">{user.name}</span>
+                    <span className="text-xs">{user.email}</span>
+                    <span className="flex flex-wrap gap-2 text-xs text-neutral-500 dark:text-neutral-400">
+                      <span>@{user.username}</span>
                       <span>{user.title}</span>
                     </span>
-                    <span className="text-xs text-neutral-500 dark:text-neutral-400">
-                      {user.email}
-                    </span>
                   </span>
                 </Combobox.Item>
               )}
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
index 369b68440c0..8167045a0f8 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
@@ -205,25 +205,21 @@
 }
 
 .ItemTitle {
-  font-size: 0.95rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 700;
 }
 
 .ItemSubtitle {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.75rem;
-  font-size: 0.8125rem;
+  gap: 0.5rem;
+  font-size: 0.75rem;
   color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
 
-.ItemUsername {
-  opacity: 0.8;
-}
-
 .ItemEmail {
   font-size: 0.75rem;
-  opacity: 0.8;
 }
 
 .Empty {
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
index 17c8392d9cf..83f9d32bb58 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
@@ -142,11 +142,11 @@ export default function ExampleAsyncSingleCombobox() {
                   </Combobox.ItemIndicator>
                   <span className={styles.ItemText}>
                     <span className={styles.ItemTitle}>{user.name}</span>
+                    <span className={styles.ItemEmail}>{user.email}</span>
                     <span className={styles.ItemSubtitle}>
-                      <span className={styles.ItemUsername}>@{user.username}</span>
+                      <span>@{user.username}</span>
                       <span>{user.title}</span>
                     </span>
-                    <span className={styles.ItemEmail}>{user.email}</span>
                   </span>
                 </Combobox.Item>
               )}
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index 3ce1061fea8..16806ffd239 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -167,12 +167,12 @@ export default function ExampleAsyncSingleCombobox() {
                     <CheckIcon className="size-3" />
                   </Combobox.ItemIndicator>
                   <span className="col-start-2 flex flex-col gap-1">
-                    <span className="text-[0.95rem] font-bold">{user.name}</span>
-                    <span className="flex flex-wrap gap-3 text-[0.8125rem] text-neutral-500 dark:text-neutral-400">
-                      <span className="opacity-80">@{user.username}</span>
+                    <span className="text-sm leading-5 font-bold">{user.name}</span>
+                    <span className="text-xs">{user.email}</span>
+                    <span className="flex flex-wrap gap-2 text-xs text-neutral-500 dark:text-neutral-400">
+                      <span>@{user.username}</span>
                       <span>{user.title}</span>
                     </span>
-                    <span className="text-xs opacity-80">{user.email}</span>
                   </span>
                 </Combobox.Item>
               )}

From 752f219d51c7a30fa183c0a04c110ad261aa4bca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 5 May 2026 16:10:58 +0200
Subject: [PATCH 125/257] All: transparent -> explicit bg color for all text
 nputs

---
 .../autocomplete/demos/async/css-modules/index.module.css   | 2 +-
 .../components/autocomplete/demos/async/tailwind/index.tsx  | 2 +-
 .../demos/auto-highlight/css-modules/index.module.css       | 2 +-
 .../autocomplete/demos/auto-highlight/tailwind/index.tsx    | 2 +-
 .../demos/command-palette/css-modules/index.module.css      | 2 +-
 .../autocomplete/demos/command-palette/tailwind/index.tsx   | 2 +-
 .../demos/fuzzy-matching/css-modules/index.module.css       | 2 +-
 .../autocomplete/demos/fuzzy-matching/tailwind/index.tsx    | 2 +-
 .../autocomplete/demos/grid/css-modules/index.module.css    | 4 ++--
 .../components/autocomplete/demos/grid/tailwind/index.tsx   | 4 ++--
 .../autocomplete/demos/grouped/css-modules/index.module.css | 2 +-
 .../autocomplete/demos/grouped/tailwind/index.tsx           | 2 +-
 .../autocomplete/demos/hero/css-modules/index.module.css    | 2 +-
 .../components/autocomplete/demos/hero/tailwind/index.tsx   | 2 +-
 .../autocomplete/demos/inline/css-modules/index.module.css  | 2 +-
 .../components/autocomplete/demos/inline/tailwind/index.tsx | 2 +-
 .../autocomplete/demos/limit/css-modules/index.module.css   | 2 +-
 .../components/autocomplete/demos/limit/tailwind/index.tsx  | 2 +-
 .../demos/virtualized/css-modules/index.module.css          | 2 +-
 .../autocomplete/demos/virtualized/tailwind/index.tsx       | 2 +-
 .../demos/async-multiple/css-modules/index.module.css       | 4 ++--
 .../combobox/demos/async-multiple/tailwind/index.tsx        | 4 ++--
 .../demos/async-single/css-modules/index.module.css         | 4 ++--
 .../combobox/demos/async-single/tailwind/index.tsx          | 4 ++--
 .../combobox/demos/creatable/css-modules/index.module.css   | 6 +++---
 .../components/combobox/demos/creatable/tailwind/index.tsx  | 6 +++---
 .../combobox/demos/grouped/css-modules/index.module.css     | 4 ++--
 .../components/combobox/demos/grouped/tailwind/index.tsx    | 4 ++--
 .../combobox/demos/hero/css-modules/index.module.css        | 4 ++--
 .../react/components/combobox/demos/hero/tailwind/index.tsx | 4 ++--
 .../demos/input-inside-popup/css-modules/index.module.css   | 2 +-
 .../combobox/demos/input-inside-popup/tailwind/index.tsx    | 2 +-
 .../combobox/demos/multiple/css-modules/index.module.css    | 4 ++--
 .../components/combobox/demos/multiple/tailwind/index.tsx   | 4 ++--
 .../combobox/demos/virtualized/css-modules/index.module.css | 2 +-
 .../combobox/demos/virtualized/tailwind/index.tsx           | 2 +-
 .../demos/close-confirmation/css-modules/index.module.css   | 2 +-
 .../dialog/demos/close-confirmation/tailwind/index.tsx      | 2 +-
 .../field/demos/hero/css-modules/index.module.css           | 2 +-
 .../react/components/field/demos/hero/tailwind/index.tsx    | 2 +-
 .../fieldset/demos/hero/css-modules/index.module.css        | 2 +-
 .../react/components/fieldset/demos/hero/tailwind/index.tsx | 4 ++--
 .../form/demos/form-action/css-modules/index.module.css     | 2 +-
 .../components/form/demos/form-action/tailwind/index.tsx    | 2 +-
 .../components/form/demos/hero/css-modules/index.module.css | 2 +-
 .../react/components/form/demos/hero/tailwind/index.tsx     | 2 +-
 .../components/form/demos/zod/css-modules/index.module.css  | 2 +-
 .../react/components/form/demos/zod/tailwind/index.tsx      | 4 ++--
 .../input/demos/hero/css-modules/index.module.css           | 2 +-
 .../react/components/input/demos/hero/tailwind/index.tsx    | 2 +-
 .../number-field/demos/hero/css-modules/index.module.css    | 2 +-
 .../components/number-field/demos/hero/tailwind/index.tsx   | 2 +-
 .../demos/alphanumeric/css-modules/index.module.css         | 2 +-
 .../otp-field/demos/alphanumeric/tailwind/index.tsx         | 2 +-
 .../demos/custom-sanitize/css-modules/index.module.css      | 2 +-
 .../demos/focused-placeholder/css-modules/index.module.css  | 2 +-
 .../otp-field/demos/focused-placeholder/tailwind/index.tsx  | 2 +-
 .../otp-field/demos/grouped/css-modules/index.module.css    | 2 +-
 .../components/otp-field/demos/grouped/tailwind/index.tsx   | 4 ++--
 .../otp-field/demos/hero/css-modules/index.module.css       | 2 +-
 .../components/otp-field/demos/hero/tailwind/index.tsx      | 2 +-
 .../otp-field/demos/password/css-modules/index.module.css   | 2 +-
 .../components/otp-field/demos/password/tailwind/index.tsx  | 2 +-
 63 files changed, 82 insertions(+), 82 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
index 0bd0a8b9ee7..55099b8b10e 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
@@ -8,7 +8,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
index 55efdec5317..34ef4c82c9a 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
@@ -81,7 +81,7 @@ export default function ExampleAsyncAutocomplete() {
         Search movies by name or year
         <Autocomplete.Input
           placeholder="e.g. Pulp Fiction or 1994"
-          className="h-8 w-[16rem] border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
index 08105e55359..90f2124ddb9 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
@@ -8,7 +8,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
index 0474958978f..0715bdc59e0 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleAutocompleteAutoHighlight() {
         Auto highlight on type
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="h-8 w-[16rem] border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
index 74358c9fea4..dd6e2b50973 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
@@ -100,7 +100,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   letter-spacing: 0.016em;
   outline: none;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
index d676a7c7cdb..68851a69c9a 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
@@ -31,7 +31,7 @@ export default function ExampleAutocompleteCommandPalette() {
               keepHighlight
             >
               <Autocomplete.Input
-                className="h-10 w-full border-0 border-b border-neutral-950 bg-transparent px-4 text-sm font-normal tracking-[0.016em] text-neutral-950 outline-none placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+                className="h-10 w-full border-0 border-b border-neutral-950 bg-white px-4 text-sm font-normal tracking-[0.016em] text-neutral-950 outline-none placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400"
                 placeholder="Search for apps and commands…"
               />
               <Dialog.Close className="sr-only">Close command palette</Dialog.Close>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
index 12c6d94f1d9..73c7029b192 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
@@ -18,7 +18,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
index 37a6ccf7f7f..70215a3e9cc 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleFuzzyMatchingAutocomplete() {
         Fuzzy search documentation
         <Autocomplete.Input
           placeholder="e.g. React"
-          className="h-8 w-[16rem] border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
index 3de15bf3cf9..777e2ac4579 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
@@ -21,7 +21,7 @@
   font-weight: 400;
   color: light-dark(var(--color-neutral-950), white);
   outline: none;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
 
   &:focus {
     position: relative;
@@ -120,7 +120,7 @@
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
index 53718b85ae6..51d7deb4828 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
@@ -35,7 +35,7 @@ export default function ExampleEmojiPicker() {
         <input
           ref={textInputRef}
           type="text"
-          className="-mr-px h-8 border border-r-0 border-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none bg-transparent focus:relative focus:outline-2 focus:-outline-offset-2 focus:outline-solid focus:outline-blue-800 dark:border-white dark:text-white"
+          className="-mr-px h-8 border border-r-0 border-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none bg-white dark:bg-neutral-950 focus:relative focus:outline-2 focus:-outline-offset-2 focus:outline-solid focus:outline-blue-800 dark:border-white dark:text-white"
           placeholder="iMessage"
           value={textValue}
           onChange={(event) => setTextValue(event.target.value)}
@@ -69,7 +69,7 @@ export default function ExampleEmojiPicker() {
                 <div className="relative z-[2] h-[var(--input-container-height)] w-64 bg-white dark:bg-neutral-950">
                   <Autocomplete.Input
                     placeholder="Search emojis…"
-                    className="h-8 w-full border-0 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-blue-800 dark:text-white"
+                    className="h-8 w-full border-0 bg-white px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-blue-800 dark:bg-neutral-950 dark:text-white"
                   />
                 </div>
                 <Autocomplete.Empty>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
index 0ac735960db..b08fbe1114c 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
@@ -8,7 +8,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
index 0680c999341..2d9ac5bf965 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleGroupAutocomplete() {
         Select a tag
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="h-8 w-[16rem] border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
index f5085467810..d5d9d58febd 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
@@ -8,7 +8,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
index 5ea789bfd22..3a86899fa49 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleAutocomplete() {
         Search tags
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="h-8 w-[16rem] border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
index 225b7ba0d86..64650a31fe0 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
@@ -14,7 +14,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
index 0fd97aafe21..d1b0cd84a5b 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleAutocompleteInline() {
         Search tags
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="h-8 w-[16rem] border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
index 58344f3a94c..92fc6ec61fa 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
@@ -8,7 +8,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
index 36723ade52a..72e7e54fd8f 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
@@ -25,7 +25,7 @@ export default function ExampleAutocompleteLimit() {
         Limit results to 8
         <Autocomplete.Input
           placeholder="e.g. component"
-          className="h-8 w-[16rem] border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
index 71634648dfe..63d3fad4060 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
@@ -8,7 +8,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
index 97b1adcf998..5828edc945f 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
@@ -32,7 +32,7 @@ export default function ExampleVirtualizedAutocomplete() {
     >
       <label className="flex flex-col gap-1 text-sm font-bold text-neutral-950 dark:text-white">
         Search 10,000 items
-        <Autocomplete.Input className="h-8 w-[16rem] border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white" />
+        <Autocomplete.Input className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white" />
       </label>
 
       <Autocomplete.Portal>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
index 6ecd5f1b807..3f1e2760887 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
@@ -22,7 +22,7 @@
   align-items: center;
   gap: 0.125rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   min-height: 2rem;
   padding: 0.25rem 0.5rem;
   width: 16rem;
@@ -121,7 +121,7 @@
   font-size: 0.875rem;
   line-height: 1;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   min-width: 3rem;
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index 1d0dba69dc5..2fb5fd8299d 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -141,7 +141,7 @@ export default function ExampleAsyncMultipleCombobox() {
         >
           Assign reviewers
         </label>
-        <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-transparent px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
+        <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
           <Combobox.Chips className="flex w-full flex-wrap items-center gap-1">
             <Combobox.Value>
               {(value: DirectoryUser[]) => (
@@ -164,7 +164,7 @@ export default function ExampleAsyncMultipleCombobox() {
                   <Combobox.Input
                     id={id}
                     placeholder={value.length > 0 ? '' : 'e.g. Michael'}
-                    className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-transparent p-0 text-sm leading-none font-normal text-neutral-950 outline-none dark:text-white"
+                    className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-white p-0 text-sm dark:bg-neutral-950 leading-none font-normal text-neutral-950 outline-none dark:text-white"
                   />
                 </React.Fragment>
               )}
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
index 8167045a0f8..ac5fa4e6671 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
@@ -15,7 +15,7 @@
   width: 16rem;
   height: 2rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
 
   &:focus-within {
     outline: 2px solid var(--color-blue-800);
@@ -42,7 +42,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
 
   &:focus {
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index 16806ffd239..fdc199eba78 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -113,11 +113,11 @@ export default function ExampleAsyncSingleCombobox() {
     >
       <div className="relative flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         <label htmlFor={id}>Assign reviewer</label>
-        <Combobox.InputGroup className="relative h-8 w-64 border border-neutral-950 bg-transparent focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 dark:border-white md:w-80 [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
+        <Combobox.InputGroup className="relative h-8 w-64 border border-neutral-950 bg-white dark:bg-neutral-950 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 dark:border-white md:w-80 [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
           <Combobox.Input
             id={id}
             placeholder="e.g. Michael"
-            className="h-full w-full border-0 bg-transparent pl-2 text-sm font-normal text-neutral-950 outline-none dark:text-white"
+            className="h-full w-full border-0 bg-white pl-2 dark:bg-neutral-950 text-sm font-normal text-neutral-950 outline-none dark:text-white"
           />
           <div className="absolute right-0 bottom-0 flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
             <Combobox.Clear
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
index bcc1e385bff..8692eb6965e 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
@@ -22,7 +22,7 @@
   align-items: center;
   gap: 0.125rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   min-height: 2rem;
   padding: 0.25rem 0.5rem;
   width: 16rem;
@@ -121,7 +121,7 @@
   font-size: 0.875rem;
   line-height: 1;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   min-width: 3rem;
 
@@ -324,7 +324,7 @@
   width: 100%;
   height: 2rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   padding-inline: 0.5rem;
   font-family: inherit;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
index d1d9006dc55..016768d0f8e 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
@@ -128,7 +128,7 @@ export default function ExampleCreatableCombobox() {
           >
             Labels
           </label>
-          <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-transparent px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
+          <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
             <Combobox.Chips className="flex w-full flex-wrap items-center gap-1">
               <Combobox.Value>
                 {(value: LabelItem[]) => (
@@ -152,7 +152,7 @@ export default function ExampleCreatableCombobox() {
                       ref={comboboxInputRef}
                       id={id}
                       placeholder={value.length > 0 ? '' : 'e.g. bug'}
-                      className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-transparent p-0 text-sm leading-none font-normal text-neutral-950 outline-none dark:text-white"
+                      className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-white p-0 text-sm dark:bg-neutral-950 leading-none font-normal text-neutral-950 outline-none dark:text-white"
                       onKeyDown={handleInputKeyDown}
                     />
                   </React.Fragment>
@@ -216,7 +216,7 @@ export default function ExampleCreatableCombobox() {
             <form onSubmit={handleCreateSubmit}>
               <input
                 ref={createInputRef}
-                className="h-8 w-full border border-neutral-950 bg-transparent px-2 text-sm leading-5 font-normal text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:text-white"
+                className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm leading-5 font-normal text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:text-white"
                 placeholder="Label name"
                 defaultValue={pendingQueryRef.current}
               />
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
index f48da857fff..be77e0cd8a7 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
@@ -4,7 +4,7 @@
   width: 16rem;
   height: 2rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
 
   &:focus-within {
     outline: 2px solid var(--color-blue-800);
@@ -27,7 +27,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index aa68efdabc5..dd6d1b61122 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -8,11 +8,11 @@ export default function ExampleGroupedCombobox() {
     <Combobox.Root items={groupedProduce}>
       <div className="relative flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         <label htmlFor={id}>Select produce</label>
-        <Combobox.InputGroup className="relative h-8 w-64 border border-neutral-950 bg-transparent focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 dark:border-white [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
+        <Combobox.InputGroup className="relative h-8 w-64 border border-neutral-950 bg-white dark:bg-neutral-950 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 dark:border-white [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
           <Combobox.Input
             placeholder="e.g. Mango"
             id={id}
-            className="h-full w-full border-0 bg-transparent pl-2 text-sm font-normal text-neutral-950 outline-none dark:text-white"
+            className="h-full w-full border-0 bg-white pl-2 dark:bg-neutral-950 text-sm font-normal text-neutral-950 outline-none dark:text-white"
           />
           <div className="absolute right-0 bottom-0 flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
             <Combobox.Clear
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
index 100f893ee5f..ec0ba12f1fe 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
@@ -4,7 +4,7 @@
   width: 14rem;
   height: 2rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
 
   &:focus-within {
     outline: 2px solid var(--color-blue-800);
@@ -27,7 +27,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
 
   &:focus {
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
index 0e0ae5b1e94..ae65b985970 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
@@ -8,11 +8,11 @@ export default function ExampleCombobox() {
     <Combobox.Root items={fruits}>
       <div className="relative flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         <label htmlFor={id}>Choose a fruit</label>
-        <Combobox.InputGroup className="relative h-8 w-56 border border-neutral-950 bg-transparent focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 dark:border-white [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
+        <Combobox.InputGroup className="relative h-8 w-56 border border-neutral-950 bg-white dark:bg-neutral-950 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 dark:border-white [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
           <Combobox.Input
             placeholder="e.g. Apple"
             id={id}
-            className="h-full w-full border-0 bg-transparent pl-2 text-sm font-normal text-neutral-950 outline-none dark:text-white"
+            className="h-full w-full border-0 bg-white pl-2 dark:bg-neutral-950 text-sm font-normal text-neutral-950 outline-none dark:text-white"
           />
           <div className="absolute right-0 bottom-0 flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
             <Combobox.Clear
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
index 66120e07b84..6a9618ab6b1 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
@@ -74,7 +74,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index 7a2aaad0b6c..59e0fc6a658 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -28,7 +28,7 @@ export default function ExamplePopoverCombobox() {
               <div className="h-[var(--input-container-height)] w-80 bg-white text-center dark:bg-neutral-950">
                 <Combobox.Input
                   placeholder="e.g. United Kingdom"
-                  className="h-8 w-full min-w-72 border-0 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 dark:text-white"
+                  className="h-8 w-full min-w-72 border-0 bg-white px-2 dark:bg-neutral-950 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 dark:text-white"
                 />
               </div>
               <Combobox.Empty>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
index 597aebdfd9f..71f074ed185 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
@@ -22,7 +22,7 @@
   align-items: center;
   gap: 0.125rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   min-height: 2rem;
   padding: 0.25rem 0.5rem;
   width: 16rem;
@@ -134,7 +134,7 @@
   font-size: 0.875rem;
   line-height: 1;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   min-width: 3rem;
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
index 5ff0a4df3eb..d9ff6b7320d 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleMultipleCombobox() {
         >
           Programming languages
         </label>
-        <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-transparent px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
+        <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
           <Combobox.Chips className="flex w-full flex-wrap items-center gap-1">
             <Combobox.Value>
               {(value: ProgrammingLanguage[]) => (
@@ -37,7 +37,7 @@ export default function ExampleMultipleCombobox() {
                   <Combobox.Input
                     id={id}
                     placeholder={value.length > 0 ? '' : 'e.g. TypeScript'}
-                    className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-transparent p-0 text-sm leading-none font-normal text-neutral-950 outline-none dark:text-white"
+                    className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-white p-0 text-sm dark:bg-neutral-950 leading-none font-normal text-neutral-950 outline-none dark:text-white"
                   />
                 </React.Fragment>
               )}
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
index 97bf9c8c699..4ebce1b0b8d 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
@@ -8,7 +8,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   outline: none;
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
index e93e93a067a..cf959c9f23e 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
@@ -34,7 +34,7 @@ export default function ExampleVirtualizedCombobox() {
     >
       <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         Search 10,000 items
-        <Combobox.Input className="h-8 w-64 border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white" />
+        <Combobox.Input className="h-8 w-64 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white" />
       </label>
 
       <Combobox.Portal>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
index 50a3293cbea..bc4d4edbfc1 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
@@ -138,7 +138,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
 
   &::placeholder {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
index 96e92b170de..f92c0aaba92 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
@@ -44,7 +44,7 @@ export default function ExampleDialog() {
             <textarea
               aria-labelledby={titleId}
               required
-              className="min-h-32 w-full border border-neutral-950 dark:border-white bg-transparent px-2 py-2 text-sm font-normal text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800"
+              className="min-h-32 w-full border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-2 py-2 text-sm font-normal text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800"
               placeholder="What’s on your mind?"
               value={textareaValue}
               onChange={(event) => setTextareaValue(event.target.value)}
diff --git a/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
index 113000982e9..3f5b42e4aa2 100644
--- a/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
@@ -24,7 +24,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
 
   &::placeholder {
diff --git a/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
index c2f0f7d7922..57f7c509d22 100644
--- a/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleField() {
       <Field.Control
         required
         placeholder="Required"
-        className="h-8 self-stretch border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+        className="h-8 self-stretch border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
       />
       <Field.Error className="text-sm text-red-700 dark:text-red-400" match="valueMissing">
         Please enter your name
diff --git a/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
index e5647f0a9b8..2f7e666c776 100644
--- a/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
@@ -41,7 +41,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
 
   &::placeholder {
diff --git a/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx
index 0836a04fd61..5c4da40a21f 100644
--- a/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleField() {
         </Field.Label>
         <Field.Control
           placeholder="Enter company name"
-          className="h-8 w-full border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
       </Field.Root>
 
@@ -24,7 +24,7 @@ export default function ExampleField() {
         </Field.Label>
         <Field.Control
           placeholder="Enter fiscal number"
-          className="h-8 w-full border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
       </Field.Root>
     </Fieldset.Root>
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
index c8b8001b8c5..15c16945550 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
@@ -30,7 +30,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
 
   &::placeholder {
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
index e8476f9bd4f..bc84f8aa50a 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
@@ -26,7 +26,7 @@ export default function ActionStateForm() {
           required
           defaultValue="admin"
           placeholder="e.g. alice132"
-          className="h-8 w-full border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
index c8b8001b8c5..15c16945550 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
@@ -30,7 +30,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
 
   &::placeholder {
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
index b69522608c6..e08ee334dbb 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
@@ -37,7 +37,7 @@ export default function ExampleForm() {
           defaultValue="https://example.com"
           placeholder="https://example.com"
           pattern="https?://.*"
-          className="h-8 w-full border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
index c8b8001b8c5..15c16945550 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
@@ -30,7 +30,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
 
   &::placeholder {
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
index 4fa4381cec2..4f1b3846a22 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
@@ -42,7 +42,7 @@ export default function Page() {
         </Field.Label>
         <Field.Control
           placeholder="Enter name"
-          className="h-8 w-full border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
@@ -52,7 +52,7 @@ export default function Page() {
         </Field.Label>
         <Field.Control
           placeholder="Enter age"
-          className="h-8 w-full border border-neutral-950 bg-transparent px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
diff --git a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
index b3eba31605b..5e8923a4821 100644
--- a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
@@ -19,7 +19,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
 
   &::placeholder {
diff --git a/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
index c8156e7ca14..e3ff5f0affb 100644
--- a/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleInput() {
       Name
       <Input
         placeholder="e.g. Colm Tuite"
-        className="h-8 w-40 border border-neutral-950 dark:border-white bg-transparent px-2 text-sm font-normal text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800"
+        className="h-8 w-40 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800"
       />
     </label>
   );
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
index c0f75f1854f..b0ae5c8c2b5 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
@@ -41,7 +41,7 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
 
   text-align: left;
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
index 276ad616b0c..dc32d924004 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleNumberField() {
         <NumberField.Decrement className={stepperClasses}>
           <MinusIcon className="size-3" />
         </NumberField.Decrement>
-        <NumberField.Input className="h-full w-[7ch] border-y border-neutral-950 rounded-none bg-transparent px-3 text-left text-sm font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white" />
+        <NumberField.Input className="h-full w-[7ch] border-y border-neutral-950 rounded-none bg-white dark:bg-neutral-950 px-3 text-left text-sm font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white" />
         <NumberField.Increment className={stepperClasses}>
           <PlusIcon className="size-3" />
         </NumberField.Increment>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
index 310241787c3..6b2910e458c 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
@@ -31,7 +31,7 @@
   font-size: 1rem;
   font-weight: 400;
   text-align: center;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
 
   &:focus {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
index 3cc756ef647..2ebc7f1aa33 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
@@ -22,7 +22,7 @@ export default function OTPFieldAlphanumericDemo() {
         {Array.from({ length: CODE_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
             aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
           />
         ))}
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
index c08b5f197d2..8e2f83523a3 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
@@ -31,7 +31,7 @@
   font-size: 1rem;
   font-weight: 400;
   text-align: center;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
 
   &:focus {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
index aa49aa21a92..5d986258ec8 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
@@ -31,7 +31,7 @@
   font-size: 1rem;
   font-weight: 400;
   text-align: center;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
 
   &::placeholder {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
index 94df949fe00..0e0a5b6e068 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
@@ -21,7 +21,7 @@ export default function OTPFieldFocusedPlaceholderDemo() {
         {Array.from({ length: CODE_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 focus:placeholder:text-transparent dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 focus:placeholder:text-transparent dark:border-white dark:text-white dark:placeholder:text-neutral-400"
             placeholder="•"
             aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
           />
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
index 2b0b4e94a54..22539771b6a 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
@@ -37,7 +37,7 @@
   font-size: 1rem;
   font-weight: 400;
   text-align: center;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
 
   &:focus {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
index 34098b3f6a4..7d3ca7dfec6 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function OTPFieldGroupedDemo() {
           {Array.from({ length: 3 }, (_, index) => (
             <OTPField.Input
               key={index}
-              className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+              className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
               aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}
             />
           ))}
@@ -26,7 +26,7 @@ export default function OTPFieldGroupedDemo() {
           {Array.from({ length: 3 }, (_, index) => (
             <OTPField.Input
               key={index + 3}
-              className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+              className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
               aria-label={`Character ${index + 4} of ${OTP_LENGTH}`}
             />
           ))}
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
index fbc7aae5074..b64524f186c 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
@@ -31,7 +31,7 @@
   font-size: 1rem;
   font-weight: 400;
   text-align: center;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
 
   &:focus {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
index 3bd140c6f6b..0a7ffe965a1 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
@@ -21,7 +21,7 @@ export default function ExampleOTPField() {
         {Array.from({ length: OTP_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
             aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}
           />
         ))}
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
index 310241787c3..6b2910e458c 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
@@ -31,7 +31,7 @@
   font-size: 1rem;
   font-weight: 400;
   text-align: center;
-  background-color: transparent;
+  background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
 
   &:focus {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
index f3514a5b28a..1ef96a282ad 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
@@ -22,7 +22,7 @@ export default function OTPFieldPasswordDemo() {
         {Array.from({ length: CODE_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-transparent text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
             aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
           />
         ))}

From d75c7417a7381f06ccfbd4f52bc71c3e9d536775 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 5 May 2026 18:08:24 +0200
Subject: [PATCH 126/257] Animation handbook page brutalist

---
 .../css-modules/index.module.css              |  46 ++++----
 .../css-modules/index.module.css              |  46 ++++----
 .../css-modules/index.module.css              | 102 +++++++-----------
 .../css-modules/index.tsx                     |   2 +-
 4 files changed, 82 insertions(+), 114 deletions(-)

diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css
index cd0966e32d6..756c6600aef 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css
@@ -3,37 +3,36 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-neutral-50);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-neutral-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-100);
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -45,25 +44,20 @@
 
 .Popup {
   box-sizing: border-box;
-  padding: 1rem 1.5rem;
-  border-radius: 0.5rem;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  padding: 0.75rem 1rem;
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   transform-origin: var(--transform-origin);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   width: var(--popup-width, auto);
   height: var(--popup-height, auto);
   max-width: 500px;
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-neutral-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-neutral-200),
-      0 4px 6px -4px var(--color-neutral-200);
-  }
-
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
-    outline-offset: -1px;
+    box-shadow: none;
   }
 }
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css
index cd0966e32d6..756c6600aef 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css
@@ -3,37 +3,36 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
-  background-color: var(--color-neutral-50);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.5rem;
-  color: var(--color-neutral-900);
+  line-height: 1.25rem;
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-100);
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -45,25 +44,20 @@
 
 .Popup {
   box-sizing: border-box;
-  padding: 1rem 1.5rem;
-  border-radius: 0.5rem;
-  background-color: canvas;
-  color: var(--color-neutral-900);
+  padding: 0.75rem 1rem;
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   transform-origin: var(--transform-origin);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   width: var(--popup-width, auto);
   height: var(--popup-height, auto);
   max-width: 500px;
 
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-neutral-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-neutral-200),
-      0 4px 6px -4px var(--color-neutral-200);
-  }
-
   @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
-    outline-offset: -1px;
+    box-shadow: none;
   }
 }
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
index 25e438ed52c..2f63434e548 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
@@ -4,35 +4,38 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  height: 2.5rem;
-  padding-left: 0.875rem;
-  padding-right: 0.75rem;
+  height: 2rem;
+  padding-left: 0.75rem;
+  padding-right: 0.5rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 0.375rem;
-  background-color: canvas;
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  color: var(--color-neutral-900);
-  -webkit-user-select: none;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  color: light-dark(var(--color-neutral-950), white);
   user-select: none;
   min-width: 9rem;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+  }
+
+  &:active {
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
-    outline-offset: -1px;
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
   }
 }
 
@@ -40,35 +43,33 @@
   display: flex;
 }
 
+.Value[data-placeholder] {
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+}
+
 .Positioner {
   outline: none;
-  z-index: 1;
-  -webkit-user-select: none;
+  z-index: 10;
   user-select: none;
 }
 
 .Popup {
   box-sizing: border-box;
-  border-radius: 0.375rem;
-  background-color: canvas;
+  outline: 0;
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
   background-clip: padding-box;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
-  &[data-side='none'] {
-    min-width: calc(var(--anchor-width) + 1rem);
-  }
-
-  @media (prefers-color-scheme: light) {
-    outline: 1px solid var(--color-neutral-200);
-    box-shadow:
-      0 10px 15px -3px var(--color-neutral-200),
-      0 4px 6px -4px var(--color-neutral-200);
+  @media (prefers-color-scheme: dark) {
+    box-shadow: none;
   }
 
-  @media (prefers-color-scheme: dark) {
-    outline: 1px solid var(--color-neutral-300);
+  &[data-side='none'] {
+    min-width: calc(var(--anchor-width) + 1rem);
   }
 }
 
@@ -106,27 +107,23 @@
 }
 
 .ArrowFill {
-  fill: canvas;
+  fill: light-dark(white, var(--color-neutral-950));
 }
 
 .ArrowOuterStroke {
-  @media (prefers-color-scheme: light) {
-    fill: var(--color-neutral-200);
-  }
+  fill: light-dark(var(--color-neutral-950), white);
 }
 
 .ArrowInnerStroke {
-  @media (prefers-color-scheme: dark) {
-    fill: var(--color-neutral-300);
-  }
+  fill: light-dark(white, var(--color-neutral-950));
 }
 
 .Item {
   box-sizing: border-box;
   outline: 0;
   font-size: 0.875rem;
-  line-height: 1rem;
-  padding-block: 0.5rem;
+  line-height: 1.25rem;
+  padding-block: 0.375rem;
   padding-left: 0.625rem;
   padding-right: 1rem;
   display: grid;
@@ -134,33 +131,15 @@
   align-items: center;
   grid-template-columns: 0.75rem 1fr;
   cursor: default;
-  -webkit-user-select: none;
   user-select: none;
 
-  @media (pointer: coarse) {
-    padding-block: 0.625rem;
-    font-size: 0.925rem;
-  }
-
   [data-side='none'] & {
-    font-size: 1rem;
     padding-right: 3rem;
   }
 
   &[data-highlighted] {
-    z-index: 0;
-    position: relative;
-    color: var(--color-neutral-50);
-  }
-
-  &[data-highlighted]::before {
-    content: '';
-    z-index: -1;
-    position: absolute;
-    inset-block: 0;
-    inset-inline: 0.25rem;
-    border-radius: 0.25rem;
-    background-color: var(--color-neutral-900);
+    background-color: light-dark(var(--color-neutral-950), white);
+    color: light-dark(white, var(--color-neutral-950));
   }
 }
 
@@ -180,11 +159,10 @@
 
 .ScrollArrow {
   width: 100%;
-  background: canvas;
+  background-color: light-dark(white, var(--color-neutral-950));
   z-index: 1;
   text-align: center;
   cursor: default;
-  border-radius: 0.375rem;
   height: 1rem;
   font-size: 0.75rem;
   display: flex;
@@ -200,6 +178,8 @@
   }
 
   &[data-direction='up'] {
+    top: 0;
+
     &[data-side='none'] {
       &::before {
         top: -100%;
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
index a1e8244b474..dc2d16290e7 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
@@ -44,7 +44,7 @@ export default function AnimatedSelectMotionDemo() {
   return (
     <Select.Root items={fonts} open={open} onOpenChange={setOpen}>
       <Select.Trigger className={styles.Select}>
-        <Select.Value />
+        <Select.Value className={styles.Value} />
         <Select.Icon className={styles.SelectIcon}>
           <ChevronUpDownIcon />
         </Select.Icon>

From b826653cd04e971828d971df032113f1578cf95d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 5 May 2026 18:37:53 +0200
Subject: [PATCH 127/257] Autocomplete: adjust items' padding

---
 .../autocomplete/demos/async/css-modules/index.module.css       | 2 +-
 .../components/autocomplete/demos/async/tailwind/index.tsx      | 2 +-
 .../demos/auto-highlight/css-modules/index.module.css           | 2 +-
 .../autocomplete/demos/auto-highlight/tailwind/index.tsx        | 2 +-
 .../autocomplete/demos/grouped/css-modules/index.module.css     | 2 +-
 .../components/autocomplete/demos/grouped/tailwind/index.tsx    | 2 +-
 .../autocomplete/demos/hero/css-modules/index.module.css        | 2 +-
 .../react/components/autocomplete/demos/hero/tailwind/index.tsx | 2 +-
 .../autocomplete/demos/inline/css-modules/index.module.css      | 2 +-
 .../components/autocomplete/demos/inline/tailwind/index.tsx     | 2 +-
 .../autocomplete/demos/limit/css-modules/index.module.css       | 2 +-
 .../components/autocomplete/demos/limit/tailwind/index.tsx      | 2 +-
 .../autocomplete/demos/virtualized/css-modules/index.module.css | 2 +-
 .../autocomplete/demos/virtualized/tailwind/index.tsx           | 2 +-
 14 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
index 55099b8b10e..ab8ee56cc46 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
@@ -59,7 +59,7 @@
   user-select: none;
   padding-block: 0.5rem;
   padding-left: 0.5rem;
-  padding-right: 2rem;
+  padding-right: 0.5rem;
   display: flex;
   font-size: 0.875rem;
   line-height: 1rem;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
index 34ef4c82c9a..ca291cd8bbe 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
@@ -102,7 +102,7 @@ export default function ExampleAsyncAutocomplete() {
               {(movie: Movie) => (
                 <Autocomplete.Item
                   key={movie.id}
-                  className="flex cursor-default py-2 pr-8 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
+                  className="flex cursor-default py-2 pr-2 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                   value={movie}
                 >
                   <span className="flex w-full flex-col gap-1">
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
index 90f2124ddb9..3499f353b3a 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
@@ -69,7 +69,7 @@
   user-select: none;
   padding-block: 0.5rem;
   padding-left: 0.5rem;
-  padding-right: 2rem;
+  padding-right: 0.5rem;
   display: flex;
   font-size: 0.875rem;
   line-height: 1rem;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
index 0715bdc59e0..4a7361fc289 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleAutocompleteAutoHighlight() {
               {(tag: Tag) => (
                 <Autocomplete.Item
                   key={tag.id}
-                  className="flex cursor-default items-center gap-2 py-2 pr-8 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
+                  className="flex cursor-default items-center gap-2 py-2 pr-2 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                   value={tag}
                 >
                   {tag.value}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
index b08fbe1114c..8d5a6ace008 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
@@ -89,7 +89,7 @@
   outline: 0;
   cursor: default;
   user-select: none;
-  padding: 0.5rem 2rem 0.5rem 0.5rem;
+  padding: 0.5rem;
   display: flex;
   font-size: 0.875rem;
   line-height: 1rem;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
index 2d9ac5bf965..87f611076da 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
@@ -30,7 +30,7 @@ export default function ExampleGroupAutocomplete() {
                     {(tag: Tag) => (
                       <Autocomplete.Item
                         key={tag.id}
-                        className="flex cursor-default items-center gap-2 py-2 pr-8 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
+                        className="flex cursor-default items-center gap-2 py-2 pr-2 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                         value={tag}
                       >
                         {tag.label}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
index d5d9d58febd..ad50c67c9a8 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
@@ -70,7 +70,7 @@
   user-select: none;
   padding-block: 0.5rem;
   padding-left: 0.5rem;
-  padding-right: 2rem;
+  padding-right: 0.5rem;
   display: flex;
   font-size: 0.875rem;
   line-height: 1rem;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
index 3a86899fa49..2da15cfc9b7 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleAutocomplete() {
               {(tag: Tag) => (
                 <Autocomplete.Item
                   key={tag.id}
-                  className="flex cursor-default items-center gap-2 py-2 pr-8 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
+                  className="flex cursor-default items-center gap-2 py-2 pr-2 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                   value={tag}
                 >
                   {tag.value}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
index 64650a31fe0..1bdf5ad9379 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
@@ -80,7 +80,7 @@
   user-select: none;
   padding-block: 0.5rem;
   padding-left: 0.5rem;
-  padding-right: 2rem;
+  padding-right: 0.5rem;
   display: flex;
   align-items: center;
   font-size: 0.875rem;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
index d1b0cd84a5b..8548f4eaf7c 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
@@ -19,7 +19,7 @@ export default function ExampleAutocompleteInline() {
               {(tag: Tag) => (
                 <Autocomplete.Item
                   key={tag.id}
-                  className="flex cursor-default items-center gap-2 py-2 pr-8 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
+                  className="flex cursor-default items-center gap-2 py-2 pr-2 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                   value={tag}
                 >
                   {tag.value}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
index 92fc6ec61fa..43abdeb55d7 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
@@ -59,7 +59,7 @@
   user-select: none;
   padding-block: 0.5rem;
   padding-left: 0.5rem;
-  padding-right: 2rem;
+  padding-right: 0.5rem;
   display: flex;
   font-size: 0.875rem;
   line-height: 1rem;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
index 72e7e54fd8f..e06bd086b9b 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
@@ -42,7 +42,7 @@ export default function ExampleAutocompleteLimit() {
               {(tag: Tag) => (
                 <Autocomplete.Item
                   key={tag.id}
-                  className="flex cursor-default py-2 pr-8 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
+                  className="flex cursor-default py-2 pr-2 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                   value={tag}
                 >
                   {tag.value}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
index 63d3fad4060..a3495bbffb9 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
@@ -74,7 +74,7 @@
   user-select: none;
   padding-block: 0.5rem;
   padding-left: 0.5rem;
-  padding-right: 2rem;
+  padding-right: 0.5rem;
   display: flex;
   font-size: 0.875rem;
   line-height: 1rem;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
index 5828edc945f..d552695e061 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
@@ -112,7 +112,7 @@ function VirtualizedList({
               data-index={virtualItem.index}
               ref={virtualizer.measureElement}
               value={item}
-              className="flex cursor-default py-2 pr-8 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
+              className="flex cursor-default py-2 pr-2 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
               aria-setsize={filteredItems.length}
               aria-posinset={virtualItem.index + 1}
               style={{

From b9fc4da39c5b47c185ada5f462980186f9c7f1e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 5 May 2026 18:41:16 +0200
Subject: [PATCH 128/257] Combobox: cleanup styles

---
 .../combobox/demos/async-multiple/css-modules/index.module.css   | 1 -
 .../combobox/demos/async-single/css-modules/index.module.css     | 1 -
 2 files changed, 2 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
index 3f1e2760887..242ca31328b 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
@@ -207,7 +207,6 @@
   user-select: none;
   padding-block: 0.5rem;
   padding-inline: 0.5rem;
-  padding-right: 0.5rem;
   display: grid;
   gap: 0.5rem;
   align-items: flex-start;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
index ac5fa4e6671..82a868975bb 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
@@ -160,7 +160,6 @@
   user-select: none;
   padding-block: 0.5rem;
   padding-inline: 0.5rem;
-  padding-right: 0.5rem;
   display: grid;
   gap: 0.5rem;
   align-items: flex-start;

From 7f383ffc20828e3e7f503f48ca7f93146ebe89a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 5 May 2026 18:47:02 +0200
Subject: [PATCH 129/257] Select: symetric padding on multiple demo

---
 .../select/demos/multiple/css-modules/index.module.css      | 6 +-----
 .../components/select/demos/multiple/tailwind/index.tsx     | 2 +-
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
index 170a3c6bace..670ce666b96 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
@@ -114,7 +114,7 @@
   line-height: 1.25rem;
   padding-block: 0.375rem;
   padding-left: 0.625rem;
-  padding-right: 1rem;
+  padding-right: 0.625rem;
   display: grid;
   gap: 0.5rem;
   align-items: center;
@@ -123,10 +123,6 @@
   user-select: none;
   scroll-margin-block: 0.25rem;
 
-  [data-side='none'] & {
-    padding-right: 3rem;
-  }
-
   @media (hover: hover) {
     &[data-highlighted] {
       background-color: light-dark(var(--color-neutral-950), white);
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index a428e757723..824e9afe9fe 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -55,7 +55,7 @@ export default function MultiSelectExample() {
                 <Select.Item
                   key={value}
                   value={value}
-                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none scroll-my-1 group-data-[side=none]:pr-12 [@media(hover:hover)]:data-highlighted:bg-neutral-950 [@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:bg-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950"
+                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-2.5 pl-2.5 text-sm outline-hidden select-none scroll-my-1 [@media(hover:hover)]:data-highlighted:bg-neutral-950 [@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:bg-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950"
                 >
                   <Select.ItemIndicator className="col-start-1">
                     <CheckIcon className="size-3" />

From 38c0cd98a155a2265c2ebd2a3ee52c481648ba7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 5 May 2026 19:42:45 +0200
Subject: [PATCH 130/257] Sticky group labels: fix on iOS

---
 .../autocomplete/demos/grid/css-modules/index.module.css        | 2 +-
 .../autocomplete/demos/grouped/css-modules/index.module.css     | 2 +-
 .../combobox/demos/grouped/css-modules/index.module.css         | 2 +-
 .../select/demos/grouped/css-modules/index.module.css           | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
index 777e2ac4579..f396317adb6 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
@@ -169,6 +169,7 @@
     calc(20.5rem - var(--input-container-height) - 2px),
     calc(var(--available-height) - var(--input-container-height) - 2px)
   );
+  isolation: isolate; /* Prevent overlap with iOS overlay scrollbars. */
 
   &:empty {
     padding: 0;
@@ -185,7 +186,6 @@
   z-index: 1;
   top: 0;
   padding: 0.5rem;
-  margin: 0 0.5rem 0 0; /* Prevent overlap with iOS overlay scrollbars. */
   font-size: 0.75rem;
   font-weight: 700;
   line-height: 1rem;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
index 8d5a6ace008..a970bd49139 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
@@ -57,6 +57,7 @@
   overscroll-behavior: contain;
   max-height: min(22.5rem, var(--available-height));
   outline: 0;
+  isolation: isolate; /* Prevent overlap with iOS overlay scrollbars. */
 
   &[data-empty] {
     padding: 0;
@@ -74,7 +75,6 @@
   z-index: 1;
   top: 0;
   padding: 0.5rem 0.5rem 0.25rem;
-  margin: 0 0.5rem 0 0; /* Prevent overlap with iOS overlay scrollbars. */
   font-size: 0.75rem;
   font-weight: 700;
   line-height: 1rem;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
index be77e0cd8a7..3e33af4b93f 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
@@ -124,6 +124,7 @@
   scroll-padding-bottom: 0.5rem;
   max-height: min(23rem, var(--available-height));
   outline: 0;
+  isolation: isolate; /* Prevent overlap with iOS overlay scrollbars. */
 }
 
 .Group {
@@ -137,7 +138,6 @@
   z-index: 1;
   top: 0;
   padding: 0.5rem 0.5rem 0.25rem 1.75rem;
-  margin: 0 0.5rem 0 0; /* Prevent overlap with iOS overlay scrollbars. */
   font-size: 0.75rem;
   font-weight: 700;
   line-height: 1rem;
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index 23e7cb77830..9213e099d62 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -113,6 +113,7 @@
   max-height: var(--available-height);
   scroll-padding-block-start: 2.25rem;
   scroll-padding-block-end: 1.5rem;
+  isolation: isolate; /* Prevent overlap with iOS overlay scrollbars. */
 }
 
 .Group {
@@ -126,7 +127,6 @@
   z-index: 1;
   top: 0;
   padding: 0.5rem 0.5rem 0.25rem calc(0.625rem + 0.75rem + 0.5rem);
-  margin: 0 0.5rem 0 0; /* Prevent overlap with iOS overlay scrollbars. */
   font-size: 0.75rem;
   font-weight: 700;
   line-height: 1rem;

From 95c00a6bd728c46a5d5b2c940f079c4c511f3d81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 6 May 2026 07:27:55 +0200
Subject: [PATCH 131/257] Drawer: no soft buttons

---
 .../demos/nested/css-modules/index.module.css | 33 -------------------
 .../drawer/demos/nested/css-modules/index.tsx |  6 ++--
 .../drawer/demos/nested/tailwind/index.tsx    |  4 +--
 3 files changed, 4 insertions(+), 39 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
index f9f237e27e2..1b94ff98f35 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
@@ -36,39 +36,6 @@
   }
 }
 
-.GhostButton {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2rem;
-  padding: 0 0.75rem;
-  margin: 0;
-  font-family: inherit;
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.25rem;
-  background-color: light-dark(var(--color-neutral-50), var(--color-neutral-900));
-  color: light-dark(var(--color-neutral-950), white);
-  border: 0;
-  outline: 0;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
-    }
-  }
-
-  &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
-    outline-offset: -2px;
-  }
-}
-
 .Backdrop {
   --backdrop-opacity: 0.2;
   --bleed: 3rem;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.tsx
index 40730f2f31e..cc637d807b3 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.tsx
@@ -21,9 +21,7 @@ export default function ExampleDrawerNested() {
               <div className={styles.Actions}>
                 <div className={styles.ActionsLeft}>
                   <Drawer.Root>
-                    <Drawer.Trigger className={styles.GhostButton}>
-                      Security settings
-                    </Drawer.Trigger>
+                    <Drawer.Trigger className={styles.Button}>Security settings</Drawer.Trigger>
                     <Drawer.Portal>
                       <Drawer.Viewport className={styles.Viewport}>
                         <Drawer.Popup className={styles.Popup}>
@@ -43,7 +41,7 @@ export default function ExampleDrawerNested() {
                             <div className={styles.Actions}>
                               <div className={styles.ActionsLeft}>
                                 <Drawer.Root>
-                                  <Drawer.Trigger className={styles.GhostButton}>
+                                  <Drawer.Trigger className={styles.Button}>
                                     Advanced options
                                   </Drawer.Trigger>
                                   <Drawer.Portal>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
index f3f82db8969..8223ad8cea6 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
@@ -22,7 +22,7 @@ export default function ExampleDrawerNested() {
               <div className="flex items-center justify-end gap-4">
                 <div className="mr-auto">
                   <Drawer.Root>
-                    <Drawer.Trigger className="flex h-8 items-center justify-center bg-neutral-50 px-3 text-sm font-normal text-neutral-950 hover:bg-neutral-100 active:bg-neutral-200 dark:bg-neutral-900 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                    <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                       Security settings
                     </Drawer.Trigger>
                     <Drawer.Portal>
@@ -46,7 +46,7 @@ export default function ExampleDrawerNested() {
                             <div className="flex items-center justify-end gap-4">
                               <div className="mr-auto">
                                 <Drawer.Root>
-                                  <Drawer.Trigger className="flex h-8 items-center justify-center bg-neutral-50 px-3 text-sm font-normal text-neutral-950 hover:bg-neutral-100 active:bg-neutral-200 dark:bg-neutral-900 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                                  <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                                     Advanced options
                                   </Drawer.Trigger>
                                   <Drawer.Portal>

From e493a74086e835b938dc011143bc9c0b91ecd4db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 6 May 2026 07:37:57 +0200
Subject: [PATCH 132/257] Select: reduce left padding

---
 .../select/demos/grouped/css-modules/index.module.css  |  2 +-
 .../components/select/demos/grouped/tailwind/index.tsx |  2 +-
 .../select/demos/hero/css-modules/index.module.css     |  2 +-
 .../components/select/demos/hero/tailwind/index.tsx    |  2 +-
 .../select/demos/multiple/css-modules/index.module.css |  2 +-
 .../select/demos/multiple/tailwind/index.tsx           |  2 +-
 .../demos/object-values/css-modules/index.module.css   |  2 +-
 .../select/demos/object-values/tailwind/index.tsx      |  2 +-
 .../toolbar/demos/hero/css-modules/index.module.css    |  2 +-
 .../components/toolbar/demos/hero/tailwind/index.tsx   |  2 +-
 .../css-modules/index.module.css                       |  2 +-
 .../demos/animated-select-motion/css-modules/index.tsx | 10 +++++-----
 12 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index 9213e099d62..637ce6e1be7 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -24,7 +24,7 @@
   justify-content: space-between;
   gap: 0.75rem;
   height: 2rem;
-  padding-left: 0.75rem;
+  padding-left: 0.5rem;
   padding-right: 0.5rem;
   margin: 0;
   outline: 0;
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index 95618a3c552..7622c7f8e56 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleSelectGrouped() {
         Produce
       </Field.Label>
       <Select.Root items={groupedProduce}>
-        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-3 pr-2 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-2 pr-2 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           <Select.Value
             className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400"
             placeholder="Select produce"
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
index 38a5c3059f7..66266c862f5 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
@@ -24,7 +24,7 @@
   justify-content: space-between;
   gap: 0.75rem;
   height: 2rem;
-  padding-left: 0.75rem;
+  padding-left: 0.5rem;
   padding-right: 0.5rem;
   margin: 0;
   outline: 0;
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index 186a2da3941..a9598ca3abb 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function ExampleSelect() {
         <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Apple
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-3 pr-2 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-2 pr-2 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           <Select.Value
             className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400"
             placeholder="Select apple"
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
index 670ce666b96..8b0295d7a02 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
@@ -24,7 +24,7 @@
   justify-content: space-between;
   gap: 0.75rem;
   height: 2rem;
-  padding-left: 0.75rem;
+  padding-left: 0.5rem;
   padding-right: 0.5rem;
   margin: 0;
   outline: 0;
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index 824e9afe9fe..a748c8ffd30 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -36,7 +36,7 @@ export default function MultiSelectExample() {
         <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Languages
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-3 pr-2 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-2 pr-2 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           <Select.Value className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400">
             {renderValue}
           </Select.Value>
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
index e6e1fed35d8..ddedcad7250 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
@@ -21,7 +21,7 @@
   gap: 0.75rem;
   min-height: 2rem;
   padding-block: 0.375rem;
-  padding-left: 0.75rem;
+  padding-left: 0.5rem;
   padding-right: 0.5rem;
   margin: 0;
   outline: 0;
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index 0d5f897d9b7..323f4e224de 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ObjectValueSelect() {
         <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Shipping method
         </Select.Label>
-        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-start justify-between gap-3 pl-3 pr-2 py-1.5 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-start justify-between gap-3 pl-2 pr-2 py-1.5 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           <Select.Value>
             {(method: ShippingMethod) => (
               <span className="flex flex-col items-start gap-0.5">
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
index eb3e3232e92..b6f129f1554 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
@@ -64,7 +64,7 @@
   &[role='combobox'] {
     min-width: 8rem;
     justify-content: space-between;
-    padding: 0 0.75rem;
+    padding: 0 0.5rem;
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
index 33145458e7a..2dc31f96983 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
@@ -44,7 +44,7 @@ export default function ExampleToolbar() {
       <Select.Root defaultValue="Helvetica">
         <Toolbar.Button
           render={<Select.Trigger />}
-          className="flex h-8 min-w-32 cursor-default items-center justify-between border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-32 cursor-default items-center justify-between border-0 bg-transparent px-2 font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         >
           <Select.Value />
           <Select.Icon className="flex">
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
index 2f63434e548..56287e0405c 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
@@ -5,7 +5,7 @@
   justify-content: space-between;
   gap: 0.75rem;
   height: 2rem;
-  padding-left: 0.75rem;
+  padding-left: 0.5rem;
   padding-right: 0.5rem;
   margin: 0;
   outline: 0;
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
index dc2d16290e7..7cb20d8018b 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
@@ -78,16 +78,16 @@ export default function AnimatedSelectMotionDemo() {
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="8"
+      width="12"
       height="12"
-      viewBox="0 0 8 12"
+      viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.5"
+      strokeWidth="2"
       {...props}
     >
-      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
-      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+      <path d="m7 15 5 5 5-5" />
+      <path d="m7 9 5-5 5 5" />
     </svg>
   );
 }

From fa0cac6871d67223446a61a57953f3be72e4a6a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 6 May 2026 14:33:34 +0200
Subject: [PATCH 133/257] Forms handbook page brutalist

---
 .../forms/demos/components/autocomplete.tsx   | 18 ++++--
 .../forms/demos/components/button.tsx         |  2 +-
 .../forms/demos/components/checkbox-group.tsx |  5 +-
 .../forms/demos/components/checkbox.tsx       |  7 +--
 .../forms/demos/components/combobox.tsx       | 57 ++++++++++++++++---
 .../handbook/forms/demos/components/field.tsx | 11 +++-
 .../forms/demos/components/fieldset.tsx       |  5 +-
 .../handbook/forms/demos/components/form.tsx  |  2 +-
 .../forms/demos/components/number-field.tsx   |  8 +--
 .../forms/demos/components/radio-group.tsx    |  5 +-
 .../handbook/forms/demos/components/radio.tsx |  4 +-
 .../forms/demos/components/select.tsx         | 30 +++++++---
 .../forms/demos/components/slider.tsx         | 14 ++---
 .../forms/demos/components/switch.tsx         |  4 +-
 .../handbook/forms/demos/components/toast.tsx | 12 ++--
 .../forms/demos/hero/tailwind/index.tsx       | 42 +++++++-------
 .../demos/react-hook-form/tailwind/index.tsx  | 42 +++++++-------
 .../demos/tanstack-form/tailwind/index.tsx    | 42 +++++++-------
 18 files changed, 195 insertions(+), 115 deletions(-)

diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
index 84c7ef8b399..143025a8be4 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
@@ -14,7 +14,7 @@ export const Input = React.forwardRef<HTMLInputElement, Autocomplete.Input.Props
     <Autocomplete.Input
       ref={forwardedRef}
       className={clsx(
-        'bg-[canvas] h-10 w-[16rem] md:w-[20rem] font-normal rounded-md border border-neutral-200 pl-3.5 text-base text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800',
+        'h-8 w-[16rem] border border-neutral-950 bg-white px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 md:w-[20rem] dark:border-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400',
         className,
       )}
       {...props}
@@ -40,7 +40,7 @@ export function Popup({ className, ...props }: Autocomplete.Popup.Props) {
   return (
     <Autocomplete.Popup
       className={clsx(
-        'w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-[canvas] py-2 text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300',
+        'w-(--anchor-width) max-h-[23rem] max-w-(--available-width) overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none',
         className,
       )}
       {...props}
@@ -48,15 +48,23 @@ export function Popup({ className, ...props }: Autocomplete.Popup.Props) {
   );
 }
 
-export function List(props: Autocomplete.List.Props) {
-  return <Autocomplete.List {...props} />;
+export function List({ className, ...props }: Autocomplete.List.Props) {
+  return (
+    <Autocomplete.List
+      className={clsx(
+        'max-h-[min(23rem,var(--available-height))] overflow-y-auto overscroll-contain py-2 scroll-py-2 outline-0 data-empty:p-0',
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 export function Item({ className, ...props }: Autocomplete.Item.Props) {
   return (
     <Autocomplete.Item
       className={clsx(
-        'flex flex-col gap-0.25 cursor-default py-2 pr-8 pl-4 text-base leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-neutral-50 data-highlighted:before:absolute data-highlighted:before:inset-x-2 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:rounded data-highlighted:before:bg-neutral-900',
+        'flex cursor-default flex-col gap-0.25 py-2 pr-8 pl-2 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx
index 688087a2f4e..11ff17cfc6c 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx
@@ -7,7 +7,7 @@ export function Button({ className, ...props }: React.ComponentPropsWithoutRef<'
     <BaseButton
       type="button"
       className={clsx(
-        'flex items-center justify-center h-10 px-3.5 m-0 outline-0 border border-neutral-200 rounded-md bg-neutral-50 font-inherit text-base font-normal leading-6 text-neutral-900 select-none hover:data-disabled:bg-neutral-50 hover:bg-neutral-100 active:data-disabled:bg-neutral-50 active:bg-neutral-200 active:shadow-[inset_0_1px_3px_rgba(0,0,0,0.1)] active:border-t-neutral-300 active:data-disabled:shadow-none active:data-disabled:border-t-neutral-200 focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1 data-disabled:text-neutral-500',
+        'flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:disabled:border-neutral-400 dark:disabled:text-neutral-400',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox-group.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox-group.tsx
index 92bb626468f..e0358fdbe93 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox-group.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox-group.tsx
@@ -5,7 +5,10 @@ import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-grou
 export function CheckboxGroup({ className, ...props }: BaseCheckboxGroup.Props) {
   return (
     <BaseCheckboxGroup
-      className={clsx('flex flex-col items-start gap-1 text-neutral-900', className)}
+      className={clsx(
+        'flex flex-col items-start gap-1 text-neutral-950 dark:text-white',
+        className,
+      )}
       {...props}
     />
   );
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox.tsx
index c2be9262b9e..1033d11f240 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox.tsx
@@ -6,7 +6,7 @@ export function Root({ className, ...props }: Checkbox.Root.Props) {
   return (
     <Checkbox.Root
       className={clsx(
-        'flex size-5 items-center justify-center rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-checked:bg-neutral-900 data-unchecked:border data-unchecked:border-neutral-300',
+        'flex size-4 shrink-0 items-center justify-center rounded-none border border-neutral-950 bg-white p-0 text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-checked:bg-neutral-950 data-checked:text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 dark:data-checked:bg-white dark:data-checked:text-neutral-950',
         className,
       )}
       {...props}
@@ -16,9 +16,6 @@ export function Root({ className, ...props }: Checkbox.Root.Props) {
 
 export function Indicator({ className, ...props }: Checkbox.Indicator.Props) {
   return (
-    <Checkbox.Indicator
-      className={clsx('flex text-neutral-50 data-unchecked:hidden', className)}
-      {...props}
-    />
+    <Checkbox.Indicator className={clsx('flex data-unchecked:hidden', className)} {...props} />
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
index 1fd4ae5e68e..700f817d225 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { Combobox } from '@base-ui/react/combobox';
-import { X } from 'lucide-react';
 
 export function Root(props: Combobox.Root.Props<any, any>) {
   return <Combobox.Root {...props} />;
@@ -15,7 +14,7 @@ export const Input = React.forwardRef<HTMLInputElement, Combobox.Input.Props>(fu
     <Combobox.Input
       ref={forwardedRef}
       className={clsx(
-        'h-10 w-64 rounded-md font-normal border border-neutral-200 pl-3.5 text-base text-neutral-900 bg-[canvas] focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800',
+        'h-full w-full border-0 bg-white pl-2 text-sm font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400',
         className,
       )}
       {...props}
@@ -23,16 +22,28 @@ export const Input = React.forwardRef<HTMLInputElement, Combobox.Input.Props>(fu
   );
 });
 
+export function InputGroup({ className, ...props }: Combobox.InputGroup.Props) {
+  return (
+    <Combobox.InputGroup
+      className={clsx(
+        'relative h-8 w-64 border border-neutral-950 bg-white focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 dark:border-white dark:bg-neutral-950 [&>input]:pr-[2.5rem] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
 export function Clear({ className, ...props }: Combobox.Clear.Props) {
   return (
     <Combobox.Clear
       className={clsx(
-        'combobox-clear flex h-10 w-6 items-center justify-center rounded bg-transparent p-0',
+        'combobox-clear flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white',
         className,
       )}
       {...props}
     >
-      <X className="size-4" />
+      <XIcon className="size-4" />
     </Combobox.Clear>
   );
 }
@@ -41,7 +52,7 @@ export function Trigger({ className, ...props }: Combobox.Trigger.Props) {
   return (
     <Combobox.Trigger
       className={clsx(
-        'flex h-10 w-6 items-center justify-center rounded bg-transparent p-0',
+        'flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white',
         className,
       )}
       {...props}
@@ -63,7 +74,7 @@ export function Popup({ className, ...props }: Combobox.Popup.Props) {
   return (
     <Combobox.Popup
       className={clsx(
-        'w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] rounded-md bg-[canvas] text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-200 transition-[transform,scale,opacity] data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 dark:shadow-none dark:-outline-offset-1 dark:outline-neutral-300 duration-100',
+        'w-(--anchor-width) max-h-[23rem] max-w-(--available-width) origin-(--transform-origin) overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[opacity,transform] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none',
         className,
       )}
       {...props}
@@ -75,7 +86,12 @@ export function Empty({ className, children, ...props }: Combobox.Empty.Props) {
   return (
     <Combobox.Empty {...props}>
       {children ? (
-        <div className={clsx('p-4 text-[0.925rem] leading-4 text-neutral-600', className)}>
+        <div
+          className={clsx(
+            'py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400',
+            className,
+          )}
+        >
           {children}
         </div>
       ) : null}
@@ -99,7 +115,7 @@ export function Item({ className, ...props }: Combobox.Item.Props) {
   return (
     <Combobox.Item
       className={clsx(
-        'grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-base leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-neutral-50 data-highlighted:before:absolute data-highlighted:before:inset-x-2 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:rounded-sm data-highlighted:before:bg-neutral-900',
+        'grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white',
         className,
       )}
       {...props}
@@ -110,3 +126,28 @@ export function Item({ className, ...props }: Combobox.Item.Props) {
 export function ItemIndicator({ className, ...props }: Combobox.ItemIndicator.Props) {
   return <Combobox.ItemIndicator className={clsx('col-start-1', className)} {...props} />;
 }
+
+export function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
+
+function XIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+    >
+      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
+      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx
index 184e99a2e37..4a11f297f16 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx
@@ -10,7 +10,7 @@ export function Label({ className, ...props }: Field.Label.Props) {
   return (
     <Field.Label
       className={clsx(
-        'text-sm font-bold text-neutral-900 has-[[role="checkbox"]]:flex has-[[role="checkbox"]]:items-center has-[[role="checkbox"]]:gap-2 has-[[role="checkbox"]]:font-normal has-[[role="radio"]]:flex has-[[role="radio"]]:items-center has-[[role="radio"]]:gap-2 has-[[role="radio"]]:font-normal has-[[role="switch"]]:flex has-[[role="switch"]]:items-center',
+        'text-sm font-bold text-neutral-950 has-[[role="checkbox"]]:flex has-[[role="checkbox"]]:items-center has-[[role="checkbox"]]:gap-2 has-[[role="checkbox"]]:font-normal has-[[role="radio"]]:flex has-[[role="radio"]]:items-center has-[[role="radio"]]:gap-2 has-[[role="radio"]]:font-normal has-[[role="switch"]]:flex has-[[role="switch"]]:items-center dark:text-white',
         className,
       )}
       {...props}
@@ -19,7 +19,12 @@ export function Label({ className, ...props }: Field.Label.Props) {
 }
 
 export function Description({ className, ...props }: Field.Description.Props) {
-  return <Field.Description className={clsx('text-sm text-neutral-600', className)} {...props} />;
+  return (
+    <Field.Description
+      className={clsx('text-sm text-neutral-600 dark:text-neutral-400', className)}
+      {...props}
+    />
+  );
 }
 
 export const Control = React.forwardRef<HTMLInputElement, Field.Control.Props>(
@@ -31,7 +36,7 @@ export const Control = React.forwardRef<HTMLInputElement, Field.Control.Props>(
       <Field.Control
         ref={forwardedRef}
         className={clsx(
-          'h-10 w-full max-w-xs rounded-md bg-[canvas] border border-neutral-200 pl-3.5 text-base text-neutral-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800',
+          'h-8 w-full max-w-xs border border-neutral-950 bg-white px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400',
           className,
         )}
         {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/fieldset.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/fieldset.tsx
index 0ef210fbd12..27b42e55da3 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/fieldset.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/fieldset.tsx
@@ -8,6 +8,9 @@ export function Root(props: Fieldset.Root.Props) {
 
 export function Legend({ className, ...props }: Fieldset.Legend.Props) {
   return (
-    <Fieldset.Legend className={clsx('text-sm font-bold text-neutral-900', className)} {...props} />
+    <Fieldset.Legend
+      className={clsx('text-sm font-bold text-neutral-950 dark:text-white', className)}
+      {...props}
+    />
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/form.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/form.tsx
index 583acd6e396..21ac278ef3a 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/form.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/form.tsx
@@ -5,7 +5,7 @@ import { Form as BaseForm } from '@base-ui/react/form';
 export function Form({ className, ...props }: BaseForm.Props) {
   return (
     <BaseForm
-      className={clsx('flex w-full max-w-3xs sm:max-w-[20rem] flex-col gap-5', className)}
+      className={clsx('flex w-full max-w-3xs flex-col gap-5 sm:max-w-[20rem]', className)}
       {...props}
     />
   );
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
index d4932a5fbcb..8c604cb036b 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
@@ -9,14 +9,14 @@ export function Root({ className, ...props }: NumberField.Root.Props) {
 }
 
 export function Group({ className, ...props }: NumberField.Group.Props) {
-  return <NumberField.Group className={clsx('flex', className)} {...props} />;
+  return <NumberField.Group className={clsx('flex h-8', className)} {...props} />;
 }
 
 export function Decrement({ className, ...props }: NumberField.Decrement.Props) {
   return (
     <NumberField.Decrement
       className={clsx(
-        'flex size-10 items-center justify-center rounded-tl-md rounded-bl-md border border-neutral-200 bg-neutral-50 bg-clip-padding text-neutral-900 select-none hover:bg-neutral-100 active:bg-neutral-100',
+        'flex h-full w-8 items-center justify-center rounded-none border border-neutral-950 bg-white bg-clip-padding text-neutral-950 outline-0 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400',
         className,
       )}
       {...props}
@@ -32,7 +32,7 @@ export const Input = React.forwardRef<HTMLInputElement, NumberField.Input.Props>
     <NumberField.Input
       ref={forwardedRef}
       className={clsx(
-        'h-10 w-24 border-t border-b border-neutral-200 text-center text-base text-neutral-900 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800',
+        'h-full w-16 rounded-none border-y border-neutral-950 bg-white px-3 text-center text-sm font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white',
         className,
       )}
       {...props}
@@ -44,7 +44,7 @@ export function Increment({ className, ...props }: NumberField.Increment.Props)
   return (
     <NumberField.Increment
       className={clsx(
-        'flex size-10 items-center justify-center rounded-tr-md rounded-br-md border border-neutral-200 bg-neutral-50 bg-clip-padding text-neutral-900 select-none hover:bg-neutral-100 active:bg-neutral-100',
+        'flex h-full w-8 items-center justify-center rounded-none border border-neutral-950 bg-white bg-clip-padding text-neutral-950 outline-0 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/radio-group.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/radio-group.tsx
index 4d0b731c8e4..abf6d3cb17c 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/radio-group.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/radio-group.tsx
@@ -5,7 +5,10 @@ import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
 export function RadioGroup<Value>({ className, ...props }: BaseRadioGroup.Props<Value>) {
   return (
     <BaseRadioGroup
-      className={clsx('w-full flex flex-row items-start gap-1 text-neutral-900', className)}
+      className={clsx(
+        'flex w-full flex-row items-start gap-1 text-neutral-950 dark:text-white',
+        className,
+      )}
       {...props}
     />
   );
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/radio.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/radio.tsx
index 8327e62b93b..501b0dcdd84 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/radio.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/radio.tsx
@@ -6,7 +6,7 @@ export function Root({ className, ...props }: Radio.Root.Props) {
   return (
     <Radio.Root
       className={clsx(
-        'flex size-5 items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-checked:bg-neutral-900 data-unchecked:border data-unchecked:border-neutral-300',
+        'flex size-4 shrink-0 items-center justify-center rounded-full border border-neutral-950 bg-white p-0 text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-checked:bg-neutral-950 data-checked:text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 dark:data-checked:bg-white dark:data-checked:text-neutral-950',
         className,
       )}
       {...props}
@@ -18,7 +18,7 @@ export function Indicator({ className, ...props }: Radio.Indicator.Props) {
   return (
     <Radio.Indicator
       className={clsx(
-        'flex before:size-2 before:rounded-full before:bg-neutral-50 data-unchecked:hidden',
+        'flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
index 91e11325f8d..9236dd51a1e 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
@@ -8,7 +8,13 @@ export function Root(props: Select.Root.Props<any>) {
 
 export function Label({ className, ...props }: Select.Label.Props) {
   return (
-    <Select.Label className={clsx('text-sm font-bold text-neutral-900', className)} {...props} />
+    <Select.Label
+      className={clsx(
+        'cursor-default text-sm font-bold text-neutral-950 dark:text-white',
+        className,
+      )}
+      {...props}
+    />
   );
 }
 
@@ -16,7 +22,7 @@ export function Trigger({ className, ...props }: Select.Trigger.Props) {
   return (
     <Select.Trigger
       className={clsx(
-        'flex h-10 min-w-36 items-center justify-between gap-3 rounded-md border border-neutral-200 pr-3 pl-3.5 text-base text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 data-popup-open:bg-neutral-100 cursor-default not-data-filled:text-neutral-500 bg-[canvas]',
+        'flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white px-2 text-sm font-normal text-neutral-950 select-none not-data-filled:text-neutral-500 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:not-data-filled:text-neutral-400 dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800',
         className,
       )}
       {...props}
@@ -25,7 +31,15 @@ export function Trigger({ className, ...props }: Select.Trigger.Props) {
 }
 
 export function Value({ className, ...props }: Select.Value.Props) {
-  return <Select.Value className={clsx('', className)} {...props} />;
+  return (
+    <Select.Value
+      className={clsx(
+        'data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400',
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 export function Icon({ className, ...props }: Select.Icon.Props) {
@@ -50,7 +64,7 @@ export function Popup({ className, ...props }: Select.Popup.Props) {
   return (
     <Select.Popup
       className={clsx(
-        'group origin-[var(--transform-origin)] bg-clip-padding rounded-md bg-[canvas] text-neutral-900 shadow-lg shadow-neutral-200 outline outline-neutral-200 transition-[transform,scale,opacity] data-ending-style:scale-90 data-ending-style:opacity-0 data-[side=none]: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-neutral-300',
+        'group min-w-(--anchor-width) origin-(--transform-origin) border border-neutral-950 bg-white bg-clip-padding text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:translate-y-px data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none',
         className,
       )}
       {...props}
@@ -62,7 +76,7 @@ export function ScrollUpArrow({ className, ...props }: Select.ScrollUpArrow.Prop
   return (
     <Select.ScrollUpArrow
       className={clsx(
-        "top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center rounded-md bg-[canvas] text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-['']",
+        "top-0 z-1 flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:-top-full before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950",
         className,
       )}
       {...props}
@@ -74,7 +88,7 @@ export function ScrollDownArrow({ className, ...props }: Select.ScrollDownArrow.
   return (
     <Select.ScrollDownArrow
       className={clsx(
-        "bottom-0 z-[1] flex h-4 w-full cursor-default items-center justify-center rounded-md bg-[canvas] text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:bottom-[-100%]",
+        "bottom-0 z-1 flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:-bottom-full dark:bg-neutral-950",
         className,
       )}
       {...props}
@@ -86,7 +100,7 @@ export function List({ className, ...props }: Select.List.Props) {
   return (
     <Select.List
       className={clsx(
-        'relative py-1 scroll-py-6 overflow-y-auto max-h-[var(--available-height)]',
+        'relative max-h-(--available-height) overflow-y-auto py-1 scroll-py-6',
         className,
       )}
       {...props}
@@ -98,7 +112,7 @@ export function Item({ className, ...props }: Select.Item.Props) {
   return (
     <Select.Item
       className={clsx(
-        'grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-3 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-neutral-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-neutral-900 pointer-coarse:py-2.5 pointer-coarse:text-[0.925rem]',
+        'grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none group-data-[side=none]:pr-12 data-highlighted:bg-neutral-950 data-highlighted:text-white dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/slider.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/slider.tsx
index 2de3f073a6e..983be928f21 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/slider.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/slider.tsx
@@ -8,7 +8,10 @@ export function Root({ className, ...props }: Slider.Root.Props<any>) {
 
 export function Value({ className, ...props }: Slider.Value.Props) {
   return (
-    <Slider.Value className={clsx('text-sm font-normal text-neutral-900', className)} {...props} />
+    <Slider.Value
+      className={clsx('text-sm font-normal text-neutral-950 dark:text-white', className)}
+      {...props}
+    />
   );
 }
 
@@ -24,10 +27,7 @@ export function Control({ className, ...props }: Slider.Control.Props) {
 export function Track({ className, ...props }: Slider.Track.Props) {
   return (
     <Slider.Track
-      className={clsx(
-        'h-1 w-full rounded bg-neutral-200 shadow-[inset_0_0_0_1px] shadow-neutral-200 select-none',
-        className,
-      )}
+      className={clsx('h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800', className)}
       {...props}
     />
   );
@@ -36,7 +36,7 @@ export function Track({ className, ...props }: Slider.Track.Props) {
 export function Indicator({ className, ...props }: Slider.Indicator.Props) {
   return (
     <Slider.Indicator
-      className={clsx('rounded bg-neutral-700 select-none', className)}
+      className={clsx('bg-neutral-950 select-none dark:bg-white', className)}
       {...props}
     />
   );
@@ -46,7 +46,7 @@ export function Thumb({ className, ...props }: Slider.Thumb.Props) {
   return (
     <Slider.Thumb
       className={clsx(
-        'size-4 rounded-full bg-white outline outline-neutral-300 select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800',
+        'size-4 border border-neutral-950 bg-white select-none has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx
index 1d4765f6496..c4ce36e69ba 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx
@@ -6,7 +6,7 @@ export function Root({ className, ...props }: Switch.Root.Props) {
   return (
     <Switch.Root
       className={clsx(
-        'relative flex h-6 w-10 rounded-full bg-gradient-to-r from-neutral-700 from-35% to-neutral-200 to-65% bg-[length:6.5rem_100%] bg-[100%_0%] bg-no-repeat p-px shadow-[inset_0_1.5px_2px] shadow-neutral-200 outline-1 -outline-offset-1 outline-neutral-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-neutral-100 data-checked:bg-[0%_0%] data-checked:active:bg-neutral-500 dark:from-neutral-500 dark:shadow-black/75 dark:outline-white/15 dark:data-checked:shadow-none',
+        'flex h-5 w-9 shrink-0 border border-neutral-900 bg-neutral-50 p-0.5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-checked:bg-neutral-900 dark:border-neutral-50 dark:bg-neutral-900 dark:data-checked:bg-neutral-50',
         className,
       )}
       {...props}
@@ -18,7 +18,7 @@ export function Thumb({ className, ...props }: Switch.Thumb.Props) {
   return (
     <Switch.Thumb
       className={clsx(
-        'aspect-square h-full rounded-full bg-white shadow-[0_0_1px_1px,0_1px_1px,1px_2px_4px_-1px] shadow-neutral-100 transition-transform duration-150 data-checked:translate-x-4 dark:shadow-black/25',
+        'size-3.5 bg-neutral-900 transition-transform duration-150 data-checked:translate-x-4 data-checked:bg-neutral-50 dark:bg-neutral-50 dark:data-checked:bg-neutral-900',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
index 2bca5f2d01a..337d1a6e172 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
@@ -9,19 +9,19 @@ function Toasts() {
     <Toast.Root
       key={toast.id}
       toast={toast}
-      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] rounded-lg border border-neutral-200 bg-neutral-50 bg-clip-padding p-4 shadow-lg select-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-limited:opacity-0 data-starting-style:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-limited:opacity-0 data-starting-style:transform-[translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:transform-[translateY(150%)] data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-150%))] h-(--height) [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
     >
-      <Toast.Content className="overflow-hidden transition-opacity [transition-duration:250ms]">
-        <Toast.Title className="text-[0.975rem] leading-5 font-bold" />
-        <Toast.Description className="text-[0.925rem] leading-5 text-neutral-700" />
+      <Toast.Content className="overflow-hidden transition-opacity duration-250">
+        <Toast.Title className="text-sm font-bold" />
+        <Toast.Description className="text-sm text-neutral-700 dark:text-neutral-300" />
         <div
-          className="text-xs mt-2 p-3 py-2 bg-neutral-100 text-neutral-900 rounded-md select-text"
+          className="mt-2 border border-neutral-950 bg-neutral-50 p-2 text-xs text-neutral-950 select-text dark:border-white dark:bg-neutral-900 dark:text-white"
           data-base-ui-swipe-ignore
         >
           <pre className="whitespace-pre-wrap">{JSON.stringify(toast.data, null, 2)}</pre>
         </div>
         <Toast.Close
-          className="absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded border-none bg-transparent text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700"
+          className="absolute top-2 right-2 flex size-5 items-center justify-center border-0 bg-transparent p-0 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
           aria-label="Close"
         >
           <X className="size-4" />
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
index 7af1a50307c..fe3c8fa3800 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { ChevronDown, ChevronsUpDown, Check, Plus, Minus } from 'lucide-react';
+import { ChevronsUpDown, Check, Plus, Minus } from 'lucide-react';
 import { Button } from '../../components/button';
 import { CheckboxGroup } from '../../components/checkbox-group';
 import { Form } from '../../components/form';
@@ -45,15 +45,17 @@ function ExampleForm() {
 
       <Field.Root name="region">
         <Combobox.Root items={REGIONS} required>
-          <div className="relative flex flex-col gap-1 text-sm text-neutral-900">
-            <Field.Label>Region</Field.Label>
-            <Combobox.Input placeholder="e.g. eu-central-1" />
-            <div className="absolute right-2 bottom-0 flex h-10 items-center justify-center text-neutral-600">
-              <Combobox.Clear />
-              <Combobox.Trigger>
-                <ChevronDown className="size-4" />
-              </Combobox.Trigger>
-            </div>
+          <div className="relative text-sm leading-5 font-bold text-neutral-950 dark:text-white">
+            <Field.Label className="mb-1 block">Region</Field.Label>
+            <Combobox.InputGroup>
+              <Combobox.Input placeholder="e.g. eu-central-1" />
+              <div className="absolute right-0 bottom-0 inline-flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
+                <Combobox.Clear />
+                <Combobox.Trigger>
+                  <Combobox.ChevronDownIcon className="size-3" />
+                </Combobox.Trigger>
+              </div>
+            </Combobox.InputGroup>
           </div>
           <Combobox.Portal>
             <Combobox.Positioner>
@@ -64,7 +66,7 @@ function ExampleForm() {
                     return (
                       <Combobox.Item key={region} value={region}>
                         <Combobox.ItemIndicator>
-                          <Check className="size-4" />
+                          <Check className="size-3" />
                         </Combobox.ItemIndicator>
                         <span className="col-start-2">{region}</span>
                       </Combobox.Item>
@@ -95,7 +97,7 @@ function ExampleForm() {
                   {(image: Image) => {
                     return (
                       <Autocomplete.Item key={image.url} value={image}>
-                        <span className="text-base">{image.name}</span>
+                        <span>{image.name}</span>
                         <span className="font-mono whitespace-nowrap text-xs opacity-80">
                           {image.url}
                         </span>
@@ -112,12 +114,12 @@ function ExampleForm() {
 
       <Field.Root name="serverType">
         <Select.Root items={SERVER_TYPES} required>
-          <div className="flex flex-col items-start gap-1">
+          <div className="w-fit space-y-1">
             <Select.Label>Server type</Select.Label>
             <Select.Trigger className="w-48">
               <Select.Value />
               <Select.Icon>
-                <ChevronsUpDown className="size-4" />
+                <ChevronsUpDown className="size-3" />
               </Select.Icon>
             </Select.Trigger>
           </div>
@@ -130,7 +132,7 @@ function ExampleForm() {
                     return (
                       <Select.Item key={value} value={value}>
                         <Select.ItemIndicator>
-                          <Check className="size-4" />
+                          <Check className="size-3" />
                         </Select.ItemIndicator>
                         <Select.ItemText>{label}</Select.ItemText>
                       </Select.Item>
@@ -150,11 +152,11 @@ function ExampleForm() {
           <Field.Label>Number of instances</Field.Label>
           <NumberField.Group>
             <NumberField.Decrement>
-              <Minus className="size-4" />
+              <Minus className="size-3" />
             </NumberField.Decrement>
-            <NumberField.Input className="!w-16" />
+            <NumberField.Input />
             <NumberField.Increment>
-              <Plus className="size-4" />
+              <Plus className="size-3" />
             </NumberField.Increment>
           </NumberField.Group>
         </NumberField.Root>
@@ -175,7 +177,7 @@ function ExampleForm() {
                 minimumFractionDigits: 0,
                 maximumFractionDigits: 0,
               }}
-              className="w-98/100 gap-y-2"
+              className="w-full gap-y-2"
             />
           }
         >
@@ -214,7 +216,7 @@ function ExampleForm() {
       </Field.Root>
 
       <Field.Root name="restartOnFailure">
-        <Field.Label className="gap-4">
+        <Field.Label className="gap-2">
           Restart on failure
           <Switch.Root defaultChecked>
             <Switch.Thumb />
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
index 76b9d68fb2d..e1c6f85bcf4 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useForm, Controller } from 'react-hook-form';
-import { ChevronDown, ChevronsUpDown, Check, Plus, Minus } from 'lucide-react';
+import { ChevronsUpDown, Check, Plus, Minus } from 'lucide-react';
 import { Button } from '../../components/button';
 import { CheckboxGroup } from '../../components/checkbox-group';
 import { Form } from '../../components/form';
@@ -95,15 +95,17 @@ function ReactHookForm() {
         }) => (
           <Field.Root name={name} invalid={invalid} touched={isTouched} dirty={isDirty}>
             <Combobox.Root items={REGIONS} value={value} onValueChange={onChange}>
-              <div className="relative flex flex-col gap-1 text-sm text-neutral-900">
-                <Field.Label>Region</Field.Label>
-                <Combobox.Input placeholder="e.g. eu-central-1" ref={ref} onBlur={onBlur} />
-                <div className="absolute right-2 bottom-0 flex h-10 items-center justify-center text-neutral-600">
-                  <Combobox.Clear />
-                  <Combobox.Trigger>
-                    <ChevronDown className="size-4" />
-                  </Combobox.Trigger>
-                </div>
+              <div className="relative text-sm leading-5 font-bold text-neutral-950 dark:text-white">
+                <Field.Label className="mb-1 block">Region</Field.Label>
+                <Combobox.InputGroup>
+                  <Combobox.Input placeholder="e.g. eu-central-1" ref={ref} onBlur={onBlur} />
+                  <div className="absolute right-0 bottom-0 inline-flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
+                    <Combobox.Clear />
+                    <Combobox.Trigger>
+                      <Combobox.ChevronDownIcon className="size-3" />
+                    </Combobox.Trigger>
+                  </div>
+                </Combobox.InputGroup>
               </div>
               <Combobox.Portal>
                 <Combobox.Positioner>
@@ -114,7 +116,7 @@ function ReactHookForm() {
                         return (
                           <Combobox.Item key={region} value={region}>
                             <Combobox.ItemIndicator>
-                              <Check className="size-4" />
+                              <Check className="size-3" />
                             </Combobox.ItemIndicator>
                             <span className="col-start-2">{region}</span>
                           </Combobox.Item>
@@ -162,7 +164,7 @@ function ReactHookForm() {
                       {(image: Image) => {
                         return (
                           <Autocomplete.Item key={image.url} value={image}>
-                            <span className="text-base">{image.name}</span>
+                            <span>{image.name}</span>
                             <span className="font-mono whitespace-nowrap text-xs opacity-80">
                               {image.url}
                             </span>
@@ -191,12 +193,12 @@ function ReactHookForm() {
         }) => (
           <Field.Root name={name} invalid={invalid} touched={isTouched} dirty={isDirty}>
             <Select.Root items={SERVER_TYPES} value={value} onValueChange={onChange} inputRef={ref}>
-              <div className="flex flex-col items-start gap-1">
+              <div className="w-fit space-y-1">
                 <Select.Label>Server type</Select.Label>
                 <Select.Trigger className="w-48" onBlur={onBlur}>
                   <Select.Value />
                   <Select.Icon>
-                    <ChevronsUpDown className="size-4" />
+                    <ChevronsUpDown className="size-3" />
                   </Select.Icon>
                 </Select.Trigger>
               </div>
@@ -209,7 +211,7 @@ function ReactHookForm() {
                         return (
                           <Select.Item key={serverType} value={serverType}>
                             <Select.ItemIndicator>
-                              <Check className="size-4" />
+                              <Check className="size-3" />
                             </Select.ItemIndicator>
                             <Select.ItemText>{label}</Select.ItemText>
                           </Select.Item>
@@ -241,11 +243,11 @@ function ReactHookForm() {
               <Field.Label>Number of instances</Field.Label>
               <NumberField.Group>
                 <NumberField.Decrement>
-                  <Minus className="size-4" />
+                  <Minus className="size-3" />
                 </NumberField.Decrement>
-                <NumberField.Input className="!w-16" ref={ref} onBlur={onBlur} />
+                <NumberField.Input ref={ref} onBlur={onBlur} />
                 <NumberField.Increment>
-                  <Plus className="size-4" />
+                  <Plus className="size-3" />
                 </NumberField.Increment>
               </NumberField.Group>
             </NumberField.Root>
@@ -277,7 +279,7 @@ function ReactHookForm() {
                     minimumFractionDigits: 0,
                     maximumFractionDigits: 0,
                   }}
-                  className="w-98/100 gap-y-2"
+                  className="w-full gap-y-2"
                 />
               }
             >
@@ -348,7 +350,7 @@ function ReactHookForm() {
           fieldState: { invalid, isTouched, isDirty },
         }) => (
           <Field.Root name={name} invalid={invalid} touched={isTouched} dirty={isDirty}>
-            <Field.Label className="gap-4">
+            <Field.Label className="gap-2">
               Restart on failure
               <Switch.Root
                 checked={value}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
index 2ab532daad4..f94fa1d8b89 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useForm, revalidateLogic, DeepKeys, ValidationError } from '@tanstack/react-form';
-import { ChevronDown, ChevronsUpDown, Check, Plus, Minus } from 'lucide-react';
+import { ChevronsUpDown, Check, Plus, Minus } from 'lucide-react';
 import { Button } from '../../components/button';
 import { CheckboxGroup } from '../../components/checkbox-group';
 import { RadioGroup } from '../../components/radio-group';
@@ -82,7 +82,7 @@ function TanstackForm() {
   return (
     <form
       aria-label="Launch new cloud server"
-      className="flex w-full max-w-3xs sm:max-w-[20rem] flex-col gap-5"
+      className="flex w-full max-w-3xs flex-col gap-5 sm:max-w-[20rem]"
       noValidate
       onSubmit={(event) => {
         event.preventDefault();
@@ -130,15 +130,17 @@ function TanstackForm() {
                 value={field.state.value}
                 onValueChange={field.handleChange}
               >
-                <div className="relative flex flex-col gap-1 text-sm text-neutral-900">
-                  <Field.Label>Region</Field.Label>
-                  <Combobox.Input placeholder="e.g. eu-central-1" onBlur={field.handleBlur} />
-                  <div className="absolute right-2 bottom-0 flex h-10 items-center justify-center text-neutral-600">
-                    <Combobox.Clear />
-                    <Combobox.Trigger>
-                      <ChevronDown className="size-4" />
-                    </Combobox.Trigger>
-                  </div>
+                <div className="relative text-sm leading-5 font-bold text-neutral-950 dark:text-white">
+                  <Field.Label className="mb-1 block">Region</Field.Label>
+                  <Combobox.InputGroup>
+                    <Combobox.Input placeholder="e.g. eu-central-1" onBlur={field.handleBlur} />
+                    <div className="absolute right-0 bottom-0 inline-flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
+                      <Combobox.Clear />
+                      <Combobox.Trigger>
+                        <Combobox.ChevronDownIcon className="size-3" />
+                      </Combobox.Trigger>
+                    </div>
+                  </Combobox.InputGroup>
                 </div>
                 <Combobox.Portal>
                   <Combobox.Positioner>
@@ -199,7 +201,7 @@ function TanstackForm() {
                         {(image: Image) => {
                           return (
                             <Autocomplete.Item key={image.url} value={image}>
-                              <span className="text-base">{image.name}</span>
+                              <span>{image.name}</span>
                               <span className="font-mono whitespace-nowrap text-xs opacity-80">
                                 {image.url}
                               </span>
@@ -234,12 +236,12 @@ function TanstackForm() {
                 value={field.state.value}
                 onValueChange={field.handleChange}
               >
-                <div className="flex flex-col items-start gap-1">
+                <div className="w-fit space-y-1">
                   <Select.Label>Server type</Select.Label>
-                  <Select.Trigger className="!w-48" onBlur={field.handleBlur}>
+                  <Select.Trigger className="w-48" onBlur={field.handleBlur}>
                     <Select.Value />
                     <Select.Icon>
-                      <ChevronsUpDown className="size-4" />
+                      <ChevronsUpDown className="size-3" />
                     </Select.Icon>
                   </Select.Trigger>
                 </div>
@@ -291,11 +293,11 @@ function TanstackForm() {
                 <Field.Label>Number of instances</Field.Label>
                 <NumberField.Group>
                   <NumberField.Decrement>
-                    <Minus className="size-4" />
+                    <Minus className="size-3" />
                   </NumberField.Decrement>
-                  <NumberField.Input className="!w-16" onBlur={field.handleBlur} />
+                  <NumberField.Input onBlur={field.handleBlur} />
                   <NumberField.Increment>
-                    <Plus className="size-4" />
+                    <Plus className="size-3" />
                   </NumberField.Increment>
                 </NumberField.Group>
               </NumberField.Root>
@@ -332,7 +334,7 @@ function TanstackForm() {
                       minimumFractionDigits: 0,
                       maximumFractionDigits: 0,
                     }}
-                    className="w-98/100 gap-y-2"
+                    className="w-full gap-y-2"
                   />
                 }
               >
@@ -411,7 +413,7 @@ function TanstackForm() {
               dirty={field.state.meta.isDirty}
               touched={field.state.meta.isTouched}
             >
-              <Field.Label className="gap-4">
+              <Field.Label className="gap-2">
                 Restart on failure
                 <Switch.Root
                   checked={field.state.value}

From 31db46b5524439b672f6fda39a904668a1adff19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 6 May 2026 14:39:12 +0200
Subject: [PATCH 134/257] Revert "[REMOVE THIS BEFORE MERGING] Mark sidenav
 links"

This reverts commit 293826fc7f84b4c4b86ddd62432fd6f7032fdde5.
---
 docs/src/app/(docs)/layout.tsx | 72 +++-------------------------------
 1 file changed, 5 insertions(+), 67 deletions(-)

diff --git a/docs/src/app/(docs)/layout.tsx b/docs/src/app/(docs)/layout.tsx
index 3b66dbc9a85..26a24155378 100644
--- a/docs/src/app/(docs)/layout.tsx
+++ b/docs/src/app/(docs)/layout.tsx
@@ -14,56 +14,6 @@ import { sitemap } from 'docs/src/app/sitemap';
 
 const showPrivatePages = process.env.SHOW_PRIVATE_PAGES === 'true';
 
-const MIGRATED_PATHS = new Set([
-  // Components
-  'accordion',
-  'alert-dialog',
-  'avatar',
-  'autocomplete',
-  'button',
-  'checkbox',
-  'checkbox-group',
-  'collapsible',
-  'context-menu',
-  'dialog',
-  'drawer',
-  'field',
-  'fieldset',
-  'form',
-  'input',
-  'menu',
-  'menubar',
-  'meter',
-  'navigation-menu',
-  'number-field',
-  'otp-field',
-  'popover',
-  'preview-card',
-  'progress',
-  'radio',
-  'scroll-area',
-  'select',
-  'separator',
-  'slider',
-  'switch',
-  'tabs',
-  'toast',
-  'toggle',
-  'toggle-group',
-  'toolbar',
-  'tooltip',
-
-  // Utils
-  'direction-provider',
-  'merge-props',
-  'use-render',
-]);
-
-function isMigratedPath(href: string) {
-  const match =
-    href.match(/^\/react\/components\/([^/]+)\/?$/) || href.match(/^\/react\/utils\/([^/]+)\/?$/);
-  return match ? MIGRATED_PATHS.has(match[1]) : false;
-}
 export default function Layout({ children }: React.PropsWithChildren) {
   return (
     // Use suppressHydrationWarning to avoid https://github.com/facebook/react/issues/24430
@@ -120,14 +70,15 @@ export default function Layout({ children }: React.PropsWithChildren) {
                                   const isNewPage = page.tags?.includes('New');
                                   const isPreviewPage = page.tags?.includes('Preview');
                                   const isPrivatePage = page.audience === 'private';
-                                  const href = page.path.startsWith('./')
-                                    ? `${section.prefix}${page.path.replace(/^\.\//, '').replace(/\/page\.mdx$/, '')}`
-                                    : page.path;
 
                                   return (
                                     <SideNav.Item
                                       key={page.title}
-                                      href={href}
+                                      href={
+                                        page.path.startsWith('./')
+                                          ? `${section.prefix}${page.path.replace(/^\.\//, '').replace(/\/page\.mdx$/, '')}`
+                                          : page.path
+                                      }
                                       external={page.tags?.includes('External')}
                                     >
                                       {(page.title && titleMap[page.title]) || page.title}
@@ -136,19 +87,6 @@ export default function Layout({ children }: React.PropsWithChildren) {
                                       {isNewPage && !isPreviewPage && !isPrivatePage && (
                                         <SideNav.Badge>New</SideNav.Badge>
                                       )}
-                                      {isMigratedPath(href) && (
-                                        <span
-                                          aria-hidden
-                                          style={{
-                                            width: '0.5rem',
-                                            height: '0.5rem',
-                                            borderRadius: '50%',
-                                            backgroundColor: 'var(--orange-t1)',
-                                            flexShrink: '0',
-                                            marginLeft: '4px',
-                                          }}
-                                        />
-                                      )}
                                     </SideNav.Item>
                                   );
                                 })}

From 05b573c18d41b34c983ab6f5fdb15a1cc7871c96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 6 May 2026 14:49:50 +0200
Subject: [PATCH 135/257] All: improve field description color

---
 .../components/field/demos/hero/css-modules/index.module.css  | 2 +-
 .../react/components/field/demos/hero/tailwind/index.tsx      | 2 +-
 .../otp-field/demos/alphanumeric/css-modules/index.module.css | 2 +-
 .../otp-field/demos/alphanumeric/tailwind/index.tsx           | 2 +-
 .../demos/custom-sanitize/css-modules/index.module.css        | 2 +-
 .../demos/focused-placeholder/css-modules/index.module.css    | 4 ++--
 .../otp-field/demos/focused-placeholder/tailwind/index.tsx    | 2 +-
 .../otp-field/demos/hero/css-modules/index.module.css         | 2 +-
 .../react/components/otp-field/demos/hero/tailwind/index.tsx  | 2 +-
 .../otp-field/demos/password/css-modules/index.module.css     | 2 +-
 .../components/otp-field/demos/password/tailwind/index.tsx    | 2 +-
 11 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
index 3f5b42e4aa2..52df9e2047a 100644
--- a/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
@@ -47,5 +47,5 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
diff --git a/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
index 57f7c509d22..8d200747e42 100644
--- a/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleField() {
         Please enter your name
       </Field.Error>
 
-      <Field.Description className="text-sm text-neutral-500 dark:text-neutral-400">
+      <Field.Description className="text-sm text-neutral-600 dark:text-neutral-400">
         Visible on your profile
       </Field.Description>
     </Field.Root>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
index 6b2910e458c..ab50b162bb4 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
@@ -44,7 +44,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .Code {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
index 2ebc7f1aa33..de97f95090c 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
@@ -27,7 +27,7 @@ export default function OTPFieldAlphanumericDemo() {
           />
         ))}
       </OTPField.Root>
-      <p id={descriptionId} className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
+      <p id={descriptionId} className="m-0 text-sm text-neutral-600 dark:text-neutral-400">
         Accept letters and numbers for backup codes such as{' '}
         <code className="font-mono">A7C9XZ</code>.
       </p>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
index 8e2f83523a3..8c659d671f8 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
@@ -68,7 +68,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .Code {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
index 5d986258ec8..7d0d11f4563 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
@@ -35,7 +35,7 @@
   color: light-dark(var(--color-neutral-950), white);
 
   &::placeholder {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
   }
 
   &:focus {
@@ -52,5 +52,5 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
index 0e0a5b6e068..57e61298df4 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
@@ -27,7 +27,7 @@ export default function OTPFieldFocusedPlaceholderDemo() {
           />
         ))}
       </OTPField.Root>
-      <p id={descriptionId} className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
+      <p id={descriptionId} className="m-0 text-sm text-neutral-600 dark:text-neutral-400">
         Placeholder hints can stay visible until the active slot is focused.
       </p>
     </div>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
index b64524f186c..4bdd7c92266 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
@@ -44,5 +44,5 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
index 0a7ffe965a1..d22c9f578ba 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
@@ -26,7 +26,7 @@ export default function ExampleOTPField() {
           />
         ))}
       </OTPField.Root>
-      <p id={descriptionId} className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
+      <p id={descriptionId} className="m-0 text-sm text-neutral-600 dark:text-neutral-400">
         Enter the 6-character code we sent to your device.
       </p>
     </div>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
index 6b2910e458c..ab50b162bb4 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
@@ -44,7 +44,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }
 
 .Code {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
index 1ef96a282ad..7daea7ad7ce 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
@@ -27,7 +27,7 @@ export default function OTPFieldPasswordDemo() {
           />
         ))}
       </OTPField.Root>
-      <p id={descriptionId} className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
+      <p id={descriptionId} className="m-0 text-sm text-neutral-600 dark:text-neutral-400">
         Use <code className="font-mono">mask</code> to obscure the code on shared screens.
       </p>
     </div>

From 7feadc42dd8254f179fb39e77ca033a62abf1f30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 6 May 2026 17:08:01 +0200
Subject: [PATCH 136/257] All: tweak icons

---
 .../demos/hero/css-modules/index.tsx          | 10 +---
 .../demos/hero/tailwind/index.tsx             | 10 +---
 .../demos/nested/css-modules/index.tsx        | 12 +----
 .../demos/parent/css-modules/index.tsx        | 12 +----
 .../checkbox/demos/hero/css-modules/index.tsx | 10 +---
 .../checkbox/demos/hero/tailwind/index.tsx    | 12 +----
 .../demos/hero/css-modules/index.tsx          |  2 +-
 .../collapsible/demos/hero/tailwind/index.tsx |  2 +-
 .../async-multiple/css-modules/index.tsx      | 20 +-------
 .../demos/async-multiple/tailwind/index.tsx   | 20 +-------
 .../demos/async-single/css-modules/index.tsx  | 22 ++-------
 .../demos/async-single/tailwind/index.tsx     | 22 ++-------
 .../demos/creatable/css-modules/index.tsx     | 20 +-------
 .../demos/creatable/tailwind/index.tsx        | 20 +-------
 .../demos/grouped/css-modules/index.tsx       | 22 ++-------
 .../combobox/demos/grouped/tailwind/index.tsx | 22 ++-------
 .../combobox/demos/hero/css-modules/index.tsx | 22 ++-------
 .../combobox/demos/hero/tailwind/index.tsx    | 22 ++-------
 .../css-modules/index.module.css              |  5 ++
 .../input-inside-popup/css-modules/index.tsx  | 24 ++--------
 .../input-inside-popup/tailwind/index.tsx     | 26 ++--------
 .../demos/multiple/css-modules/index.tsx      | 20 +-------
 .../demos/multiple/tailwind/index.tsx         | 20 +-------
 .../demos/virtualized/css-modules/index.tsx   | 10 +---
 .../demos/virtualized/tailwind/index.tsx      | 10 +---
 .../submenu/css-modules/index.module.css      |  5 ++
 .../demos/submenu/css-modules/index.tsx       |  9 +---
 .../demos/submenu/tailwind/index.tsx          | 11 ++---
 .../outside-scroll/css-modules/index.tsx      | 10 +---
 .../demos/outside-scroll/tailwind/index.tsx   | 10 +---
 .../demos/uncontained/css-modules/index.tsx   | 10 +---
 .../demos/uncontained/tailwind/index.tsx      | 10 +---
 .../mobile-nav/css-modules/index.module.css   |  5 ++
 .../demos/mobile-nav/css-modules/index.tsx    | 21 ++++-----
 .../demos/mobile-nav/tailwind/index.tsx       | 21 ++++-----
 .../css-modules/index.module.css              |  2 +
 .../checkbox-items/css-modules/index.tsx      | 12 +----
 .../demos/checkbox-items/tailwind/index.tsx   | 14 ++----
 .../css-modules/index.tsx                     | 10 +---
 .../group-labels/css-modules/index.module.css |  2 +
 .../demos/group-labels/css-modules/index.tsx  | 14 ++----
 .../demos/group-labels/tailwind/index.tsx     | 16 ++-----
 .../demos/hero/css-modules/index.module.css   |  2 +
 .../menu/demos/hero/css-modules/index.tsx     |  2 +-
 .../menu/demos/hero/tailwind/index.tsx        |  4 +-
 .../css-modules/index.module.css              |  2 +
 .../demos/open-on-hover/css-modules/index.tsx |  2 +-
 .../demos/open-on-hover/tailwind/index.tsx    |  4 +-
 .../radio-items/css-modules/index.module.css  |  2 +
 .../demos/radio-items/css-modules/index.tsx   | 12 +----
 .../menu/demos/radio-items/tailwind/index.tsx | 14 ++----
 .../submenu/css-modules/index.module.css      |  7 +++
 .../menu/demos/submenu/css-modules/index.tsx  |  6 +--
 .../menu/demos/submenu/tailwind/index.tsx     | 10 ++--
 .../demos/hero/css-modules/index.module.css   |  5 ++
 .../menubar/demos/hero/css-modules/index.tsx  |  4 +-
 .../menubar/demos/hero/tailwind/index.tsx     |  8 ++--
 .../demos/hero/css-modules/index.module.css   | 10 ++++
 .../demos/hero/css-modules/index.tsx          |  2 +-
 .../demos/hero/tailwind/index.tsx             |  6 +--
 .../css-modules/index.module.css              | 10 ++++
 .../demos/nested-inline/css-modules/index.tsx |  2 +-
 .../demos/nested-inline/tailwind/index.tsx    |  6 +--
 .../demos/nested/css-modules/index.module.css | 15 ++++++
 .../demos/nested/css-modules/index.tsx        |  4 +-
 .../demos/nested/tailwind/index.tsx           |  8 ++--
 .../css-modules/index.tsx                     |  2 +-
 .../tailwind/index.tsx                        |  6 +--
 .../css-modules/index.tsx                     | 15 ++----
 .../css-modules/index.tsx                     |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../popover/demos/hero/css-modules/index.tsx  |  2 +-
 .../popover/demos/hero/tailwind/index.tsx     |  2 +-
 .../components/popover/demos/icons-tw.tsx     | 15 ++----
 .../demos/open-on-hover/css-modules/index.tsx |  2 +-
 .../demos/open-on-hover/tailwind/index.tsx    |  2 +-
 .../grouped/css-modules/index.module.css      |  5 ++
 .../demos/grouped/css-modules/index.tsx       | 24 ++--------
 .../select/demos/grouped/tailwind/index.tsx   | 26 ++--------
 .../demos/hero/css-modules/index.module.css   |  5 ++
 .../select/demos/hero/css-modules/index.tsx   | 24 ++--------
 .../select/demos/hero/tailwind/index.tsx      | 26 ++--------
 .../multiple/css-modules/index.module.css     |  5 ++
 .../demos/multiple/css-modules/index.tsx      | 24 ++--------
 .../select/demos/multiple/tailwind/index.tsx  | 26 ++--------
 .../css-modules/index.module.css              |  5 ++
 .../demos/object-values/css-modules/index.tsx | 24 ++--------
 .../demos/object-values/tailwind/index.tsx    | 26 ++--------
 .../demos/anchored/css-modules/index.tsx      | 20 +-------
 .../toast/demos/anchored/tailwind/index.tsx   | 20 +-------
 .../demos/hero/css-modules/index.tsx          |  6 +--
 .../demos/hero/tailwind/index.tsx             |  6 +--
 .../demos/multiple/css-modules/index.tsx      | 12 ++---
 .../demos/multiple/tailwind/index.tsx         | 12 ++---
 .../toggle/demos/hero/css-modules/index.tsx   |  4 +-
 .../toggle/demos/hero/tailwind/index.tsx      |  4 +-
 .../demos/hero/css-modules/index.module.css   |  5 ++
 .../toolbar/demos/hero/css-modules/index.tsx  | 24 ++--------
 .../toolbar/demos/hero/tailwind/index.tsx     | 26 ++--------
 .../css-modules/index.tsx                     |  3 +-
 .../tailwind/index.tsx                        |  6 +--
 .../css-modules/index.tsx                     |  9 ++--
 .../css-modules/index.tsx                     |  3 +-
 .../tailwind/index.tsx                        |  2 +-
 .../tooltip/demos/hero/css-modules/index.tsx  |  6 +--
 .../tooltip/demos/hero/tailwind/index.tsx     |  6 +--
 .../components/tooltip/demos/icons-tw.tsx     |  9 +---
 .../css-modules/index.module.css              |  5 ++
 .../css-modules/index.tsx                     | 18 ++-----
 .../forms/demos/components/combobox.tsx       | 12 +----
 .../forms/demos/components/select.tsx         |  2 +-
 .../handbook/forms/demos/components/toast.tsx | 14 ++++--
 .../forms/demos/hero/tailwind/index.tsx       | 47 ++++++++++++++++---
 .../demos/react-hook-form/tailwind/index.tsx  | 47 ++++++++++++++++---
 .../demos/tanstack-form/tailwind/index.tsx    | 47 ++++++++++++++++---
 .../css-modules/index.tsx                     |  4 +-
 116 files changed, 480 insertions(+), 895 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
index c04914d3538..7959f2991b8 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
@@ -48,15 +48,7 @@ export default function ExampleCheckboxGroup() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
index 1f7e1328a11..800239ebe1d 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
@@ -59,15 +59,7 @@ export default function ExampleCheckboxGroup() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
index f27ef90a33c..00fb2bae4c0 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
@@ -146,15 +146,7 @@ export default function PermissionsForm() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -162,7 +154,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function HorizontalRuleIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" strokeWidth={1} {...props}>
+    <svg viewBox="0 0 24 24" fill="currentColor" strokeWidth={1} {...props}>
       <line
         x1="3"
         y1="12"
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
index c5e4a957783..9eef2ec71b2 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
@@ -69,15 +69,7 @@ export default function ExampleCheckboxGroup() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -85,7 +77,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function HorizontalRuleIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" strokeWidth={1} {...props}>
+    <svg viewBox="0 0 24 24" fill="currentColor" strokeWidth={1} {...props}>
       <line
         x1="3"
         y1="12"
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
index c39c494910f..238443914a0 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
@@ -17,15 +17,7 @@ export default function ExampleCheckbox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
index d9551b61396..7094b9707e9 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
@@ -19,16 +19,8 @@ export default function ExampleCheckbox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      {...props}
-    >
-      <path d="M20 6 9 17l-5-5" />
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx
index 40738e61b25..331556ca764 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx
@@ -22,7 +22,7 @@ export default function ExampleCollapsible() {
 
 export function ChevronIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" {...props}>
       <path d="M3.5 1L7.5 5L3.5 9" stroke="currentColor" strokeWidth="1" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
index 4e1ac29ae14..bb0b3630a0b 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
@@ -21,7 +21,7 @@ export default function ExampleCollapsible() {
 
 export function ChevronIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" {...props}>
       <path d="M3.5 1L7.5 5L3.5 9" stroke="currentColor" strokeWidth="1" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
index 396f7532293..a0637896920 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
@@ -199,15 +199,7 @@ export default function ExampleAsyncMultipleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -215,15 +207,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index 2fb5fd8299d..62b35cb8816 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -223,15 +223,7 @@ export default function ExampleAsyncMultipleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -239,15 +231,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
index 83f9d32bb58..4a2a06dde1c 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
@@ -160,15 +160,7 @@ export default function ExampleAsyncSingleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -176,15 +168,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -193,7 +177,7 @@ function XIcon(props: React.ComponentProps<'svg'>) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index fdc199eba78..e3f05fc2a5b 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -186,15 +186,7 @@ export default function ExampleAsyncSingleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -202,15 +194,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -219,7 +203,7 @@ function XIcon(props: React.ComponentProps<'svg'>) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
index 741488dc9c6..304f83ca316 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
@@ -221,15 +221,7 @@ export default function ExampleCreatableCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -246,15 +238,7 @@ function PlusIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
index 016768d0f8e..baf714c2d2e 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
@@ -241,15 +241,7 @@ export default function ExampleCreatableCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -266,15 +258,7 @@ function PlusIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
index 9ee513e525e..b5a6baf62c1 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
@@ -56,15 +56,7 @@ export default function ExampleGroupedCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -72,15 +64,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -89,7 +73,7 @@ function XIcon(props: React.ComponentProps<'svg'>) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index dd6d1b61122..200c01bab81 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -71,15 +71,7 @@ export default function ExampleGroupedCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -87,15 +79,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -104,7 +88,7 @@ function XIcon(props: React.ComponentProps<'svg'>) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
index c22a4c91756..ddb39025a0d 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
@@ -47,15 +47,7 @@ export default function ExampleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -63,15 +55,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -80,7 +64,7 @@ function XIcon(props: React.ComponentProps<'svg'>) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
index ae65b985970..8ce50513a52 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
@@ -62,15 +62,7 @@ export default function ExampleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -78,15 +70,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -95,7 +79,7 @@ function XIcon(props: React.ComponentProps<'svg'>) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
index 6a9618ab6b1..7f7df5db6e3 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
@@ -49,6 +49,11 @@
 
 .TriggerIcon {
   display: flex;
+
+  & svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
 }
 
 .Placeholder {
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
index 4c96e5e5c82..97618b6c2eb 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
@@ -45,32 +45,16 @@ export default function ExamplePopoverCombobox() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      {...props}
-    >
-      <path d="m7 15 5 5 5-5" />
-      <path d="m7 9 5-5 5 5" />
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index 59e0fc6a658..48eddf2a8d3 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function ExamplePopoverCombobox() {
             }
           />
           <Combobox.Icon className="flex">
-            <ChevronUpDownIcon />
+            <ChevronUpDownIcon className="size-3" />
           </Combobox.Icon>
         </Combobox.Trigger>
         <Combobox.Portal>
@@ -60,32 +60,16 @@ export default function ExamplePopoverCombobox() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      {...props}
-    >
-      <path d="m7 15 5 5 5-5" />
-      <path d="m7 9 5-5 5 5" />
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
index bf4c40460c5..39e326aa161 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
@@ -69,15 +69,7 @@ export default function ExampleMultipleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -85,15 +77,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
index d9ff6b7320d..294a9137a3d 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
@@ -77,15 +77,7 @@ export default function ExampleMultipleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -93,15 +85,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
index 87c10dec7ca..7ca97456ae3 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
@@ -140,15 +140,7 @@ function VirtualizedList({
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
index cf959c9f23e..f5486e611ba 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
@@ -143,15 +143,7 @@ function VirtualizedList({
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
index c45d3e4a0b8..8fe343dbe33 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
@@ -140,6 +140,11 @@
   justify-content: space-between;
   gap: 1rem;
   padding-right: 1rem;
+
+  & svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
 }
 
 .Separator {
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.tsx
index b3b9e30ebd9..26d239e21d9 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.tsx
@@ -49,13 +49,8 @@ export default function ExampleContextMenu() {
 
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path
-        d="M3.5 9L7.5 5L3.5 1"
-        stroke="currentColor"
-        strokeWidth="1"
-        vectorEffect="non-scaling-stroke"
-      />
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
index 328f043e7a2..1fa5a350c3c 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
@@ -21,7 +21,7 @@ export default function ExampleContextMenu() {
 
             <ContextMenu.SubmenuRoot>
               <ContextMenu.SubmenuTrigger className={submenuTriggerClass}>
-                Add to Playlist <ChevronRightIcon />
+                Add to Playlist <ChevronRightIcon className="size-3" />
               </ContextMenu.SubmenuTrigger>
               <ContextMenu.Portal>
                 <ContextMenu.Positioner className="outline-hidden" alignOffset={-4} sideOffset={-4}>
@@ -52,13 +52,8 @@ export default function ExampleContextMenu() {
 
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path
-        d="M3.5 9L7.5 5L3.5 1"
-        stroke="currentColor"
-        strokeWidth="1"
-        vectorEffect="non-scaling-stroke"
-      />
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx
index 8f210ce23ab..cfa3213d214 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx
@@ -64,15 +64,7 @@ export default function OutsideScrollDialog() {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index f23dbefe160..d124be1376d 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -80,15 +80,7 @@ export default function OutsideScrollDialog() {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx
index 355ed7bc059..20b87a22b24 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx
@@ -22,15 +22,7 @@ export default function ExampleUncontainedDialog() {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
index 13e74b5b066..5e180e2b981 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
@@ -26,15 +26,7 @@ export default function ExampleUncontainedDialog() {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
index 464b93da13f..f4acf2cb4e8 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
@@ -209,6 +209,11 @@
   }
 }
 
+.CloseIcon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
 .Title {
   margin: 0 0 0.25rem;
   font-size: 1rem;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.tsx
index d096abfa19c..e678bc04b58 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.tsx
@@ -67,17 +67,7 @@ export default function ExampleDrawerMobileNav() {
                       <div aria-hidden className={styles.HeaderSpacer} />
                       <div className={styles.Handle} />
                       <Drawer.Close aria-label="Close menu" className={styles.CloseButton}>
-                        <svg
-                          width="16"
-                          height="16"
-                          viewBox="0 0 12 12"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="1"
-                        >
-                          <path d="M6 0.5V11.5" transform="rotate(45 6 6)" />
-                          <path d="M0.5 6H11.5" transform="rotate(45 6 6)" />
-                        </svg>
+                        <XIcon className={styles.CloseIcon} />
                       </Drawer.Close>
                     </div>
 
@@ -122,3 +112,12 @@ export default function ExampleDrawerMobileNav() {
     </Drawer.Root>
   );
 }
+
+function XIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
+      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
index 8ad942e4077..26603c1a5d2 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
@@ -77,17 +77,7 @@ export default function ExampleDrawerMobileNav() {
                         aria-label="Close menu"
                         className="flex h-9 w-9 items-center justify-center justify-self-end border-0 bg-transparent text-neutral-950 hover:bg-neutral-100 active:bg-neutral-200 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
                       >
-                        <svg
-                          width="16"
-                          height="16"
-                          viewBox="0 0 12 12"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="1"
-                        >
-                          <path d="M6 0.5V11.5" transform="rotate(45 6 6)" />
-                          <path d="M0.5 6H11.5" transform="rotate(45 6 6)" />
-                        </svg>
+                        <XIcon className="size-5" />
                       </Drawer.Close>
                     </div>
 
@@ -141,3 +131,12 @@ export default function ExampleDrawerMobileNav() {
     </Drawer.Root>
   );
 }
+
+function XIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
+      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
index 646fa333435..8aa11985a14 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
@@ -44,6 +44,8 @@
 }
 
 .ButtonIcon {
+  width: 0.75rem;
+  height: 0.75rem;
   margin-right: -0.25rem;
 }
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
index f561da48ee6..0ce20b13043 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
@@ -56,7 +56,7 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -64,15 +64,7 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckboxCheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index f17da17aa0d..1a794b4d98a 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
-        Workspace <ChevronDownIcon className="-mr-1" />
+        Workspace <ChevronDownIcon className="size-3 -mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
@@ -58,7 +58,7 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -66,15 +66,7 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckboxCheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx
index aea13861ce9..0502910c224 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx
@@ -34,15 +34,7 @@ export default function MenuDetachedTriggersSimpleDemo() {
 
 function DotsIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1}
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1} {...props}>
       <circle cx="5" cy="12" r="1" fill="currentColor" vectorEffect="non-scaling-stroke" />
       <circle cx="12" cy="12" r="1" fill="currentColor" vectorEffect="non-scaling-stroke" />
       <circle cx="19" cy="12" r="1" fill="currentColor" vectorEffect="non-scaling-stroke" />
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
index 0da862a2aec..436a90b3984 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
@@ -44,6 +44,8 @@
 }
 
 .ButtonIcon {
+  width: 0.75rem;
+  height: 0.75rem;
   margin-right: -0.25rem;
 }
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
index 92490456252..b5a522bac74 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
@@ -87,7 +87,7 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -95,16 +95,8 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckboxCheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      {...props}
-    >
-      <path d="M20 6 9 17l-5-5" />
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index 4dc98489024..65035ffa593 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
-        View <ChevronDownIcon className="-mr-1" />
+        View <ChevronDownIcon className="size-3 -mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
@@ -93,7 +93,7 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -101,16 +101,8 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckboxCheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      {...props}
-    >
-      <path d="M20 6 9 17l-5-5" />
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
index c7c54e97d10..b4569daea0f 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
@@ -44,6 +44,8 @@
 }
 
 .ButtonIcon {
+  width: 0.75rem;
+  height: 0.75rem;
   margin-right: -0.25rem;
 }
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx
index 96d69317e8e..29d3aed4985 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx
@@ -29,7 +29,7 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
index 3b91892c39e..ca6271aba2d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
-        Song <ChevronDownIcon className="-mr-1" />
+        Song <ChevronDownIcon className="size-3 -mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
@@ -31,7 +31,7 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
index c7c54e97d10..b4569daea0f 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
@@ -44,6 +44,8 @@
 }
 
 .ButtonIcon {
+  width: 0.75rem;
+  height: 0.75rem;
   margin-right: -0.25rem;
 }
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx
index 56b3d8c3cb8..9c042295757 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx
@@ -26,7 +26,7 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
index e2effe5c4e9..14babdc96c5 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
@@ -11,7 +11,7 @@ export default function ExampleMenu() {
         openOnHover
         className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
-        Add to playlist <ChevronDownIcon className="-mr-1" />
+        Add to playlist <ChevronDownIcon className="size-3 -mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
@@ -31,7 +31,7 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
index ea00ae8ee6a..f2fd16e491a 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
@@ -44,6 +44,8 @@
 }
 
 .ButtonIcon {
+  width: 0.75rem;
+  height: 0.75rem;
   margin-right: -0.25rem;
 }
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
index d368343aa31..e2322d391fe 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
@@ -43,7 +43,7 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -51,15 +51,7 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index 740296bd3f1..4f6adc42626 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -10,7 +10,7 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
-        Sort <ChevronDownIcon className="-mr-1" />
+        Sort <ChevronDownIcon className="size-3 -mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
@@ -45,7 +45,7 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -53,15 +53,7 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
index 61b26910d68..1947461f66c 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
@@ -44,6 +44,8 @@
 }
 
 .ButtonIcon {
+  width: 0.75rem;
+  height: 0.75rem;
   margin-right: -0.25rem;
 }
 
@@ -173,6 +175,11 @@
   justify-content: space-between;
   gap: 1rem;
   padding-right: 1rem;
+
+  & svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
 }
 
 .Separator {
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx
index 85386883d21..ca598968f6a 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx
@@ -56,7 +56,7 @@ function getOffset({ side }: { side: Menu.Positioner.Props['side'] }) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -64,8 +64,8 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" strokeWidth="1" />
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
index 7ce9b23ae27..892c6ad53b9 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
-        Song <ChevronDownIcon className="-mr-1" />
+        Song <ChevronDownIcon className="size-3 -mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
@@ -23,7 +23,7 @@ export default function ExampleMenu() {
 
             <Menu.SubmenuRoot>
               <Menu.SubmenuTrigger className={submenuTriggerClass}>
-                Add to Playlist <ChevronRightIcon />
+                Add to Playlist <ChevronRightIcon className="size-3" />
               </Menu.SubmenuTrigger>
               <Menu.Portal>
                 <Menu.Positioner
@@ -65,7 +65,7 @@ function getOffset({ side }: { side: Menu.Positioner.Props['side'] }) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -73,8 +73,8 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" strokeWidth="1" />
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
index d039313a461..ddf12792a68 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
@@ -121,6 +121,11 @@
   &[data-highlighted][data-popup-open]::before {
     background-color: light-dark(var(--color-neutral-950), white);
   }
+
+  & svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
 }
 
 .MenuSeparator {
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
index f1ab0228538..4246355e5f5 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
@@ -137,8 +137,8 @@ function handleClick(event: React.MouseEvent<HTMLElement>) {
 
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
-      <path d="M6 12L10 8L6 4" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
index 5b6c7fa3226..576744c030a 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
@@ -35,7 +35,7 @@ export default function ExampleMenubar() {
               <Menu.SubmenuRoot>
                 <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white">
                   Export
-                  <ChevronRightIcon />
+                  <ChevronRightIcon className="size-3" />
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
                   <Menu.Positioner className="outline-none" sideOffset={-4} alignOffset={-4}>
@@ -128,7 +128,7 @@ export default function ExampleMenubar() {
               <Menu.SubmenuRoot>
                 <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white">
                   Layout
-                  <ChevronRightIcon />
+                  <ChevronRightIcon className="size-3" />
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
                   <Menu.Positioner className="outline-none" sideOffset={-4} alignOffset={-4}>
@@ -184,8 +184,8 @@ function handleClick(event: React.MouseEvent<HTMLElement>) {
 
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
-      <path d="M6 12L10 8L6 4" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
index 8a016bdef41..1f62befa100 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
@@ -54,11 +54,21 @@
 }
 
 .Icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.75rem;
+  height: 0.75rem;
   transition: transform 150ms ease;
 
   &[data-popup-open] {
     transform: rotate(180deg);
   }
+
+  & svg {
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .Positioner {
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx
index e4a0fdc3524..999fb53d56f 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx
@@ -88,7 +88,7 @@ function Link(props: NavigationMenu.Link.Props) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
index ab55a49eb89..12842e7b93a 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={triggerClassName}>
             Overview
             <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
-              <ChevronDownIcon />
+              <ChevronDownIcon className="size-3" />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
@@ -33,7 +33,7 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={triggerClassName}>
             Handbook
             <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
-              <ChevronDownIcon />
+              <ChevronDownIcon className="size-3" />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
@@ -97,7 +97,7 @@ function Link(props: NavigationMenu.Link.Props) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
index 7724d5300d8..08ee53208f5 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
@@ -54,11 +54,21 @@
 }
 
 .Icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.75rem;
+  height: 0.75rem;
   transition: transform 150ms ease;
 
   &[data-popup-open] {
     transform: rotate(180deg);
   }
+
+  & svg {
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .Positioner {
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx
index ba0fcbb262f..ff5165595a9 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx
@@ -131,7 +131,7 @@ function Link(props: NavigationMenu.Link.Props) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
index a63f80af90b..7fc88d1b58f 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={triggerClassName}>
             Product
             <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
-              <ChevronDownIcon />
+              <ChevronDownIcon className="size-3" />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
@@ -69,7 +69,7 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={triggerClassName}>
             Learn
             <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
-              <ChevronDownIcon />
+              <ChevronDownIcon className="size-3" />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
@@ -147,7 +147,7 @@ function Link(props: NavigationMenu.Link.Props) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
index b72f8b78732..edd36208be3 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
@@ -54,11 +54,21 @@
 }
 
 .Icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.75rem;
+  height: 0.75rem;
   transition: transform 150ms ease;
 
   &[data-popup-open] {
     transform: rotate(180deg);
   }
+
+  & svg {
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .Positioner {
@@ -313,4 +323,9 @@
   &[data-popup-open] {
     transform: rotate(180deg);
   }
+
+  & svg {
+    width: 100%;
+    height: 100%;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx
index a8e6f135378..edf6a231ccf 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx
@@ -101,7 +101,7 @@ function Link(props: NavigationMenu.Link.Props) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -109,7 +109,7 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M3.5 1L7.5 5L3.5 9" stroke="currentColor" strokeWidth="1" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
index aef8bdd4fb0..c354b0c65a3 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={triggerClassName}>
             Overview
             <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
-              <ChevronDownIcon />
+              <ChevronDownIcon className="size-3" />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
@@ -34,7 +34,7 @@ export default function ExampleNavigationMenu() {
                         How to use Base UI effectively.
                       </p>
                       <NavigationMenu.Icon className="absolute top-1/2 right-2.5 flex h-2.5 w-2.5 -translate-y-1/2 items-center justify-center transition-transform duration-200 ease-in-out data-popup-open:rotate-180">
-                        <ChevronRightIcon />
+                        <ChevronRightIcon className="size-2.5" />
                       </NavigationMenu.Icon>
                     </NavigationMenu.Trigger>
                     <NavigationMenu.Content className={contentClassName}>
@@ -115,7 +115,7 @@ function Link(props: NavigationMenu.Link.Props) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -123,7 +123,7 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M3.5 1L7.5 5L3.5 9" stroke="currentColor" strokeWidth="1" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/css-modules/index.tsx
index 3a57f5fc968..1f2d65495a7 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/css-modules/index.tsx
@@ -65,7 +65,7 @@ export default function PopoverDetachedTriggersControlledDemo() {
 
 function BellIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="20" height="20" viewBox="0 0 16 16" {...props}>
+    <svg fill="currentColor" viewBox="0 0 16 16" {...props}>
       <path d="M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
index 1b50ddce1ec..39f1e40017c 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -22,7 +22,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
           handle={demoPopover}
           id="trigger-1"
         >
-          <BellIcon aria-label="Notifications" />
+          <BellIcon aria-label="Notifications" className="size-5" />
         </Popover.Trigger>
 
         <Popover.Trigger
@@ -30,7 +30,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
           handle={demoPopover}
           id="trigger-2"
         >
-          <BellIcon aria-label="Notifications" />
+          <BellIcon aria-label="Notifications" className="size-5" />
         </Popover.Trigger>
 
         <Popover.Trigger
@@ -38,7 +38,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
           handle={demoPopover}
           id="trigger-3"
         >
-          <BellIcon aria-label="Notifications" />
+          <BellIcon aria-label="Notifications" className="size-5" />
         </Popover.Trigger>
 
         <button
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx
index 1ee5752a54a..a357b94aab4 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx
@@ -89,7 +89,7 @@ function ActivityPanel() {
 
 function BellIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="20" height="20" viewBox="0 0 16 16" {...props}>
+    <svg fill="currentColor" viewBox="0 0 16 16" {...props}>
       <path d="M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z" />
     </svg>
   );
@@ -97,15 +97,7 @@ function BellIcon(props: React.ComponentProps<'svg'>) {
 
 function UserIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.5}
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} {...props}>
       <path d="M18 20a6 6 0 0 0-12 0" />
       <circle cx="12" cy="10" r="4" />
       <circle cx="12" cy="12" r="10" />
@@ -116,12 +108,11 @@ function UserIcon(props: React.ComponentProps<'svg'>) {
 function ListIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="24"
-      height="24"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
       strokeWidth={1.5}
+      strokeLinecap="square"
       {...props}
     >
       <path d="M3 5h.01" />
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/css-modules/index.tsx
index 3c80ef85a1c..a1df1ff4c3b 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/css-modules/index.tsx
@@ -31,7 +31,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
 
 function BellIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="20" height="20" viewBox="0 0 16 16" {...props}>
+    <svg fill="currentColor" viewBox="0 0 16 16" {...props}>
       <path d="M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
index 1046ef4e2c0..0526ffbf8d2 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
         className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
       >
-        <BellIcon aria-label="Notifications" />
+        <BellIcon aria-label="Notifications" className="size-5" />
       </Popover.Trigger>
 
       <Popover.Root handle={demoPopover}>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/css-modules/index.tsx
index af144e3e555..08f15bc3c1a 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/css-modules/index.tsx
@@ -25,7 +25,7 @@ export default function ExamplePopover() {
 
 function BellIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="20" height="20" viewBox="0 0 16 16" {...props}>
+    <svg fill="currentColor" viewBox="0 0 16 16" {...props}>
       <path d="M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
index f228238bd0a..f4f446e0713 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
@@ -5,7 +5,7 @@ export default function ExamplePopover() {
   return (
     <Popover.Root>
       <Popover.Trigger className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
-        <BellIcon aria-label="Notifications" />
+        <BellIcon aria-label="Notifications" className="size-5" />
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/icons-tw.tsx b/docs/src/app/(docs)/react/components/popover/demos/icons-tw.tsx
index 2a121c58065..907acc55e40 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/icons-tw.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/icons-tw.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 export function BellIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="20" height="20" viewBox="0 0 16 16" {...props}>
+    <svg fill="currentColor" viewBox="0 0 16 16" {...props}>
       <path d="M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z" />
     </svg>
   );
@@ -10,15 +10,7 @@ export function BellIcon(props: React.ComponentProps<'svg'>) {
 
 export function UserIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.5}
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} {...props}>
       <path d="M18 20a6 6 0 0 0-12 0" />
       <circle cx="12" cy="10" r="4" />
       <circle cx="12" cy="12" r="10" />
@@ -29,12 +21,11 @@ export function UserIcon(props: React.ComponentProps<'svg'>) {
 export function ListIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="24"
-      height="24"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
       strokeWidth={1.5}
+      strokeLinecap="square"
       {...props}
     >
       <path d="M3 5h.01" />
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/css-modules/index.tsx
index f182e66a617..bb621d0c7c7 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/css-modules/index.tsx
@@ -25,7 +25,7 @@ export default function ExamplePopover() {
 
 function BellIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="20" height="20" viewBox="0 0 16 16" {...props}>
+    <svg fill="currentColor" viewBox="0 0 16 16" {...props}>
       <path d="M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
index 75cc54a9401..591aeebe0e9 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExamplePopover() {
         openOnHover
         className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
-        <BellIcon aria-label="Notifications" />
+        <BellIcon aria-label="Notifications" className="size-5" />
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index 637ce6e1be7..d883f63ed2e 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -65,6 +65,11 @@
 
 .SelectIcon {
   display: flex;
+
+  & svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
 }
 
 .Positioner {
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
index e5d0bfb6bb1..0487857fe5a 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
@@ -55,32 +55,16 @@ export default function ExampleSelectGrouped() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      {...props}
-    >
-      <path d="m7 15 5 5 5-5" />
-      <path d="m7 9 5-5 5 5" />
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index 7622c7f8e56..7dd1069591e 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -19,7 +19,7 @@ export default function ExampleSelectGrouped() {
             placeholder="Select produce"
           />
           <Select.Icon className="flex">
-            <ChevronUpDownIcon />
+            <ChevronUpDownIcon className="size-3" />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
@@ -67,32 +67,16 @@ export default function ExampleSelectGrouped() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      {...props}
-    >
-      <path d="m7 15 5 5 5-5" />
-      <path d="m7 9 5-5 5 5" />
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
index 66266c862f5..6efb8bad13d 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
@@ -65,6 +65,11 @@
 
 .SelectIcon {
   display: flex;
+
+  & svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
 }
 
 .Positioner {
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
index 005a71bcb0b..8105c97af91 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
@@ -46,32 +46,16 @@ export default function ExampleSelect() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      {...props}
-    >
-      <path d="m7 15 5 5 5-5" />
-      <path d="m7 9 5-5 5 5" />
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index a9598ca3abb..ec3046b6cc3 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -22,7 +22,7 @@ export default function ExampleSelect() {
             placeholder="Select apple"
           />
           <Select.Icon className="flex">
-            <ChevronUpDownIcon />
+            <ChevronUpDownIcon className="size-3" />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
@@ -58,32 +58,16 @@ export default function ExampleSelect() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      {...props}
-    >
-      <path d="m7 15 5 5 5-5" />
-      <path d="m7 9 5-5 5 5" />
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
index 8b0295d7a02..6d12a4f7224 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
@@ -65,6 +65,11 @@
 
 .SelectIcon {
   display: flex;
+
+  & svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
 }
 
 .Positioner {
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
index e7d924c9c19..44230242190 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
@@ -66,32 +66,16 @@ export default function MultiSelectExample() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      {...props}
-    >
-      <path d="m7 15 5 5 5-5" />
-      <path d="m7 9 5-5 5 5" />
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index a748c8ffd30..88098c38ee0 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -41,7 +41,7 @@ export default function MultiSelectExample() {
             {renderValue}
           </Select.Value>
           <Select.Icon className="flex">
-            <ChevronUpDownIcon />
+            <ChevronUpDownIcon className="size-3" />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
@@ -73,32 +73,16 @@ export default function MultiSelectExample() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      {...props}
-    >
-      <path d="m7 15 5 5 5-5" />
-      <path d="m7 9 5-5 5 5" />
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
index ddedcad7250..86c0149cfb1 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
@@ -82,6 +82,11 @@
   display: flex;
   align-items: center;
   align-self: center;
+
+  & svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
 }
 
 .Positioner {
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
index a2e49a15967..681f5040d0b 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
@@ -53,32 +53,16 @@ export default function ObjectValueSelect() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      {...props}
-    >
-      <path d="m7 15 5 5 5-5" />
-      <path d="m7 9 5-5 5 5" />
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index 323f4e224de..a77ff654ace 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -21,7 +21,7 @@ export default function ObjectValueSelect() {
             )}
           </Select.Value>
           <Select.Icon className="flex items-center self-center">
-            <ChevronUpDownIcon />
+            <ChevronUpDownIcon className="size-3" />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
@@ -62,32 +62,16 @@ export default function ObjectValueSelect() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      {...props}
-    >
-      <path d="m7 15 5 5 5-5" />
-      <path d="m7 9 5-5 5 5" />
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
index 8fd976be7e3..5351c98aa7e 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
@@ -127,15 +127,7 @@ function StackedToasts() {
 
 function ClipboardIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...props}>
       <rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
       <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
     </svg>
@@ -144,15 +136,7 @@ function ClipboardIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index 3a2cf6875b2..eb13384860f 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -143,15 +143,7 @@ function StackedToasts() {
 
 function ClipboardIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...props}>
       <rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
       <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
     </svg>
@@ -160,15 +152,7 @@ function ClipboardIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.tsx
index c704701c6f2..b88676bd4fe 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.tsx
@@ -21,7 +21,7 @@ export default function ExampleToggleGroup() {
 
 function AlignLeftIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" stroke="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" stroke="currentColor" {...props}>
       <path d="M2.5 3.5H13.5" />
       <path d="M2.5 9.5H13.5" />
       <path d="M2.5 6.5H10.5" />
@@ -32,7 +32,7 @@ function AlignLeftIcon(props: React.ComponentProps<'svg'>) {
 
 function AlignCenterIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" stroke="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" stroke="currentColor" {...props}>
       <path d="M3 3.5H14" />
       <path d="M3 9.5H14" />
       <path d="M4.5 6.5H12.5" />
@@ -43,7 +43,7 @@ function AlignCenterIcon(props: React.ComponentProps<'svg'>) {
 
 function AlignRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" stroke="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" stroke="currentColor" {...props}>
       <path d="M2.5 3.5H13.5" />
       <path d="M2.5 9.5H13.5" />
       <path d="M5.5 6.5H13.5" />
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
index d4a9423e2a6..69396c7cbc2 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
@@ -35,7 +35,7 @@ export default function ExampleToggleGroup() {
 
 function AlignLeftIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" stroke="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" stroke="currentColor" {...props}>
       <path d="M2.5 3.5H13.5" />
       <path d="M2.5 9.5H13.5" />
       <path d="M2.5 6.5H10.5" />
@@ -46,7 +46,7 @@ function AlignLeftIcon(props: React.ComponentProps<'svg'>) {
 
 function AlignCenterIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" stroke="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" stroke="currentColor" {...props}>
       <path d="M3 3.5H14" />
       <path d="M3 9.5H14" />
       <path d="M4.5 6.5H12.5" />
@@ -57,7 +57,7 @@ function AlignCenterIcon(props: React.ComponentProps<'svg'>) {
 
 function AlignRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" stroke="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" stroke="currentColor" {...props}>
       <path d="M2.5 3.5H13.5" />
       <path d="M2.5 9.5H13.5" />
       <path d="M5.5 6.5H13.5" />
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.tsx
index 6cd539cd0db..7bf15377475 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.tsx
@@ -11,13 +11,13 @@ export default function ExampleToggleGroupMultiple() {
       className={styles.Panel}
     >
       <Toggle aria-label="Bold" value="bold" className={styles.Button}>
-        <BoldIcon />
+        <BoldIcon className={styles.Icon} />
       </Toggle>
       <Toggle aria-label="Italic" value="italic" className={styles.Button}>
-        <ItalicIcon />
+        <ItalicIcon className={styles.Icon} />
       </Toggle>
       <Toggle aria-label="Underline" value="underline" className={styles.Button}>
-        <UnderlineIcon />
+        <UnderlineIcon className={styles.Icon} />
       </Toggle>
     </ToggleGroup>
   );
@@ -25,7 +25,7 @@ export default function ExampleToggleGroupMultiple() {
 
 function BoldIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
       <path d="M3.73353 2.13333C3.4386 2.13333 3.2002 2.37226 3.2002 2.66666C3.2002 2.96106 3.4386 3.2 3.73353 3.2H4.26686V12.8H3.73353C3.4386 12.8 3.2002 13.0389 3.2002 13.3333C3.2002 13.6277 3.4386 13.8667 3.73353 13.8667H9.86686C11.7783 13.8667 13.3335 12.3115 13.3335 10.4C13.3335 8.9968 12.4945 7.78881 11.2929 7.24375C11.8897 6.70615 12.2669 5.93066 12.2669 5.06666C12.2669 3.44906 10.9506 2.13333 9.33353 2.13333H3.73353ZM6.93353 3.2H8.26686C9.29619 3.2 10.1335 4.03733 10.1335 5.06666C10.1335 6.096 9.29619 6.93333 8.26686 6.93333H6.93353V3.2ZM6.93353 8H7.73353H8.26686C9.59006 8 10.6669 9.0768 10.6669 10.4C10.6669 11.7232 9.59006 12.8 8.26686 12.8H6.93353V8Z" />
     </svg>
   );
@@ -33,7 +33,7 @@ function BoldIcon(props: React.ComponentProps<'svg'>) {
 
 function ItalicIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
       <path d="M8.52599 2.12186C8.48583 2.12267 8.44578 2.1265 8.4062 2.13332H6.93328C6.86261 2.13232 6.79244 2.14538 6.72686 2.17173C6.66127 2.19808 6.60158 2.23721 6.55125 2.28683C6.50092 2.33646 6.46096 2.39559 6.43368 2.46079C6.4064 2.526 6.39235 2.59597 6.39235 2.66665C6.39235 2.73733 6.4064 2.80731 6.43368 2.87251C6.46096 2.93772 6.50092 2.99685 6.55125 3.04647C6.60158 3.0961 6.66127 3.13522 6.72686 3.16157C6.79244 3.18793 6.86261 3.20099 6.93328 3.19999H7.70099L6.69057 12.8H5.86661C5.79594 12.799 5.72577 12.812 5.66019 12.8384C5.59461 12.8648 5.53492 12.9039 5.48459 12.9535C5.43425 13.0031 5.39429 13.0623 5.36701 13.1275C5.33973 13.1927 5.32568 13.2626 5.32568 13.3333C5.32568 13.404 5.33973 13.474 5.36701 13.5392C5.39429 13.6044 5.43425 13.6635 5.48459 13.7131C5.53492 13.7628 5.59461 13.8019 5.66019 13.8282C5.72577 13.8546 5.79594 13.8677 5.86661 13.8667H9.06661C9.13729 13.8677 9.20745 13.8546 9.27304 13.8282C9.33862 13.8019 9.39831 13.7628 9.44864 13.7131C9.49897 13.6635 9.53894 13.6044 9.56622 13.5392C9.5935 13.474 9.60754 13.404 9.60754 13.3333C9.60754 13.2626 9.5935 13.1927 9.56622 13.1275C9.53894 13.0623 9.49897 13.0031 9.44864 12.9535C9.39831 12.9039 9.33862 12.8648 9.27304 12.8384C9.20745 12.812 9.13729 12.799 9.06661 12.8H8.2989L9.30932 3.19999H10.1333C10.204 3.20099 10.2741 3.18793 10.3397 3.16157C10.4053 3.13522 10.465 3.0961 10.5153 3.04647C10.5656 2.99685 10.6056 2.93772 10.6329 2.87251C10.6602 2.80731 10.6742 2.73733 10.6742 2.66665C10.6742 2.59597 10.6602 2.526 10.6329 2.46079C10.6056 2.39559 10.5656 2.33646 10.5153 2.28683C10.465 2.23721 10.4053 2.19808 10.3397 2.17173C10.2741 2.14538 10.204 2.13232 10.1333 2.13332H8.66349C8.61807 2.12555 8.57207 2.12171 8.52599 2.12186Z" />
     </svg>
   );
@@ -41,7 +41,7 @@ function ItalicIcon(props: React.ComponentProps<'svg'>) {
 
 function UnderlineIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
       <path d="M3.73331 2.13332C3.66264 2.13232 3.59247 2.14538 3.52689 2.17173C3.46131 2.19809 3.40161 2.23721 3.35128 2.28684C3.30095 2.33646 3.26099 2.39559 3.23371 2.4608C3.20643 2.526 3.19238 2.59598 3.19238 2.66666C3.19238 2.73734 3.20643 2.80731 3.23371 2.87252C3.26099 2.93772 3.30095 2.99685 3.35128 3.04648C3.40161 3.0961 3.46131 3.13523 3.52689 3.16158C3.59247 3.18793 3.66264 3.20099 3.73331 3.19999V7.99999C3.73331 10.224 5.55144 12.2667 7.99998 12.2667C10.4485 12.2667 12.2666 10.224 12.2666 7.99999V3.19999C12.3373 3.20099 12.4075 3.18793 12.4731 3.16158C12.5386 3.13523 12.5983 3.0961 12.6487 3.04648C12.699 2.99685 12.739 2.93772 12.7662 2.87252C12.7935 2.80731 12.8076 2.73734 12.8076 2.66666C12.8076 2.59598 12.7935 2.526 12.7662 2.4608C12.739 2.39559 12.699 2.33646 12.6487 2.28684C12.5983 2.23721 12.5386 2.19809 12.4731 2.17173C12.4075 2.14538 12.3373 2.13232 12.2666 2.13332H10.1333C10.0626 2.13232 9.99247 2.14538 9.92689 2.17173C9.8613 2.19809 9.80161 2.23721 9.75128 2.28684C9.70095 2.33646 9.66099 2.39559 9.63371 2.4608C9.60643 2.526 9.59238 2.59598 9.59238 2.66666C9.59238 2.73734 9.60643 2.80731 9.63371 2.87252C9.66099 2.93772 9.70095 2.99685 9.75128 3.04648C9.80161 3.0961 9.8613 3.13523 9.92689 3.16158C9.99247 3.18793 10.0626 3.20099 10.1333 3.19999V8.97187C10.1333 10.0855 9.32179 11.0818 8.21352 11.1896C6.94152 11.3138 5.86665 10.3136 5.86665 9.06666V3.19999C5.93732 3.20099 6.00748 3.18793 6.07307 3.16158C6.13865 3.13523 6.19834 3.0961 6.24867 3.04648C6.299 2.99685 6.33897 2.93772 6.36625 2.87252C6.39353 2.80731 6.40757 2.73734 6.40757 2.66666C6.40757 2.59598 6.39353 2.526 6.36625 2.4608C6.33897 2.39559 6.299 2.33646 6.24867 2.28684C6.19834 2.23721 6.13865 2.19809 6.07307 2.17173C6.00748 2.14538 5.93732 2.13232 5.86665 2.13332H3.73331ZM3.73331 13.3333C3.66264 13.3323 3.59247 13.3454 3.52689 13.3717C3.46131 13.3981 3.40161 13.4372 3.35128 13.4868C3.30095 13.5365 3.26099 13.5956 3.23371 13.6608C3.20643 13.726 3.19238 13.796 3.19238 13.8667C3.19238 13.9373 3.20643 14.0073 3.23371 14.0725C3.26099 14.1377 3.30095 14.1969 3.35128 14.2465C3.40161 14.2961 3.46131 14.3352 3.52689 14.3616C3.59247 14.3879 3.66264 14.401 3.73331 14.4H12.2666C12.3373 14.401 12.4075 14.3879 12.4731 14.3616C12.5386 14.3352 12.5983 14.2961 12.6487 14.2465C12.699 14.1969 12.739 14.1377 12.7662 14.0725C12.7935 14.0073 12.8076 13.9373 12.8076 13.8667C12.8076 13.796 12.7935 13.726 12.7662 13.6608C12.739 13.5956 12.699 13.5365 12.6487 13.4868C12.5983 13.4372 12.5386 13.3981 12.4731 13.3717C12.4075 13.3454 12.3373 13.3323 12.2666 13.3333H3.73331Z" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
index 8d9aa53f54f..44e4c1c5a1a 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
@@ -14,21 +14,21 @@ export default function ExampleToggleGroupMultiple() {
         value="bold"
         className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
-        <BoldIcon />
+        <BoldIcon className="size-4" />
       </Toggle>
       <Toggle
         aria-label="Italic"
         value="italic"
         className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
-        <ItalicIcon />
+        <ItalicIcon className="size-4" />
       </Toggle>
       <Toggle
         aria-label="Underline"
         value="underline"
         className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
-        <UnderlineIcon />
+        <UnderlineIcon className="size-4" />
       </Toggle>
     </ToggleGroup>
   );
@@ -36,7 +36,7 @@ export default function ExampleToggleGroupMultiple() {
 
 function BoldIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
       <path d="M3.73353 2.13333C3.4386 2.13333 3.2002 2.37226 3.2002 2.66666C3.2002 2.96106 3.4386 3.2 3.73353 3.2H4.26686V12.8H3.73353C3.4386 12.8 3.2002 13.0389 3.2002 13.3333C3.2002 13.6277 3.4386 13.8667 3.73353 13.8667H9.86686C11.7783 13.8667 13.3335 12.3115 13.3335 10.4C13.3335 8.9968 12.4945 7.78881 11.2929 7.24375C11.8897 6.70615 12.2669 5.93066 12.2669 5.06666C12.2669 3.44906 10.9506 2.13333 9.33353 2.13333H3.73353ZM6.93353 3.2H8.26686C9.29619 3.2 10.1335 4.03733 10.1335 5.06666C10.1335 6.096 9.29619 6.93333 8.26686 6.93333H6.93353V3.2ZM6.93353 8H7.73353H8.26686C9.59006 8 10.6669 9.0768 10.6669 10.4C10.6669 11.7232 9.59006 12.8 8.26686 12.8H6.93353V8Z" />
     </svg>
   );
@@ -44,7 +44,7 @@ function BoldIcon(props: React.ComponentProps<'svg'>) {
 
 function ItalicIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
       <path d="M8.52599 2.12186C8.48583 2.12267 8.44578 2.1265 8.4062 2.13332H6.93328C6.86261 2.13232 6.79244 2.14538 6.72686 2.17173C6.66127 2.19808 6.60158 2.23721 6.55125 2.28683C6.50092 2.33646 6.46096 2.39559 6.43368 2.46079C6.4064 2.526 6.39235 2.59597 6.39235 2.66665C6.39235 2.73733 6.4064 2.80731 6.43368 2.87251C6.46096 2.93772 6.50092 2.99685 6.55125 3.04647C6.60158 3.0961 6.66127 3.13522 6.72686 3.16157C6.79244 3.18793 6.86261 3.20099 6.93328 3.19999H7.70099L6.69057 12.8H5.86661C5.79594 12.799 5.72577 12.812 5.66019 12.8384C5.59461 12.8648 5.53492 12.9039 5.48459 12.9535C5.43425 13.0031 5.39429 13.0623 5.36701 13.1275C5.33973 13.1927 5.32568 13.2626 5.32568 13.3333C5.32568 13.404 5.33973 13.474 5.36701 13.5392C5.39429 13.6044 5.43425 13.6635 5.48459 13.7131C5.53492 13.7628 5.59461 13.8019 5.66019 13.8282C5.72577 13.8546 5.79594 13.8677 5.86661 13.8667H9.06661C9.13729 13.8677 9.20745 13.8546 9.27304 13.8282C9.33862 13.8019 9.39831 13.7628 9.44864 13.7131C9.49897 13.6635 9.53894 13.6044 9.56622 13.5392C9.5935 13.474 9.60754 13.404 9.60754 13.3333C9.60754 13.2626 9.5935 13.1927 9.56622 13.1275C9.53894 13.0623 9.49897 13.0031 9.44864 12.9535C9.39831 12.9039 9.33862 12.8648 9.27304 12.8384C9.20745 12.812 9.13729 12.799 9.06661 12.8H8.2989L9.30932 3.19999H10.1333C10.204 3.20099 10.2741 3.18793 10.3397 3.16157C10.4053 3.13522 10.465 3.0961 10.5153 3.04647C10.5656 2.99685 10.6056 2.93772 10.6329 2.87251C10.6602 2.80731 10.6742 2.73733 10.6742 2.66665C10.6742 2.59597 10.6602 2.526 10.6329 2.46079C10.6056 2.39559 10.5656 2.33646 10.5153 2.28683C10.465 2.23721 10.4053 2.19808 10.3397 2.17173C10.2741 2.14538 10.204 2.13232 10.1333 2.13332H8.66349C8.61807 2.12555 8.57207 2.12171 8.52599 2.12186Z" />
     </svg>
   );
@@ -52,7 +52,7 @@ function ItalicIcon(props: React.ComponentProps<'svg'>) {
 
 function UnderlineIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
       <path d="M3.73331 2.13332C3.66264 2.13232 3.59247 2.14538 3.52689 2.17173C3.46131 2.19809 3.40161 2.23721 3.35128 2.28684C3.30095 2.33646 3.26099 2.39559 3.23371 2.4608C3.20643 2.526 3.19238 2.59598 3.19238 2.66666C3.19238 2.73734 3.20643 2.80731 3.23371 2.87252C3.26099 2.93772 3.30095 2.99685 3.35128 3.04648C3.40161 3.0961 3.46131 3.13523 3.52689 3.16158C3.59247 3.18793 3.66264 3.20099 3.73331 3.19999V7.99999C3.73331 10.224 5.55144 12.2667 7.99998 12.2667C10.4485 12.2667 12.2666 10.224 12.2666 7.99999V3.19999C12.3373 3.20099 12.4075 3.18793 12.4731 3.16158C12.5386 3.13523 12.5983 3.0961 12.6487 3.04648C12.699 2.99685 12.739 2.93772 12.7662 2.87252C12.7935 2.80731 12.8076 2.73734 12.8076 2.66666C12.8076 2.59598 12.7935 2.526 12.7662 2.4608C12.739 2.39559 12.699 2.33646 12.6487 2.28684C12.5983 2.23721 12.5386 2.19809 12.4731 2.17173C12.4075 2.14538 12.3373 2.13232 12.2666 2.13332H10.1333C10.0626 2.13232 9.99247 2.14538 9.92689 2.17173C9.8613 2.19809 9.80161 2.23721 9.75128 2.28684C9.70095 2.33646 9.66099 2.39559 9.63371 2.4608C9.60643 2.526 9.59238 2.59598 9.59238 2.66666C9.59238 2.73734 9.60643 2.80731 9.63371 2.87252C9.66099 2.93772 9.70095 2.99685 9.75128 3.04648C9.80161 3.0961 9.8613 3.13523 9.92689 3.16158C9.99247 3.18793 10.0626 3.20099 10.1333 3.19999V8.97187C10.1333 10.0855 9.32179 11.0818 8.21352 11.1896C6.94152 11.3138 5.86665 10.3136 5.86665 9.06666V3.19999C5.93732 3.20099 6.00748 3.18793 6.07307 3.16158C6.13865 3.13523 6.19834 3.0961 6.24867 3.04648C6.299 2.99685 6.33897 2.93772 6.36625 2.87252C6.39353 2.80731 6.40757 2.73734 6.40757 2.66666C6.40757 2.59598 6.39353 2.526 6.36625 2.4608C6.33897 2.39559 6.299 2.33646 6.24867 2.28684C6.19834 2.23721 6.13865 2.19809 6.07307 2.17173C6.00748 2.14538 5.93732 2.13232 5.86665 2.13332H3.73331ZM3.73331 13.3333C3.66264 13.3323 3.59247 13.3454 3.52689 13.3717C3.46131 13.3981 3.40161 13.4372 3.35128 13.4868C3.30095 13.5365 3.26099 13.5956 3.23371 13.6608C3.20643 13.726 3.19238 13.796 3.19238 13.8667C3.19238 13.9373 3.20643 14.0073 3.23371 14.0725C3.26099 14.1377 3.30095 14.1969 3.35128 14.2465C3.40161 14.2961 3.46131 14.3352 3.52689 14.3616C3.59247 14.3879 3.66264 14.401 3.73331 14.4H12.2666C12.3373 14.401 12.4075 14.3879 12.4731 14.3616C12.5386 14.3352 12.5983 14.2961 12.6487 14.2465C12.699 14.1969 12.739 14.1377 12.7662 14.0725C12.7935 14.0073 12.8076 13.9373 12.8076 13.8667C12.8076 13.796 12.7935 13.726 12.7662 13.6608C12.739 13.5956 12.699 13.5365 12.6487 13.4868C12.5983 13.4372 12.5386 13.3981 12.4731 13.3717C12.4075 13.3454 12.3373 13.3323 12.2666 13.3333H3.73331Z" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.tsx
index 5f512d8f4f9..de9fe6c9d3e 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.tsx
@@ -31,7 +31,7 @@ export default function ExampleToggle() {
 
 function HeartFilledIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
       <path d="M7.99961 13.8667C7.88761 13.8667 7.77561 13.8315 7.68121 13.7611C7.43321 13.5766 1.59961 9.1963 1.59961 5.8667C1.59961 3.80856 3.27481 2.13336 5.33294 2.13336C6.59054 2.13336 7.49934 2.81176 7.99961 3.3131C8.49988 2.81176 9.40868 2.13336 10.6663 2.13336C12.7244 2.13336 14.3996 3.80803 14.3996 5.8667C14.3996 9.1963 8.56601 13.5766 8.31801 13.7616C8.22361 13.8315 8.11161 13.8667 7.99961 13.8667Z" />
     </svg>
   );
@@ -39,7 +39,7 @@ function HeartFilledIcon(props: React.ComponentProps<'svg'>) {
 
 function HeartOutlineIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
index e7bebb2dd93..abcf6f36b27 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
@@ -28,7 +28,7 @@ export default function ExampleToggle() {
 
 function HeartFilledIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
       <path d="M7.99961 13.8667C7.88761 13.8667 7.77561 13.8315 7.68121 13.7611C7.43321 13.5766 1.59961 9.1963 1.59961 5.8667C1.59961 3.80856 3.27481 2.13336 5.33294 2.13336C6.59054 2.13336 7.49934 2.81176 7.99961 3.3131C8.49988 2.81176 9.40868 2.13336 10.6663 2.13336C12.7244 2.13336 14.3996 3.80803 14.3996 5.8667C14.3996 9.1963 8.56601 13.5766 8.31801 13.7616C8.22361 13.8315 8.11161 13.8667 7.99961 13.8667Z" />
     </svg>
   );
@@ -36,7 +36,7 @@ function HeartFilledIcon(props: React.ComponentProps<'svg'>) {
 
 function HeartOutlineIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
index b6f129f1554..7b16c90e282 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
@@ -105,6 +105,11 @@
 
 .SelectIcon {
   display: flex;
+
+  & svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
 }
 
 .Positioner {
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
index dcc6551269f..a6d1408b996 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
@@ -72,32 +72,16 @@ export default function ExampleToolbar() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      {...props}
-    >
-      <path d="m7 15 5 5 5-5" />
-      <path d="m7 9 5-5 5 5" />
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
index 2dc31f96983..8f2efc48cb8 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
@@ -48,7 +48,7 @@ export default function ExampleToolbar() {
         >
           <Select.Value />
           <Select.Icon className="flex">
-            <ChevronUpDownIcon />
+            <ChevronUpDownIcon className="size-3" />
           </Select.Icon>
         </Toolbar.Button>
         <Select.Portal>
@@ -89,32 +89,16 @@ export default function ExampleToolbar() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      {...props}
-    >
-      <path d="m7 15 5 5 5-5" />
-      <path d="m7 9 5-5 5 5" />
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx
index d7864f44172..d96ce7540e5 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx
@@ -65,12 +65,11 @@ export default function TooltipDetachedTriggersControlledDemo() {
 function InfoIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
       strokeWidth={1}
+      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
     >
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
index 72f352d3cf3..5f30c466c6e 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -31,7 +31,7 @@ export default function TooltipDetachedTriggersControlledDemo() {
       <div className="flex gap-2 flex-wrap justify-center">
         <div className="flex">
           <Tooltip.Trigger className={iconButtonClass} handle={demoTooltip} id="trigger-1">
-            <InfoIcon aria-label="Controlled tooltip" />
+            <InfoIcon className="size-5" aria-label="Controlled tooltip" />
           </Tooltip.Trigger>
 
           <Tooltip.Trigger
@@ -39,7 +39,7 @@ export default function TooltipDetachedTriggersControlledDemo() {
             handle={demoTooltip}
             id="trigger-2"
           >
-            <InfoIcon aria-label="Controlled tooltip" />
+            <InfoIcon className="size-5" aria-label="Controlled tooltip" />
           </Tooltip.Trigger>
 
           <Tooltip.Trigger
@@ -47,7 +47,7 @@ export default function TooltipDetachedTriggersControlledDemo() {
             handle={demoTooltip}
             id="trigger-3"
           >
-            <InfoIcon aria-label="Controlled tooltip" />
+            <InfoIcon className="size-5" aria-label="Controlled tooltip" />
           </Tooltip.Trigger>
         </div>
 
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx
index d173bd08326..c30379852b5 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx
@@ -56,12 +56,11 @@ function AlertContent() {
 function InfoIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
       strokeWidth={1}
+      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
     >
@@ -75,12 +74,11 @@ function InfoIcon(props: React.ComponentProps<'svg'>) {
 function HelpIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
       strokeWidth={1}
+      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
     >
@@ -94,12 +92,11 @@ function HelpIcon(props: React.ComponentProps<'svg'>) {
 function AlertIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
       strokeWidth={1}
+      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
     >
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx
index 98ccf3b0789..3ba82ed59b9 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx
@@ -29,12 +29,11 @@ export default function TooltipDetachedTriggersSimpleDemo() {
 function InfoIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
       strokeWidth={1}
+      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
     >
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
index 1b6aa13dbbe..e9dce4748d0 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function TooltipDetachedTriggersSimpleDemo() {
   return (
     <Tooltip.Provider>
       <Tooltip.Trigger className={triggerClass} handle={demoTooltip}>
-        <InfoIcon aria-label="This is a detached tooltip" />
+        <InfoIcon className="size-5" aria-label="This is a detached tooltip" />
       </Tooltip.Trigger>
 
       <Tooltip.Root handle={demoTooltip}>
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.tsx
index 202bc976069..df8af302d62 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.tsx
@@ -54,7 +54,7 @@ export default function ExampleTooltip() {
 
 function BoldIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
       <path d="M3.73353 2.13333C3.4386 2.13333 3.2002 2.37226 3.2002 2.66666C3.2002 2.96106 3.4386 3.2 3.73353 3.2H4.26686V12.8H3.73353C3.4386 12.8 3.2002 13.0389 3.2002 13.3333C3.2002 13.6277 3.4386 13.8667 3.73353 13.8667H9.86686C11.7783 13.8667 13.3335 12.3115 13.3335 10.4C13.3335 8.9968 12.4945 7.78881 11.2929 7.24375C11.8897 6.70615 12.2669 5.93066 12.2669 5.06666C12.2669 3.44906 10.9506 2.13333 9.33353 2.13333H3.73353ZM6.93353 3.2H8.26686C9.29619 3.2 10.1335 4.03733 10.1335 5.06666C10.1335 6.096 9.29619 6.93333 8.26686 6.93333H6.93353V3.2ZM6.93353 8H7.73353H8.26686C9.59006 8 10.6669 9.0768 10.6669 10.4C10.6669 11.7232 9.59006 12.8 8.26686 12.8H6.93353V8Z" />
     </svg>
   );
@@ -62,7 +62,7 @@ function BoldIcon(props: React.ComponentProps<'svg'>) {
 
 function ItalicIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
       <path d="M8.52599 2.12186C8.48583 2.12267 8.44578 2.1265 8.4062 2.13332H6.93328C6.86261 2.13232 6.79244 2.14538 6.72686 2.17173C6.66127 2.19808 6.60158 2.23721 6.55125 2.28683C6.50092 2.33646 6.46096 2.39559 6.43368 2.46079C6.4064 2.526 6.39235 2.59597 6.39235 2.66665C6.39235 2.73733 6.4064 2.80731 6.43368 2.87251C6.46096 2.93772 6.50092 2.99685 6.55125 3.04647C6.60158 3.0961 6.66127 3.13522 6.72686 3.16157C6.79244 3.18793 6.86261 3.20099 6.93328 3.19999H7.70099L6.69057 12.8H5.86661C5.79594 12.799 5.72577 12.812 5.66019 12.8384C5.59461 12.8648 5.53492 12.9039 5.48459 12.9535C5.43425 13.0031 5.39429 13.0623 5.36701 13.1275C5.33973 13.1927 5.32568 13.2626 5.32568 13.3333C5.32568 13.404 5.33973 13.474 5.36701 13.5392C5.39429 13.6044 5.43425 13.6635 5.48459 13.7131C5.53492 13.7628 5.59461 13.8019 5.66019 13.8282C5.72577 13.8546 5.79594 13.8677 5.86661 13.8667H9.06661C9.13729 13.8677 9.20745 13.8546 9.27304 13.8282C9.33862 13.8019 9.39831 13.7628 9.44864 13.7131C9.49897 13.6635 9.53894 13.6044 9.56622 13.5392C9.5935 13.474 9.60754 13.404 9.60754 13.3333C9.60754 13.2626 9.5935 13.1927 9.56622 13.1275C9.53894 13.0623 9.49897 13.0031 9.44864 12.9535C9.39831 12.9039 9.33862 12.8648 9.27304 12.8384C9.20745 12.812 9.13729 12.799 9.06661 12.8H8.2989L9.30932 3.19999H10.1333C10.204 3.20099 10.2741 3.18793 10.3397 3.16157C10.4053 3.13522 10.465 3.0961 10.5153 3.04647C10.5656 2.99685 10.6056 2.93772 10.6329 2.87251C10.6602 2.80731 10.6742 2.73733 10.6742 2.66665C10.6742 2.59597 10.6602 2.526 10.6329 2.46079C10.6056 2.39559 10.5656 2.33646 10.5153 2.28683C10.465 2.23721 10.4053 2.19808 10.3397 2.17173C10.2741 2.14538 10.204 2.13232 10.1333 2.13332H8.66349C8.61807 2.12555 8.57207 2.12171 8.52599 2.12186Z" />
     </svg>
   );
@@ -70,7 +70,7 @@ function ItalicIcon(props: React.ComponentProps<'svg'>) {
 
 function UnderlineIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
       <path d="M3.73331 2.13332C3.66264 2.13232 3.59247 2.14538 3.52689 2.17173C3.46131 2.19809 3.40161 2.23721 3.35128 2.28684C3.30095 2.33646 3.26099 2.39559 3.23371 2.4608C3.20643 2.526 3.19238 2.59598 3.19238 2.66666C3.19238 2.73734 3.20643 2.80731 3.23371 2.87252C3.26099 2.93772 3.30095 2.99685 3.35128 3.04648C3.40161 3.0961 3.46131 3.13523 3.52689 3.16158C3.59247 3.18793 3.66264 3.20099 3.73331 3.19999V7.99999C3.73331 10.224 5.55144 12.2667 7.99998 12.2667C10.4485 12.2667 12.2666 10.224 12.2666 7.99999V3.19999C12.3373 3.20099 12.4075 3.18793 12.4731 3.16158C12.5386 3.13523 12.5983 3.0961 12.6487 3.04648C12.699 2.99685 12.739 2.93772 12.7662 2.87252C12.7935 2.80731 12.8076 2.73734 12.8076 2.66666C12.8076 2.59598 12.7935 2.526 12.7662 2.4608C12.739 2.39559 12.699 2.33646 12.6487 2.28684C12.5983 2.23721 12.5386 2.19809 12.4731 2.17173C12.4075 2.14538 12.3373 2.13232 12.2666 2.13332H10.1333C10.0626 2.13232 9.99247 2.14538 9.92689 2.17173C9.8613 2.19809 9.80161 2.23721 9.75128 2.28684C9.70095 2.33646 9.66099 2.39559 9.63371 2.4608C9.60643 2.526 9.59238 2.59598 9.59238 2.66666C9.59238 2.73734 9.60643 2.80731 9.63371 2.87252C9.66099 2.93772 9.70095 2.99685 9.75128 3.04648C9.80161 3.0961 9.8613 3.13523 9.92689 3.16158C9.99247 3.18793 10.0626 3.20099 10.1333 3.19999V8.97187C10.1333 10.0855 9.32179 11.0818 8.21352 11.1896C6.94152 11.3138 5.86665 10.3136 5.86665 9.06666V3.19999C5.93732 3.20099 6.00748 3.18793 6.07307 3.16158C6.13865 3.13523 6.19834 3.0961 6.24867 3.04648C6.299 2.99685 6.33897 2.93772 6.36625 2.87252C6.39353 2.80731 6.40757 2.73734 6.40757 2.66666C6.40757 2.59598 6.39353 2.526 6.36625 2.4608C6.33897 2.39559 6.299 2.33646 6.24867 2.28684C6.19834 2.23721 6.13865 2.19809 6.07307 2.17173C6.00748 2.14538 5.93732 2.13232 5.86665 2.13332H3.73331ZM3.73331 13.3333C3.66264 13.3323 3.59247 13.3454 3.52689 13.3717C3.46131 13.3981 3.40161 13.4372 3.35128 13.4868C3.30095 13.5365 3.26099 13.5956 3.23371 13.6608C3.20643 13.726 3.19238 13.796 3.19238 13.8667C3.19238 13.9373 3.20643 14.0073 3.23371 14.0725C3.26099 14.1377 3.30095 14.1969 3.35128 14.2465C3.40161 14.2961 3.46131 14.3352 3.52689 14.3616C3.59247 14.3879 3.66264 14.401 3.73331 14.4H12.2666C12.3373 14.401 12.4075 14.3879 12.4731 14.3616C12.5386 14.3352 12.5983 14.2961 12.6487 14.2465C12.699 14.1969 12.739 14.1377 12.7662 14.0725C12.7935 14.0073 12.8076 13.9373 12.8076 13.8667C12.8076 13.796 12.7935 13.726 12.7662 13.6608C12.739 13.5956 12.699 13.5365 12.6487 13.4868C12.5983 13.4372 12.5386 13.3981 12.4731 13.3717C12.4075 13.3454 12.3373 13.3323 12.2666 13.3333H3.73331Z" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
index 2271bb5bf4b..51da5436b0e 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
@@ -62,7 +62,7 @@ export default function ExampleTooltip() {
 
 function BoldIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
       <path d="M3.73353 2.13333C3.4386 2.13333 3.2002 2.37226 3.2002 2.66666C3.2002 2.96106 3.4386 3.2 3.73353 3.2H4.26686V12.8H3.73353C3.4386 12.8 3.2002 13.0389 3.2002 13.3333C3.2002 13.6277 3.4386 13.8667 3.73353 13.8667H9.86686C11.7783 13.8667 13.3335 12.3115 13.3335 10.4C13.3335 8.9968 12.4945 7.78881 11.2929 7.24375C11.8897 6.70615 12.2669 5.93066 12.2669 5.06666C12.2669 3.44906 10.9506 2.13333 9.33353 2.13333H3.73353ZM6.93353 3.2H8.26686C9.29619 3.2 10.1335 4.03733 10.1335 5.06666C10.1335 6.096 9.29619 6.93333 8.26686 6.93333H6.93353V3.2ZM6.93353 8H7.73353H8.26686C9.59006 8 10.6669 9.0768 10.6669 10.4C10.6669 11.7232 9.59006 12.8 8.26686 12.8H6.93353V8Z" />
     </svg>
   );
@@ -70,7 +70,7 @@ function BoldIcon(props: React.ComponentProps<'svg'>) {
 
 function ItalicIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
       <path d="M8.52599 2.12186C8.48583 2.12267 8.44578 2.1265 8.4062 2.13332H6.93328C6.86261 2.13232 6.79244 2.14538 6.72686 2.17173C6.66127 2.19808 6.60158 2.23721 6.55125 2.28683C6.50092 2.33646 6.46096 2.39559 6.43368 2.46079C6.4064 2.526 6.39235 2.59597 6.39235 2.66665C6.39235 2.73733 6.4064 2.80731 6.43368 2.87251C6.46096 2.93772 6.50092 2.99685 6.55125 3.04647C6.60158 3.0961 6.66127 3.13522 6.72686 3.16157C6.79244 3.18793 6.86261 3.20099 6.93328 3.19999H7.70099L6.69057 12.8H5.86661C5.79594 12.799 5.72577 12.812 5.66019 12.8384C5.59461 12.8648 5.53492 12.9039 5.48459 12.9535C5.43425 13.0031 5.39429 13.0623 5.36701 13.1275C5.33973 13.1927 5.32568 13.2626 5.32568 13.3333C5.32568 13.404 5.33973 13.474 5.36701 13.5392C5.39429 13.6044 5.43425 13.6635 5.48459 13.7131C5.53492 13.7628 5.59461 13.8019 5.66019 13.8282C5.72577 13.8546 5.79594 13.8677 5.86661 13.8667H9.06661C9.13729 13.8677 9.20745 13.8546 9.27304 13.8282C9.33862 13.8019 9.39831 13.7628 9.44864 13.7131C9.49897 13.6635 9.53894 13.6044 9.56622 13.5392C9.5935 13.474 9.60754 13.404 9.60754 13.3333C9.60754 13.2626 9.5935 13.1927 9.56622 13.1275C9.53894 13.0623 9.49897 13.0031 9.44864 12.9535C9.39831 12.9039 9.33862 12.8648 9.27304 12.8384C9.20745 12.812 9.13729 12.799 9.06661 12.8H8.2989L9.30932 3.19999H10.1333C10.204 3.20099 10.2741 3.18793 10.3397 3.16157C10.4053 3.13522 10.465 3.0961 10.5153 3.04647C10.5656 2.99685 10.6056 2.93772 10.6329 2.87251C10.6602 2.80731 10.6742 2.73733 10.6742 2.66665C10.6742 2.59597 10.6602 2.526 10.6329 2.46079C10.6056 2.39559 10.5656 2.33646 10.5153 2.28683C10.465 2.23721 10.4053 2.19808 10.3397 2.17173C10.2741 2.14538 10.204 2.13232 10.1333 2.13332H8.66349C8.61807 2.12555 8.57207 2.12171 8.52599 2.12186Z" />
     </svg>
   );
@@ -78,7 +78,7 @@ function ItalicIcon(props: React.ComponentProps<'svg'>) {
 
 function UnderlineIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
       <path d="M3.73331 2.13332C3.66264 2.13232 3.59247 2.14538 3.52689 2.17173C3.46131 2.19809 3.40161 2.23721 3.35128 2.28684C3.30095 2.33646 3.26099 2.39559 3.23371 2.4608C3.20643 2.526 3.19238 2.59598 3.19238 2.66666C3.19238 2.73734 3.20643 2.80731 3.23371 2.87252C3.26099 2.93772 3.30095 2.99685 3.35128 3.04648C3.40161 3.0961 3.46131 3.13523 3.52689 3.16158C3.59247 3.18793 3.66264 3.20099 3.73331 3.19999V7.99999C3.73331 10.224 5.55144 12.2667 7.99998 12.2667C10.4485 12.2667 12.2666 10.224 12.2666 7.99999V3.19999C12.3373 3.20099 12.4075 3.18793 12.4731 3.16158C12.5386 3.13523 12.5983 3.0961 12.6487 3.04648C12.699 2.99685 12.739 2.93772 12.7662 2.87252C12.7935 2.80731 12.8076 2.73734 12.8076 2.66666C12.8076 2.59598 12.7935 2.526 12.7662 2.4608C12.739 2.39559 12.699 2.33646 12.6487 2.28684C12.5983 2.23721 12.5386 2.19809 12.4731 2.17173C12.4075 2.14538 12.3373 2.13232 12.2666 2.13332H10.1333C10.0626 2.13232 9.99247 2.14538 9.92689 2.17173C9.8613 2.19809 9.80161 2.23721 9.75128 2.28684C9.70095 2.33646 9.66099 2.39559 9.63371 2.4608C9.60643 2.526 9.59238 2.59598 9.59238 2.66666C9.59238 2.73734 9.60643 2.80731 9.63371 2.87252C9.66099 2.93772 9.70095 2.99685 9.75128 3.04648C9.80161 3.0961 9.8613 3.13523 9.92689 3.16158C9.99247 3.18793 10.0626 3.20099 10.1333 3.19999V8.97187C10.1333 10.0855 9.32179 11.0818 8.21352 11.1896C6.94152 11.3138 5.86665 10.3136 5.86665 9.06666V3.19999C5.93732 3.20099 6.00748 3.18793 6.07307 3.16158C6.13865 3.13523 6.19834 3.0961 6.24867 3.04648C6.299 2.99685 6.33897 2.93772 6.36625 2.87252C6.39353 2.80731 6.40757 2.73734 6.40757 2.66666C6.40757 2.59598 6.39353 2.526 6.36625 2.4608C6.33897 2.39559 6.299 2.33646 6.24867 2.28684C6.19834 2.23721 6.13865 2.19809 6.07307 2.17173C6.00748 2.14538 5.93732 2.13232 5.86665 2.13332H3.73331ZM3.73331 13.3333C3.66264 13.3323 3.59247 13.3454 3.52689 13.3717C3.46131 13.3981 3.40161 13.4372 3.35128 13.4868C3.30095 13.5365 3.26099 13.5956 3.23371 13.6608C3.20643 13.726 3.19238 13.796 3.19238 13.8667C3.19238 13.9373 3.20643 14.0073 3.23371 14.0725C3.26099 14.1377 3.30095 14.1969 3.35128 14.2465C3.40161 14.2961 3.46131 14.3352 3.52689 14.3616C3.59247 14.3879 3.66264 14.401 3.73331 14.4H12.2666C12.3373 14.401 12.4075 14.3879 12.4731 14.3616C12.5386 14.3352 12.5983 14.2961 12.6487 14.2465C12.699 14.1969 12.739 14.1377 12.7662 14.0725C12.7935 14.0073 12.8076 13.9373 12.8076 13.8667C12.8076 13.796 12.7935 13.726 12.7662 13.6608C12.739 13.5956 12.699 13.5365 12.6487 13.4868C12.5983 13.4372 12.5386 13.3981 12.4731 13.3717C12.4075 13.3454 12.3373 13.3323 12.2666 13.3333H3.73331Z" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx
index bf8bb9f43e9..f937e4d2002 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx
@@ -3,12 +3,11 @@ import * as React from 'react';
 export function InfoIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
       strokeWidth={1}
+      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
     >
@@ -18,12 +17,9 @@ export function InfoIcon(props: React.ComponentProps<'svg'>) {
     </svg>
   );
 }
-
 export function HelpIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
@@ -42,12 +38,11 @@ export function HelpIcon(props: React.ComponentProps<'svg'>) {
 export function AlertIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
       strokeWidth={1}
+      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
     >
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
index 56287e0405c..fe482a30a08 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
@@ -41,6 +41,11 @@
 
 .SelectIcon {
   display: flex;
+
+  & svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
 }
 
 .Value[data-placeholder] {
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
index 7cb20d8018b..51fb9b5a794 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
@@ -77,25 +77,17 @@ export default function AnimatedSelectMotionDemo() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      {...props}
-    >
-      <path d="m7 15 5 5 5-5" />
-      <path d="m7 9 5-5 5 5" />
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg fill="currentColor" width="10" height="10" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
index 700f817d225..13db57f4620 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
@@ -129,7 +129,7 @@ export function ItemIndicator({ className, ...props }: Combobox.ItemIndicator.Pr
 
 export function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -137,15 +137,7 @@ export function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
-      {...props}
-    >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
index 9236dd51a1e..e1f3ba80cd1 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
@@ -22,7 +22,7 @@ export function Trigger({ className, ...props }: Select.Trigger.Props) {
   return (
     <Select.Trigger
       className={clsx(
-        'flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white px-2 text-sm font-normal text-neutral-950 select-none not-data-filled:text-neutral-500 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:not-data-filled:text-neutral-400 dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800',
+        'flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white px-2 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
index 337d1a6e172..a54ff3c5b8e 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
@@ -1,7 +1,6 @@
 'use client';
 import * as React from 'react';
 import { Toast } from '@base-ui/react/toast';
-import { X } from 'lucide-react';
 
 function Toasts() {
   const { toasts } = Toast.useToastManager();
@@ -21,10 +20,10 @@ function Toasts() {
           <pre className="whitespace-pre-wrap">{JSON.stringify(toast.data, null, 2)}</pre>
         </div>
         <Toast.Close
-          className="absolute top-2 right-2 flex size-5 items-center justify-center border-0 bg-transparent p-0 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
+          className="absolute top-2 right-2 flex size-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700"
           aria-label="Close"
         >
-          <X className="size-4" />
+          <XIcon className="size-5" />
         </Toast.Close>
       </Toast.Content>
     </Toast.Root>
@@ -45,3 +44,12 @@ export function ToastProvider(props: { children: React.ReactNode }) {
 }
 
 export const useToastManager = Toast.useToastManager;
+
+function XIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
+      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
index fe3c8fa3800..e56517cd6bf 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
@@ -1,6 +1,5 @@
 'use client';
 import * as React from 'react';
-import { ChevronsUpDown, Check, Plus, Minus } from 'lucide-react';
 import { Button } from '../../components/button';
 import { CheckboxGroup } from '../../components/checkbox-group';
 import { Form } from '../../components/form';
@@ -66,7 +65,7 @@ function ExampleForm() {
                     return (
                       <Combobox.Item key={region} value={region}>
                         <Combobox.ItemIndicator>
-                          <Check className="size-3" />
+                          <CheckIcon className="size-3" />
                         </Combobox.ItemIndicator>
                         <span className="col-start-2">{region}</span>
                       </Combobox.Item>
@@ -119,7 +118,7 @@ function ExampleForm() {
             <Select.Trigger className="w-48">
               <Select.Value />
               <Select.Icon>
-                <ChevronsUpDown className="size-3" />
+                <ChevronUpDownIcon className="size-3" />
               </Select.Icon>
             </Select.Trigger>
           </div>
@@ -132,7 +131,7 @@ function ExampleForm() {
                     return (
                       <Select.Item key={value} value={value}>
                         <Select.ItemIndicator>
-                          <Check className="size-3" />
+                          <CheckIcon className="size-3" />
                         </Select.ItemIndicator>
                         <Select.ItemText>{label}</Select.ItemText>
                       </Select.Item>
@@ -152,11 +151,11 @@ function ExampleForm() {
           <Field.Label>Number of instances</Field.Label>
           <NumberField.Group>
             <NumberField.Decrement>
-              <Minus className="size-3" />
+              <MinusIcon className="size-3" />
             </NumberField.Decrement>
             <NumberField.Input />
             <NumberField.Increment>
-              <Plus className="size-3" />
+              <PlusIcon className="size-3" />
             </NumberField.Increment>
           </NumberField.Group>
         </NumberField.Root>
@@ -234,7 +233,7 @@ function ExampleForm() {
                   <Field.Label className="uppercase">
                     <Checkbox.Root value={val}>
                       <Checkbox.Indicator>
-                        <Check className="size-3" />
+                        <CheckIcon className="size-3" />
                       </Checkbox.Indicator>
                     </Checkbox.Root>
                     {val}
@@ -261,6 +260,40 @@ export default function App() {
   );
 }
 
+function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
+
+function CheckIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
+
+function PlusIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
+
+function MinusIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
+
 function cartesian<T extends string[][]>(...arrays: T): string[][] {
   return arrays.reduce<string[][]>(
     (acc, curr) => acc.flatMap((a) => curr.map((b) => [...a, b])),
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
index e1c6f85bcf4..ceae5735080 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
@@ -1,7 +1,6 @@
 'use client';
 import * as React from 'react';
 import { useForm, Controller } from 'react-hook-form';
-import { ChevronsUpDown, Check, Plus, Minus } from 'lucide-react';
 import { Button } from '../../components/button';
 import { CheckboxGroup } from '../../components/checkbox-group';
 import { Form } from '../../components/form';
@@ -116,7 +115,7 @@ function ReactHookForm() {
                         return (
                           <Combobox.Item key={region} value={region}>
                             <Combobox.ItemIndicator>
-                              <Check className="size-3" />
+                              <CheckIcon className="size-3" />
                             </Combobox.ItemIndicator>
                             <span className="col-start-2">{region}</span>
                           </Combobox.Item>
@@ -198,7 +197,7 @@ function ReactHookForm() {
                 <Select.Trigger className="w-48" onBlur={onBlur}>
                   <Select.Value />
                   <Select.Icon>
-                    <ChevronsUpDown className="size-3" />
+                    <ChevronUpDownIcon className="size-3" />
                   </Select.Icon>
                 </Select.Trigger>
               </div>
@@ -211,7 +210,7 @@ function ReactHookForm() {
                         return (
                           <Select.Item key={serverType} value={serverType}>
                             <Select.ItemIndicator>
-                              <Check className="size-3" />
+                              <CheckIcon className="size-3" />
                             </Select.ItemIndicator>
                             <Select.ItemText>{label}</Select.ItemText>
                           </Select.Item>
@@ -243,11 +242,11 @@ function ReactHookForm() {
               <Field.Label>Number of instances</Field.Label>
               <NumberField.Group>
                 <NumberField.Decrement>
-                  <Minus className="size-3" />
+                  <MinusIcon className="size-3" />
                 </NumberField.Decrement>
                 <NumberField.Input ref={ref} onBlur={onBlur} />
                 <NumberField.Increment>
-                  <Plus className="size-3" />
+                  <PlusIcon className="size-3" />
                 </NumberField.Increment>
               </NumberField.Group>
             </NumberField.Root>
@@ -386,7 +385,7 @@ function ReactHookForm() {
                           onBlur={onBlur}
                         >
                           <Checkbox.Indicator>
-                            <Check className="size-3" />
+                            <CheckIcon className="size-3" />
                           </Checkbox.Indicator>
                         </Checkbox.Root>
                         {val}
@@ -415,6 +414,40 @@ export default function App() {
   );
 }
 
+function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
+
+function CheckIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
+
+function PlusIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
+
+function MinusIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
+
 function cartesian<T extends string[][]>(...arrays: T): string[][] {
   return arrays.reduce<string[][]>(
     (acc, curr) => acc.flatMap((a) => curr.map((b) => [...a, b])),
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
index f94fa1d8b89..26d8a6aec8e 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
@@ -1,7 +1,6 @@
 'use client';
 import * as React from 'react';
 import { useForm, revalidateLogic, DeepKeys, ValidationError } from '@tanstack/react-form';
-import { ChevronsUpDown, Check, Plus, Minus } from 'lucide-react';
 import { Button } from '../../components/button';
 import { CheckboxGroup } from '../../components/checkbox-group';
 import { RadioGroup } from '../../components/radio-group';
@@ -151,7 +150,7 @@ function TanstackForm() {
                           return (
                             <Combobox.Item key={region} value={region}>
                               <Combobox.ItemIndicator>
-                                <Check className="size-3" />
+                                <CheckIcon className="size-3" />
                               </Combobox.ItemIndicator>
                               <span className="col-start-2">{region}</span>
                             </Combobox.Item>
@@ -241,7 +240,7 @@ function TanstackForm() {
                   <Select.Trigger className="w-48" onBlur={field.handleBlur}>
                     <Select.Value />
                     <Select.Icon>
-                      <ChevronsUpDown className="size-3" />
+                      <ChevronUpDownIcon className="size-3" />
                     </Select.Icon>
                   </Select.Trigger>
                 </div>
@@ -254,7 +253,7 @@ function TanstackForm() {
                           return (
                             <Select.Item key={value} value={value}>
                               <Select.ItemIndicator>
-                                <Check className="size-3" />
+                                <CheckIcon className="size-3" />
                               </Select.ItemIndicator>
                               <Select.ItemText>{label}</Select.ItemText>
                             </Select.Item>
@@ -293,11 +292,11 @@ function TanstackForm() {
                 <Field.Label>Number of instances</Field.Label>
                 <NumberField.Group>
                   <NumberField.Decrement>
-                    <Minus className="size-3" />
+                    <MinusIcon className="size-3" />
                   </NumberField.Decrement>
                   <NumberField.Input onBlur={field.handleBlur} />
                   <NumberField.Increment>
-                    <Plus className="size-3" />
+                    <PlusIcon className="size-3" />
                   </NumberField.Increment>
                 </NumberField.Group>
               </NumberField.Root>
@@ -454,7 +453,7 @@ function TanstackForm() {
                         <Field.Label className="uppercase">
                           <Checkbox.Root value={checkboxValue} onBlur={field.handleBlur}>
                             <Checkbox.Indicator>
-                              <Check className="size-3" />
+                              <CheckIcon className="size-3" />
                             </Checkbox.Indicator>
                           </Checkbox.Root>
                           {checkboxValue}
@@ -487,6 +486,40 @@ export default function App() {
   );
 }
 
+function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
+
+function CheckIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
+
+function PlusIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
+
+function MinusIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
+
 function isEmpty(object: Partial<Record<DeepKeys<FormValues>, ValidationError>>) {
   // eslint-disable-next-line
   for (const _ in object) {
diff --git a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.tsx b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.tsx
index 11a25703c87..f31792dd51f 100644
--- a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.tsx
@@ -45,7 +45,7 @@ export default function ExamplePreventBaseUIHandler() {
 
 function HeartFilledIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
       <path d="M7.99961 13.8667C7.88761 13.8667 7.77561 13.8315 7.68121 13.7611C7.43321 13.5766 1.59961 9.1963 1.59961 5.8667C1.59961 3.80856 3.27481 2.13336 5.33294 2.13336C6.59054 2.13336 7.49934 2.81176 7.99961 3.3131C8.49988 2.81176 9.40868 2.13336 10.6663 2.13336C12.7244 2.13336 14.3996 3.80803 14.3996 5.8667C14.3996 9.1963 8.56601 13.5766 8.31801 13.7616C8.22361 13.8315 8.11161 13.8667 7.99961 13.8667Z" />
     </svg>
   );
@@ -53,7 +53,7 @@ function HeartFilledIcon(props: React.ComponentProps<'svg'>) {
 
 function HeartOutlineIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"

From c0f85081210cc2686f9d5ae9c2a0d47915678202 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 6 May 2026 17:20:14 +0200
Subject: [PATCH 137/257] Update snapshot

---
 .../__snapshots__/mdxToMarkdown.test.mjs.snap | 224 ++++++++----------
 1 file changed, 104 insertions(+), 120 deletions(-)

diff --git a/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap b/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap
index 8d05018b69b..51b54bdbf5e 100644
--- a/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap
+++ b/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap
@@ -20,46 +20,46 @@ import { Accordion } from '@base-ui/react/accordion';
 
 export default function ExampleAccordion() {
   return (
-    <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.Root className="flex w-80 max-w-full flex-col border-b border-neutral-950 text-neutral-950 dark:border-white dark:text-white">
+      <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             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" />
+            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out 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-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="py-2">
             Base UI is a library of high-quality unstyled React components for design systems and
             web apps.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item className="border-b border-gray-200">
+      <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             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" />
+            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out 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-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="py-2">
             Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before,
             you’ll feel at home.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item className="border-b border-gray-200">
+      <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             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" />
+            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out 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-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">Of course! Base UI is free and open source.</div>
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="py-2">Of course! Base UI is free and open source.</div>
         </Accordion.Panel>
       </Accordion.Item>
     </Accordion.Root>
@@ -68,8 +68,9 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="currentColor" {...props}>
-      <path d="M6.75 0H5.25V5.25H0V6.75L5.25 6.75V12H6.75V6.75L12 6.75V5.25H6.75V0Z" />
+    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
@@ -85,15 +86,11 @@ This example shows how to implement the component using CSS Modules.
 .Accordion {
   box-sizing: border-box;
   display: flex;
-  width: 24rem;
-  max-width: calc(100vw - 8rem);
+  width: 20rem;
+  max-width: 100%;
   flex-direction: column;
-  justify-content: center;
-  color: var(--color-gray-900);
-}
-
-.Item {
-  border-bottom: 1px solid var(--color-gray-200);
+  border-bottom: 1px solid light-dark(var(--color-neutral-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Header {
@@ -102,32 +99,27 @@ This example shows how to implement the component using CSS Modules.
 
 .Trigger {
   box-sizing: border-box;
-  position: relative;
   display: flex;
   width: 100%;
-  gap: 1rem;
-  align-items: baseline;
+  align-items: center;
   justify-content: space-between;
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem 0.25rem;
-  color: var(--color-gray-900);
+  gap: 1rem;
+  padding: 0.5rem 0;
+  margin: 0;
+  border: none;
+  border-top: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
+  background-color: transparent;
+  color: light-dark(var(--color-neutral-950), white);
   font-family: inherit;
+  font-size: 0.875rem;
   font-weight: 400;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  background: var(--color-gray-50);
-  border: none;
-  outline: none;
+  line-height: 1.25rem;
   text-align: left;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
+  user-select: none;
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid var(--color-blue-800);
     z-index: 1;
   }
 }
@@ -137,11 +129,10 @@ This example shows how to implement the component using CSS Modules.
   flex-shrink: 0;
   width: 0.75rem;
   height: 0.75rem;
-  margin-right: 0.5rem;
-  transition: transform 150ms ease-out;
+  transition: transform 100ms ease-out;
 
   [data-panel-open] > & {
-    transform: rotate(45deg) scale(1.1);
+    transform: rotate(45deg);
   }
 }
 
@@ -149,9 +140,8 @@ This example shows how to implement the component using CSS Modules.
   box-sizing: border-box;
   height: var(--accordion-panel-height);
   overflow: hidden;
-  color: var(--color-gray-600);
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   transition: height 150ms ease-out;
 
   &[data-starting-style],
@@ -161,7 +151,7 @@ This example shows how to implement the component using CSS Modules.
 }
 
 .Content {
-  padding: 0.75rem;
+  padding: 0.5rem 0;
 }
 
 \`\`\`
@@ -222,8 +212,9 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="currentColor" {...props}>
-      <path d="M6.75 0H5.25V5.25H0V6.75L5.25 6.75V12H6.75V6.75L12 6.75V5.25H6.75V0Z" />
+    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
@@ -268,47 +259,47 @@ export default function ExampleAccordion() {
   return (
     <Accordion.Root
       multiple
-      className="flex w-96 max-w-[calc(100vw-8rem)] flex-col justify-center text-gray-900"
+      className="flex w-80 max-w-full flex-col border-b border-neutral-950 text-neutral-950 dark:border-white dark:text-white"
     >
-      <Accordion.Item className="border-b border-gray-200">
+      <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             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" />
+            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out 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-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="py-2">
             Base UI is a library of high-quality unstyled React components for design systems and
             web apps.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item className="border-b border-gray-200">
+      <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             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" />
+            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out 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-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="py-2">
             Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before,
             you’ll feel at home.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item className="border-b border-gray-200">
+      <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
             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" />
+            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out 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-[ending-style]:h-0 data-[starting-style]:h-0">
-          <div className="p-3">Of course! Base UI is free and open source.</div>
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
+          <div className="py-2">Of course! Base UI is free and open source.</div>
         </Accordion.Panel>
       </Accordion.Item>
     </Accordion.Root>
@@ -317,8 +308,9 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="currentColor" {...props}>
-      <path d="M6.75 0H5.25V5.25H0V6.75L5.25 6.75V12H6.75V6.75L12 6.75V5.25H6.75V0Z" />
+    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
@@ -334,15 +326,11 @@ This example shows how to implement the component using CSS Modules.
 .Accordion {
   box-sizing: border-box;
   display: flex;
-  width: 24rem;
-  max-width: calc(100vw - 8rem);
+  width: 20rem;
+  max-width: 100%;
   flex-direction: column;
-  justify-content: center;
-  color: var(--color-gray-900);
-}
-
-.Item {
-  border-bottom: 1px solid var(--color-gray-200);
+  border-bottom: 1px solid light-dark(var(--color-neutral-950), white);
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Header {
@@ -351,32 +339,27 @@ This example shows how to implement the component using CSS Modules.
 
 .Trigger {
   box-sizing: border-box;
-  position: relative;
   display: flex;
   width: 100%;
-  gap: 1rem;
-  align-items: baseline;
+  align-items: center;
   justify-content: space-between;
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem 0.25rem;
-  color: var(--color-gray-900);
+  gap: 1rem;
+  padding: 0.5rem 0;
+  margin: 0;
+  border: none;
+  border-top: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
+  background-color: transparent;
+  color: light-dark(var(--color-neutral-950), white);
   font-family: inherit;
+  font-size: 0.875rem;
   font-weight: 400;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  background: var(--color-gray-50);
-  border: none;
-  outline: none;
+  line-height: 1.25rem;
   text-align: left;
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--color-gray-100);
-    }
-  }
+  user-select: none;
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid var(--color-blue-800);
     z-index: 1;
   }
 }
@@ -386,11 +369,10 @@ This example shows how to implement the component using CSS Modules.
   flex-shrink: 0;
   width: 0.75rem;
   height: 0.75rem;
-  margin-right: 0.5rem;
-  transition: transform 150ms ease-out;
+  transition: transform 100ms ease-out;
 
   [data-panel-open] > & {
-    transform: rotate(45deg) scale(1.1);
+    transform: rotate(45deg);
   }
 }
 
@@ -398,9 +380,8 @@ This example shows how to implement the component using CSS Modules.
   box-sizing: border-box;
   height: var(--accordion-panel-height);
   overflow: hidden;
-  color: var(--color-gray-600);
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   transition: height 150ms ease-out;
 
   &[data-starting-style],
@@ -410,7 +391,7 @@ This example shows how to implement the component using CSS Modules.
 }
 
 .Content {
-  padding: 0.75rem;
+  padding: 0.5rem 0;
 }
 
 \`\`\`
@@ -471,8 +452,9 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="currentColor" {...props}>
-      <path d="M6.75 0H5.25V5.25H0V6.75L5.25 6.75V12H6.75V6.75L12 6.75V5.25H6.75V0Z" />
+    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
 }
@@ -856,10 +838,10 @@ export default function ExampleDirectionProvider() {
     <div dir="rtl">
       <DirectionProvider direction="rtl">
         <Slider.Root defaultValue={25}>
-          <Slider.Control className="flex w-56 items-center py-3">
-            <Slider.Track className="relative h-1 w-full rounded-sm bg-gray-200 shadow-[inset_0_0_0_1px] shadow-gray-200">
-              <Slider.Indicator className="rounded-sm bg-gray-700" />
-              <Slider.Thumb className="size-4 rounded-full bg-white outline-1 outline-gray-300 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-blue-800" />
+          <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
+            <Slider.Track className="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800">
+              <Slider.Indicator className="bg-neutral-950 select-none dark:bg-white" />
+              <Slider.Thumb className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950" />
             </Slider.Track>
           </Slider.Control>
         </Slider.Root>
@@ -882,31 +864,33 @@ This example shows how to implement the component using CSS Modules.
   align-items: center;
   width: 14rem;
   padding-block: 0.75rem;
+  touch-action: none;
+  user-select: none;
 }
 
 .Track {
   width: 100%;
-  background-color: var(--color-gray-200);
-  box-shadow: inset 0 0 0 1px var(--color-gray-200);
   height: 0.25rem;
-  border-radius: 0.25rem;
-  position: relative;
+  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  user-select: none;
 }
 
 .Indicator {
-  border-radius: 0.25rem;
-  background-color: var(--color-gray-700);
+  background-color: light-dark(var(--color-neutral-950), white);
+  user-select: none;
 }
 
 .Thumb {
+  box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border-radius: 100%;
-  background-color: white;
-  outline: 1px solid var(--color-gray-300);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: light-dark(white, var(--color-neutral-950));
+  user-select: none;
 
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: 2px;
   }
 }
 

From 6af0f630ad6d0b839253e28051986e4585224dcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 7 May 2026 12:18:31 +0200
Subject: [PATCH 138/257] Menu: remove arrow and add separate demo

---
 .../components/menu/demos/_index.module.css   |  42 -----
 .../demos/arrow/css-modules/index.module.css  | 155 ++++++++++++++++++
 .../menu/demos/arrow/css-modules/index.tsx    |  40 +++++
 .../components/menu/demos/arrow/index.ts      |   8 +
 .../menu/demos/arrow/tailwind/index.tsx       |  42 +++++
 .../css-modules/index.module.css              |  42 -----
 .../checkbox-items/css-modules/index.tsx      |   1 -
 .../demos/checkbox-items/tailwind/index.tsx   |   1 -
 .../css-modules/index.tsx                     |   2 -
 .../tailwind/index.tsx                        |   2 -
 .../css-modules/index.module.css              |   4 -
 .../css-modules/index.tsx                     |   2 -
 .../detached-triggers-full/tailwind/index.tsx |  16 --
 .../css-modules/index.tsx                     |   2 -
 .../tailwind/index.tsx                        |   1 -
 .../group-labels/css-modules/index.module.css |  42 -----
 .../demos/group-labels/css-modules/index.tsx  |   2 -
 .../demos/group-labels/tailwind/index.tsx     |   2 -
 .../demos/hero/css-modules/index.module.css   |  42 -----
 .../menu/demos/hero/css-modules/index.tsx     |   1 -
 .../menu/demos/hero/tailwind/index.tsx        |   1 -
 .../css-modules/index.module.css              |  42 -----
 .../demos/open-on-hover/css-modules/index.tsx |   1 -
 .../demos/open-on-hover/tailwind/index.tsx    |   1 -
 .../radio-items/css-modules/index.module.css  |  42 -----
 .../demos/radio-items/css-modules/index.tsx   |   1 -
 .../menu/demos/radio-items/tailwind/index.tsx |   1 -
 .../submenu/css-modules/index.module.css      |  42 -----
 .../menu/demos/submenu/css-modules/index.tsx  |   1 -
 .../menu/demos/submenu/tailwind/index.tsx     |   1 -
 .../app/(docs)/react/components/menu/page.mdx |   9 +-
 docs/src/app/(docs)/react/components/page.mdx |   1 +
 32 files changed, 254 insertions(+), 338 deletions(-)
 create mode 100644 docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
 create mode 100644 docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.tsx
 create mode 100644 docs/src/app/(docs)/react/components/menu/demos/arrow/index.ts
 create mode 100644 docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx

diff --git a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
index 555637f97d3..684ed2819e2 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
@@ -126,48 +126,6 @@
   }
 }
 
-.Arrow {
-  display: block;
-  position: relative;
-  width: 12px;
-  height: 6px;
-  overflow: clip;
-
-  &[data-side='top'] {
-    bottom: -6px;
-    rotate: 180deg;
-  }
-
-  &[data-side='bottom'] {
-    top: -6px;
-    rotate: 0deg;
-  }
-
-  &[data-side='left'] {
-    right: -9px;
-    rotate: 90deg;
-  }
-
-  &[data-side='right'] {
-    left: -9px;
-    rotate: -90deg;
-  }
-
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    box-sizing: border-box;
-    width: calc(6px * sqrt(2));
-    height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-neutral-950));
-    border: 1px solid light-dark(var(--color-neutral-950), white);
-    transform: translate(-50%, 50%) rotate(45deg);
-  }
-}
-
 .Item {
   outline: 0;
   cursor: default;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
new file mode 100644
index 00000000000..d8300d41d91
--- /dev/null
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
@@ -0,0 +1,155 @@
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+  margin: 0;
+  outline: 0;
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-neutral-950));
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: light-dark(var(--color-neutral-950), white);
+  user-select: none;
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  }
+
+  &[data-popup-open] {
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+  }
+
+  &[data-disabled] {
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue-800);
+    outline-offset: -2px;
+  }
+}
+
+.ButtonIcon {
+  width: 0.75rem;
+  height: 0.75rem;
+  margin-right: -0.25rem;
+}
+
+.Positioner {
+  outline: 0;
+}
+
+.Popup {
+  box-sizing: border-box;
+  position: relative;
+  outline: 0;
+  padding-block: 0.25rem;
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
+  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  transform-origin: var(--transform-origin);
+  transition:
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    filter: none;
+  }
+}
+
+.Arrow {
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 6px;
+  overflow: clip;
+
+  &[data-side='top'] {
+    bottom: -6px;
+    rotate: 180deg;
+  }
+
+  &[data-side='bottom'] {
+    top: -6px;
+    rotate: 0deg;
+  }
+
+  &[data-side='left'] {
+    right: -9px;
+    rotate: 90deg;
+  }
+
+  &[data-side='right'] {
+    left: -9px;
+    rotate: -90deg;
+  }
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    box-sizing: border-box;
+    width: calc(6px * sqrt(2));
+    height: calc(6px * sqrt(2));
+    background-color: light-dark(white, var(--color-neutral-950));
+    border: 1px solid light-dark(var(--color-neutral-950), white);
+    transform: translate(-50%, 50%) rotate(45deg);
+  }
+}
+
+.Item {
+  outline: 0;
+  cursor: default;
+  user-select: none;
+  padding-block: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 2rem;
+  display: flex;
+  font-size: 0.875rem;
+  line-height: 1rem;
+
+  &[data-highlighted] {
+    z-index: 0;
+    position: relative;
+    color: light-dark(white, var(--color-neutral-950));
+  }
+
+  &[data-highlighted]::before {
+    content: '';
+    z-index: -1;
+    position: absolute;
+    inset-block: 0;
+    inset-inline: 0.25rem;
+    background-color: light-dark(var(--color-neutral-950), white);
+  }
+}
+
+.Separator {
+  margin: 0.25rem 1rem;
+  height: 1px;
+  background-color: light-dark(var(--color-neutral-950), white);
+}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.tsx
new file mode 100644
index 00000000000..e74507ddbe8
--- /dev/null
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.tsx
@@ -0,0 +1,40 @@
+'use client';
+import * as React from 'react';
+import { Menu } from '@base-ui/react/menu';
+import styles from './index.module.css';
+
+export default function MenuArrowDemo() {
+  return (
+    <Menu.Root>
+      <Menu.Trigger className={styles.Button}>
+        Song <ChevronDownIcon className={styles.ButtonIcon} />
+      </Menu.Trigger>
+      <Menu.Portal>
+        <Menu.Positioner
+          className={styles.Positioner}
+          sideOffset={({ side }) => (side === 'top' ? 12 : 8)}
+        >
+          <Menu.Popup className={styles.Popup}>
+            <Menu.Arrow className={styles.Arrow} />
+            <Menu.Item className={styles.Item}>Add to Library</Menu.Item>
+            <Menu.Item className={styles.Item}>Add to Playlist</Menu.Item>
+            <Menu.Separator className={styles.Separator} />
+            <Menu.Item className={styles.Item}>Play Next</Menu.Item>
+            <Menu.Item className={styles.Item}>Play Last</Menu.Item>
+            <Menu.Separator className={styles.Separator} />
+            <Menu.Item className={styles.Item}>Favorite</Menu.Item>
+            <Menu.Item className={styles.Item}>Share</Menu.Item>
+          </Menu.Popup>
+        </Menu.Positioner>
+      </Menu.Portal>
+    </Menu.Root>
+  );
+}
+
+function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/index.ts b/docs/src/app/(docs)/react/components/menu/demos/arrow/index.ts
new file mode 100644
index 00000000000..c668cc5973f
--- /dev/null
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/index.ts
@@ -0,0 +1,8 @@
+import { createDemoWithVariants } from 'docs/src/utils/createDemo';
+import CssModules from './css-modules';
+import Tailwind from './tailwind';
+
+export const DemoMenuArrow = createDemoWithVariants(import.meta.url, {
+  CssModules,
+  Tailwind,
+});
diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
new file mode 100644
index 00000000000..23efb1cf6e4
--- /dev/null
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
@@ -0,0 +1,42 @@
+'use client';
+import * as React from 'react';
+import { Menu } from '@base-ui/react/menu';
+
+const itemClass =
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white";
+
+export default function MenuArrowDemo() {
+  return (
+    <Menu.Root>
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        Song <ChevronDownIcon className="size-3 -mr-1" />
+      </Menu.Trigger>
+      <Menu.Portal>
+        <Menu.Positioner
+          className="outline-hidden"
+          sideOffset={({ side }) => (side === 'top' ? 12 : 8)}
+        >
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+            <Menu.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:[transform:translate(-50%,50%)_rotate(45deg)] before:border before:border-neutral-950 before:bg-white before:content-[''] dark:before:border-white dark:before:bg-neutral-950" />
+            <Menu.Item className={itemClass}>Add to Library</Menu.Item>
+            <Menu.Item className={itemClass}>Add to Playlist</Menu.Item>
+            <Menu.Separator className="mx-4 my-1 h-px bg-neutral-950 dark:bg-white" />
+            <Menu.Item className={itemClass}>Play Next</Menu.Item>
+            <Menu.Item className={itemClass}>Play Last</Menu.Item>
+            <Menu.Separator className="mx-4 my-1 h-px bg-neutral-950 dark:bg-white" />
+            <Menu.Item className={itemClass}>Favorite</Menu.Item>
+            <Menu.Item className={itemClass}>Share</Menu.Item>
+          </Menu.Popup>
+        </Menu.Positioner>
+      </Menu.Portal>
+    </Menu.Root>
+  );
+}
+
+function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
index 8aa11985a14..ebc37d290d9 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
@@ -79,48 +79,6 @@
   }
 }
 
-.Arrow {
-  display: block;
-  position: relative;
-  width: 12px;
-  height: 6px;
-  overflow: clip;
-
-  &[data-side='top'] {
-    bottom: -6px;
-    rotate: 180deg;
-  }
-
-  &[data-side='bottom'] {
-    top: -6px;
-    rotate: 0deg;
-  }
-
-  &[data-side='left'] {
-    right: -9px;
-    rotate: 90deg;
-  }
-
-  &[data-side='right'] {
-    left: -9px;
-    rotate: -90deg;
-  }
-
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    box-sizing: border-box;
-    width: calc(6px * sqrt(2));
-    height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-neutral-950));
-    border: 1px solid light-dark(var(--color-neutral-950), white);
-    transform: translate(-50%, 50%) rotate(45deg);
-  }
-}
-
 .CheckboxItem {
   outline: 0;
   cursor: default;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
index 0ce20b13043..7d87b550ac7 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
@@ -16,7 +16,6 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
           <Menu.Popup className={styles.Popup}>
-            <Menu.Arrow className={styles.Arrow} />
             <Menu.CheckboxItem
               checked={showMinimap}
               onCheckedChange={setShowMinimap}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index 1a794b4d98a..f42c3c5179d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -18,7 +18,6 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
           <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
-            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.CheckboxItem
               checked={showMinimap}
               onCheckedChange={setShowMinimap}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/css-modules/index.tsx
index 8cd0f30b2ee..efb161ff9b5 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/css-modules/index.tsx
@@ -87,8 +87,6 @@ export default function MenuDetachedTriggersControlledDemo() {
           <Menu.Portal>
             <Menu.Positioner className={styles.Positioner} sideOffset={8}>
               <Menu.Popup className={styles.Popup}>
-                <Menu.Arrow className={styles.Arrow} />
-
                 {payload &&
                   itemGroups[payload].map((item, index) => (
                     <Menu.Item key={index} className={styles.Item} onClick={item.onClick}>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
index 52f8ea5c1e6..1433f792b72 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -96,8 +96,6 @@ export default function MenuDetachedTriggersControlledDemo() {
           <Menu.Portal>
             <Menu.Positioner sideOffset={8} className="outline-hidden">
               <Menu.Popup className={popupClass}>
-                <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
-
                 {payload &&
                   MENUS[payload].map((item, index) => (
                     <Menu.Item key={index} className={itemClass} onClick={item.onClick}>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/css-modules/index.module.css
index af9a372b1d7..6b15e603fc5 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/css-modules/index.module.css
@@ -73,7 +73,3 @@
     opacity: 0;
   }
 }
-
-.Arrow {
-  transition: left calc(var(--animation-duration)) var(--easing);
-}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/css-modules/index.tsx
index 1c992885f39..0a9c7206d68 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/css-modules/index.tsx
@@ -58,8 +58,6 @@ export default function MenuDetachedTriggersFullDemo() {
               className={`${styles.Positioner} ${transitionStyles.Positioner}`}
             >
               <Menu.Popup className={`${styles.Popup} ${transitionStyles.Popup}`}>
-                <Menu.Arrow className={`${styles.Arrow} ${transitionStyles.Arrow}`} />
-
                 <Menu.Viewport className={transitionStyles.Viewport}>
                   {payload &&
                     MENUS[payload].groups.map((group, groupIndex) => (
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
index 2e5e9a5bd28..0e3a63bf718 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
@@ -96,22 +96,6 @@ export default function MenuDetachedTriggersFullDemo() {
                   dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none
                 `}
               >
-                <Menu.Arrow
-                  className={`
-                    relative block w-3 h-1.5 overflow-clip
-                    transition-[left]
-                    duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]
-                    data-[side=bottom]:top-[-6px]
-                    data-[side=left]:right-[-9px] data-[side=left]:rotate-90
-                    data-[side=right]:left-[-9px] data-[side=right]:-rotate-90
-                    data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180
-                    before:content-[''] before:absolute before:bottom-0 before:left-1/2
-                    before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))]
-                    before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white
-                    before:[transform:translate(-50%,50%)_rotate(45deg)]
-                  `}
-                />
-
                 <Menu.Viewport
                   className={`
                     relative h-full w-full overflow-clip
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx
index 0502910c224..76280395a4d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx
@@ -16,8 +16,6 @@ export default function MenuDetachedTriggersSimpleDemo() {
         <Menu.Portal>
           <Menu.Positioner sideOffset={8} className={styles.Positioner}>
             <Menu.Popup className={styles.Popup}>
-              <Menu.Arrow className={styles.Arrow} />
-
               <Menu.Item className={styles.Item}>Rename</Menu.Item>
               <Menu.Item className={styles.Item}>Duplicate</Menu.Item>
               <Menu.Item className={styles.Item}>Move to folder</Menu.Item>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
index c278639c2cd..bdd7ae415d4 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
@@ -23,7 +23,6 @@ export default function MenuDetachedTriggersSimpleDemo() {
         <Menu.Portal>
           <Menu.Positioner sideOffset={8} className="outline-hidden">
             <Menu.Popup className={popupClass}>
-              <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Menu.Item className={itemClass}>Rename</Menu.Item>
               <Menu.Item className={itemClass}>Duplicate</Menu.Item>
               <Menu.Item className={itemClass}>Move to folder</Menu.Item>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
index 436a90b3984..f201bb3381f 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
@@ -79,48 +79,6 @@
   }
 }
 
-.Arrow {
-  display: block;
-  position: relative;
-  width: 12px;
-  height: 6px;
-  overflow: clip;
-
-  &[data-side='top'] {
-    bottom: -6px;
-    rotate: 180deg;
-  }
-
-  &[data-side='bottom'] {
-    top: -6px;
-    rotate: 0deg;
-  }
-
-  &[data-side='left'] {
-    right: -9px;
-    rotate: 90deg;
-  }
-
-  &[data-side='right'] {
-    left: -9px;
-    rotate: -90deg;
-  }
-
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    box-sizing: border-box;
-    width: calc(6px * sqrt(2));
-    height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-neutral-950));
-    border: 1px solid light-dark(var(--color-neutral-950), white);
-    transform: translate(-50%, 50%) rotate(45deg);
-  }
-}
-
 .CheckboxItem,
 .RadioItem {
   outline: 0;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
index b5a522bac74..25f751ca05f 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
@@ -17,8 +17,6 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
           <Menu.Popup className={styles.Popup}>
-            <Menu.Arrow className={styles.Arrow} />
-
             <Menu.Group>
               <Menu.GroupLabel className={styles.GroupLabel}>Sort</Menu.GroupLabel>
               <Menu.RadioGroup value={value} onValueChange={setValue}>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index 65035ffa593..e1cd1c00d94 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -19,8 +19,6 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
           <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
-            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
-
             <Menu.Group>
               <Menu.GroupLabel className="cursor-default py-2 pr-8 pl-7.5 text-xs font-bold tracking-wider text-neutral-500 uppercase select-none dark:text-neutral-400">
                 Sort
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
index b4569daea0f..30a47f9a480 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
@@ -79,48 +79,6 @@
   }
 }
 
-.Arrow {
-  display: block;
-  position: relative;
-  width: 12px;
-  height: 6px;
-  overflow: clip;
-
-  &[data-side='top'] {
-    bottom: -6px;
-    rotate: 180deg;
-  }
-
-  &[data-side='bottom'] {
-    top: -6px;
-    rotate: 0deg;
-  }
-
-  &[data-side='left'] {
-    right: -9px;
-    rotate: 90deg;
-  }
-
-  &[data-side='right'] {
-    left: -9px;
-    rotate: -90deg;
-  }
-
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    box-sizing: border-box;
-    width: calc(6px * sqrt(2));
-    height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-neutral-950));
-    border: 1px solid light-dark(var(--color-neutral-950), white);
-    transform: translate(-50%, 50%) rotate(45deg);
-  }
-}
-
 .Item {
   outline: 0;
   cursor: default;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx
index 29d3aed4985..c4b1082ce93 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx
@@ -11,7 +11,6 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
           <Menu.Popup className={styles.Popup}>
-            <Menu.Arrow className={styles.Arrow} />
             <Menu.Item className={styles.Item}>Add to Library</Menu.Item>
             <Menu.Item className={styles.Item}>Add to Playlist</Menu.Item>
             <Menu.Separator className={styles.Separator} />
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
index ca6271aba2d..28c6ea9f1fe 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
@@ -13,7 +13,6 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
           <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
-            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.Item className={itemClass}>Add to Library</Menu.Item>
             <Menu.Item className={itemClass}>Add to Playlist</Menu.Item>
             <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
index b4569daea0f..30a47f9a480 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
@@ -79,48 +79,6 @@
   }
 }
 
-.Arrow {
-  display: block;
-  position: relative;
-  width: 12px;
-  height: 6px;
-  overflow: clip;
-
-  &[data-side='top'] {
-    bottom: -6px;
-    rotate: 180deg;
-  }
-
-  &[data-side='bottom'] {
-    top: -6px;
-    rotate: 0deg;
-  }
-
-  &[data-side='left'] {
-    right: -9px;
-    rotate: 90deg;
-  }
-
-  &[data-side='right'] {
-    left: -9px;
-    rotate: -90deg;
-  }
-
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    box-sizing: border-box;
-    width: calc(6px * sqrt(2));
-    height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-neutral-950));
-    border: 1px solid light-dark(var(--color-neutral-950), white);
-    transform: translate(-50%, 50%) rotate(45deg);
-  }
-}
-
 .Item {
   outline: 0;
   cursor: default;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx
index 9c042295757..db9f3208ac5 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx
@@ -11,7 +11,6 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
           <Menu.Popup className={styles.Popup}>
-            <Menu.Arrow className={styles.Arrow} />
             <Menu.Item className={styles.Item}>Get Up!</Menu.Item>
             <Menu.Item className={styles.Item}>Inside Out</Menu.Item>
             <Menu.Item className={styles.Item}>Night Beats</Menu.Item>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
index 14babdc96c5..3030c6d1fe1 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
@@ -16,7 +16,6 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
           <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
-            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.Item className={itemClass}>Get Up!</Menu.Item>
             <Menu.Item className={itemClass}>Inside Out</Menu.Item>
             <Menu.Item className={itemClass}>Night Beats</Menu.Item>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
index f2fd16e491a..53f52f98eca 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
@@ -79,48 +79,6 @@
   }
 }
 
-.Arrow {
-  display: block;
-  position: relative;
-  width: 12px;
-  height: 6px;
-  overflow: clip;
-
-  &[data-side='top'] {
-    bottom: -6px;
-    rotate: 180deg;
-  }
-
-  &[data-side='bottom'] {
-    top: -6px;
-    rotate: 0deg;
-  }
-
-  &[data-side='left'] {
-    right: -9px;
-    rotate: 90deg;
-  }
-
-  &[data-side='right'] {
-    left: -9px;
-    rotate: -90deg;
-  }
-
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    box-sizing: border-box;
-    width: calc(6px * sqrt(2));
-    height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-neutral-950));
-    border: 1px solid light-dark(var(--color-neutral-950), white);
-    transform: translate(-50%, 50%) rotate(45deg);
-  }
-}
-
 .RadioItem {
   outline: 0;
   cursor: default;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
index e2322d391fe..28c015954b0 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
@@ -13,7 +13,6 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
           <Menu.Popup className={styles.Popup}>
-            <Menu.Arrow className={styles.Arrow} />
             <Menu.RadioGroup value={value} onValueChange={setValue}>
               <Menu.RadioItem className={styles.RadioItem} value="date">
                 <Menu.RadioItemIndicator className={styles.RadioItemIndicator}>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index 4f6adc42626..d23766e880c 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -15,7 +15,6 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
           <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
-            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.RadioGroup value={value} onValueChange={setValue}>
               <Menu.RadioItem value="date" className={radioItemClass}>
                 <Menu.RadioItemIndicator className="col-start-1">
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
index 1947461f66c..61306af1500 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
@@ -79,48 +79,6 @@
   }
 }
 
-.Arrow {
-  display: block;
-  position: relative;
-  width: 12px;
-  height: 6px;
-  overflow: clip;
-
-  &[data-side='top'] {
-    bottom: -6px;
-    rotate: 180deg;
-  }
-
-  &[data-side='bottom'] {
-    top: -6px;
-    rotate: 0deg;
-  }
-
-  &[data-side='left'] {
-    right: -9px;
-    rotate: 90deg;
-  }
-
-  &[data-side='right'] {
-    left: -9px;
-    rotate: -90deg;
-  }
-
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    box-sizing: border-box;
-    width: calc(6px * sqrt(2));
-    height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-neutral-950));
-    border: 1px solid light-dark(var(--color-neutral-950), white);
-    transform: translate(-50%, 50%) rotate(45deg);
-  }
-}
-
 .Item,
 .SubmenuTrigger {
   outline: 0;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx
index ca598968f6a..29ad072f0e0 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx
@@ -12,7 +12,6 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
           <Menu.Popup className={styles.Popup}>
-            <Menu.Arrow className={styles.Arrow} />
             <Menu.Item className={styles.Item}>Add to Library</Menu.Item>
 
             <Menu.SubmenuRoot>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
index 892c6ad53b9..f43469707bf 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
@@ -18,7 +18,6 @@ export default function ExampleMenu() {
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
           <Menu.Popup className={popupClass}>
-            <Menu.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Menu.Item className={itemClass}>Add to Library</Menu.Item>
 
             <Menu.SubmenuRoot>
diff --git a/docs/src/app/(docs)/react/components/menu/page.mdx b/docs/src/app/(docs)/react/components/menu/page.mdx
index 3b4c45945b0..a7b577f6022 100644
--- a/docs/src/app/(docs)/react/components/menu/page.mdx
+++ b/docs/src/app/(docs)/react/components/menu/page.mdx
@@ -109,7 +109,6 @@ To create a submenu, nest another menu inside the parent menu with `<Menu.Submen
   <Menu.Portal>
     <Menu.Positioner>
       <Menu.Popup>
-        <Menu.Arrow />
         <Menu.Item />
 
         {/* @highlight-start */}
@@ -302,6 +301,14 @@ import { DemoMenuDetachedTriggersControlled } from './demos/detached-triggers-co
 
 <DemoMenuDetachedTriggersControlled compact />
 
+### Arrow
+
+Use the `<Menu.Arrow>` part inside the popup to visually connect the menu to its trigger.
+
+import { DemoMenuArrow } from './demos/arrow';
+
+<DemoMenuArrow compact />
+
 ### Animating the Menu
 
 When one menu is opened by multiple detached triggers, you can animate the menu as it moves between triggers.
diff --git a/docs/src/app/(docs)/react/components/page.mdx b/docs/src/app/(docs)/react/components/page.mdx
index d8165f073f2..c0478ec80fe 100644
--- a/docs/src/app/(docs)/react/components/page.mdx
+++ b/docs/src/app/(docs)/react/components/page.mdx
@@ -915,6 +915,7 @@ A list of actions in a dropdown, enhanced with keyboard navigation.
     - Detached triggers
     - Multiple triggers
     - Controlled mode with multiple triggers
+    - Arrow
     - Animating the Menu
       - Position and Size
       - Content

From 036d9f606c864c2f787f81a6f5e44d34843823ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 7 May 2026 19:04:40 +0200
Subject: [PATCH 139/257] Remove unused var

---
 docs/src/css/index.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/src/css/index.css b/docs/src/css/index.css
index 3a3ac000ceb..12c9d472d93 100644
--- a/docs/src/css/index.css
+++ b/docs/src/css/index.css
@@ -74,7 +74,6 @@
   --color-neutral-900: oklch(20.5% 0 0deg);
   --color-neutral-950: oklch(14.5% 0 0deg);
 
-  --color-blue-400: oklch(70.7% 0.165 254.624deg);
   --color-blue-500: oklch(62.3% 0.214 259.815deg);
   --color-blue-700: oklch(48.8% 0.243 264.376deg);
   --color-blue-800: oklch(42.4% 0.199 265.638deg);

From c06adef40646571190be22e16ea0f62650fcfcd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 8 May 2026 09:15:54 +0200
Subject: [PATCH 140/257] Tweak Tailwind sources

---
 docs/src/css/index.css | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/docs/src/css/index.css b/docs/src/css/index.css
index 12c9d472d93..e965074f218 100644
--- a/docs/src/css/index.css
+++ b/docs/src/css/index.css
@@ -44,12 +44,14 @@
 
 /* ═══ Safelist to generate Tailwind classes ═══ */
 
-/* TODO: Remove the .css extension once all CSS module demos are migrated to the new look */
-@source '../app/(docs)/react/**/demos/**/*.{ts,tsx,css}';
+/* Tailwind demos */
+@source '../app/(docs)/**/demos/**/*.{ts,tsx}';
 
-/* Temporary sources until Tailwind CSS vars are no longer used in them */
-@source './mdx-components.css';
-@source '../src/components/**/*.css';
+/* Enable all CSS files in the docs to ensure that all Tailwind CSS vars are available e.g. `--font-serif` */
+@source '../**/*.css';
+
+/* Disable Tailwind CSS vars in CSS Modules demos */
+@source not '../app/(docs)/**/demos/**/*.css';
 
 /* ═══ Tailwind theme ═══ */
 /* Register demo-relevant tokens so Tailwind can generate utility classes. */

From 149b7cebba68bd0d83b6f6cef47aeb3a8adf2e68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 8 May 2026 11:26:23 +0200
Subject: [PATCH 141/257] Accordion: make it outlined

---
 .../accordion/demos/_index.module.css         | 23 +++++++++++++++----
 .../accordion/demos/hero/tailwind/index.tsx   | 18 +++++++--------
 .../demos/multiple/tailwind/index.tsx         | 18 +++++++--------
 3 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
index 0739bb3a0e0..5e71c63b006 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
@@ -4,10 +4,16 @@
   width: 20rem;
   max-width: 100%;
   flex-direction: column;
-  border-bottom: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   color: light-dark(var(--color-neutral-950), white);
 }
 
+.Item {
+  & + & {
+    border-top: 1px solid light-dark(var(--color-neutral-950), white);
+  }
+}
+
 .Header {
   margin: 0;
 }
@@ -19,10 +25,9 @@
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  padding: 0.5rem 0;
+  padding: 0.5rem 0.75rem;
   margin: 0;
   border: none;
-  border-top: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
   background-color: transparent;
   color: light-dark(var(--color-neutral-950), white);
@@ -33,6 +38,16 @@
   text-align: left;
   user-select: none;
 
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     z-index: 1;
@@ -66,5 +81,5 @@
 }
 
 .Content {
-  padding: 0.5rem 0;
+  padding: 0.5rem 0.75rem;
 }
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
index 3bd8cf807c7..fdb6d852561 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
@@ -3,46 +3,46 @@ import { Accordion } from '@base-ui/react/accordion';
 
 export default function ExampleAccordion() {
   return (
-    <Accordion.Root className="flex w-80 max-w-full flex-col border-b border-neutral-950 text-neutral-950 dark:border-white dark:text-white">
+    <Accordion.Root className="flex w-80 max-w-full flex-col border border-neutral-950 text-neutral-950 dark:border-white dark:text-white">
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
             What is Base UI?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
-          <div className="py-2">
+          <div className="px-3 py-2">
             Base UI is a library of high-quality unstyled React components for design systems and
             web apps.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item>
+      <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
             How do I get started?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
-          <div className="py-2">
+          <div className="px-3 py-2">
             Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before,
             you’ll feel at home.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item>
+      <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
             Can I use it for my project?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
-          <div className="py-2">Of course! Base UI is free and open source.</div>
+          <div className="px-3 py-2">Of course! Base UI is free and open source.</div>
         </Accordion.Panel>
       </Accordion.Item>
     </Accordion.Root>
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
index c4a0046327f..0f0dbeb13e5 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
@@ -5,47 +5,47 @@ export default function ExampleAccordion() {
   return (
     <Accordion.Root
       multiple
-      className="flex w-80 max-w-full flex-col border-b border-neutral-950 text-neutral-950 dark:border-white dark:text-white"
+      className="flex w-80 max-w-full flex-col border border-neutral-950 text-neutral-950 dark:border-white dark:text-white"
     >
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
             What is Base UI?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
-          <div className="py-2">
+          <div className="px-3 py-2">
             Base UI is a library of high-quality unstyled React components for design systems and
             web apps.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item>
+      <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
             How do I get started?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
-          <div className="py-2">
+          <div className="px-3 py-2">
             Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before,
             you’ll feel at home.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item>
+      <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
             Can I use it for my project?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
-          <div className="py-2">Of course! Base UI is free and open source.</div>
+          <div className="px-3 py-2">Of course! Base UI is free and open source.</div>
         </Accordion.Panel>
       </Accordion.Item>
     </Accordion.Root>

From 16221d0773712ff3fd79c9aef101cb66a77117d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 8 May 2026 12:04:52 +0200
Subject: [PATCH 142/257] Buttons: line-height: 1

---
 .../components/alert-dialog/demos/_index.module.css  |  3 ++-
 .../detached-triggers-controlled/tailwind/index.tsx  |  2 +-
 .../detached-triggers-simple/tailwind/index.tsx      |  2 +-
 .../demos/hero/css-modules/index.module.css          |  3 ++-
 .../alert-dialog/demos/hero/tailwind/index.tsx       |  2 +-
 .../command-palette/css-modules/index.module.css     |  3 ++-
 .../demos/command-palette/tailwind/index.tsx         |  2 +-
 .../button/demos/hero/css-modules/index.module.css   |  3 ++-
 .../components/button/demos/hero/tailwind/index.tsx  |  2 +-
 .../demos/loading/css-modules/index.module.css       |  3 ++-
 .../button/demos/loading/tailwind/index.tsx          |  2 +-
 .../demos/hero/css-modules/index.module.css          |  3 ++-
 .../collapsible/demos/hero/tailwind/index.tsx        |  2 +-
 .../demos/creatable/css-modules/index.module.css     |  3 ++-
 .../combobox/demos/creatable/tailwind/index.tsx      |  4 ++--
 .../input-inside-popup/css-modules/index.module.css  |  3 ++-
 .../demos/input-inside-popup/tailwind/index.tsx      |  2 +-
 .../react/components/dialog/demos/_index.module.css  |  3 ++-
 .../close-confirmation/css-modules/index.module.css  |  3 ++-
 .../demos/close-confirmation/tailwind/index.tsx      | 10 +++++-----
 .../detached-triggers-controlled/tailwind/index.tsx  | 10 +++++-----
 .../detached-triggers-simple/tailwind/index.tsx      |  4 ++--
 .../dialog/demos/hero/css-modules/index.module.css   |  3 ++-
 .../components/dialog/demos/hero/tailwind/index.tsx  |  4 ++--
 .../demos/inside-scroll/css-modules/index.module.css |  3 ++-
 .../dialog/demos/inside-scroll/tailwind/index.tsx    |  4 ++--
 .../dialog/demos/nested/css-modules/index.module.css |  3 ++-
 .../dialog/demos/nested/tailwind/index.tsx           |  6 +++---
 .../outside-scroll/css-modules/index.module.css      |  3 ++-
 .../dialog/demos/outside-scroll/tailwind/index.tsx   |  2 +-
 .../demos/uncontained/css-modules/index.module.css   |  3 ++-
 .../dialog/demos/uncontained/tailwind/index.tsx      |  2 +-
 .../drawer/demos/hero/css-modules/index.module.css   |  3 ++-
 .../components/drawer/demos/hero/tailwind/index.tsx  |  4 ++--
 .../indent-provider/css-modules/index.module.css     |  3 ++-
 .../drawer/demos/indent-provider/tailwind/index.tsx  |  4 ++--
 .../demos/mobile-nav/css-modules/index.module.css    |  3 ++-
 .../drawer/demos/mobile-nav/tailwind/index.tsx       |  2 +-
 .../drawer/demos/nested/css-modules/index.module.css |  3 ++-
 .../drawer/demos/nested/tailwind/index.tsx           | 12 ++++++------
 .../demos/non-modal/css-modules/index.module.css     |  3 ++-
 .../drawer/demos/non-modal/tailwind/index.tsx        |  4 ++--
 .../demos/position/css-modules/index.module.css      |  3 ++-
 .../drawer/demos/position/tailwind/index.tsx         |  4 ++--
 .../demos/snap-points/css-modules/index.module.css   |  3 ++-
 .../drawer/demos/snap-points/tailwind/index.tsx      |  4 ++--
 .../demos/swipe-area/css-modules/index.module.css    |  3 ++-
 .../drawer/demos/swipe-area/tailwind/index.tsx       |  2 +-
 .../demos/uncontained/css-modules/index.module.css   |  3 ++-
 .../drawer/demos/uncontained/tailwind/index.tsx      |  2 +-
 .../demos/form-action/css-modules/index.module.css   |  3 ++-
 .../form/demos/form-action/tailwind/index.tsx        |  2 +-
 .../form/demos/hero/css-modules/index.module.css     |  3 ++-
 .../components/form/demos/hero/tailwind/index.tsx    |  2 +-
 .../form/demos/zod/css-modules/index.module.css      |  3 ++-
 .../components/form/demos/zod/tailwind/index.tsx     |  2 +-
 .../react/components/menu/demos/_index.module.css    |  3 ++-
 .../menu/demos/arrow/css-modules/index.module.css    |  3 ++-
 .../components/menu/demos/arrow/tailwind/index.tsx   |  2 +-
 .../checkbox-items/css-modules/index.module.css      |  3 ++-
 .../menu/demos/checkbox-items/tailwind/index.tsx     |  2 +-
 .../detached-triggers-controlled/tailwind/index.tsx  |  2 +-
 .../demos/group-labels/css-modules/index.module.css  |  3 ++-
 .../menu/demos/group-labels/tailwind/index.tsx       |  2 +-
 .../menu/demos/hero/css-modules/index.module.css     |  3 ++-
 .../components/menu/demos/hero/tailwind/index.tsx    |  2 +-
 .../demos/open-on-hover/css-modules/index.module.css |  3 ++-
 .../menu/demos/open-on-hover/tailwind/index.tsx      |  2 +-
 .../demos/radio-items/css-modules/index.module.css   |  3 ++-
 .../menu/demos/radio-items/tailwind/index.tsx        |  2 +-
 .../menu/demos/submenu/css-modules/index.module.css  |  3 ++-
 .../components/menu/demos/submenu/tailwind/index.tsx |  2 +-
 .../react/components/popover/demos/_index.module.css |  6 ++++--
 .../detached-triggers-controlled/tailwind/index.tsx  |  8 ++++----
 .../css-modules/index.module.css                     |  4 +++-
 .../demos/detached-triggers-full/tailwind/index.tsx  |  6 +++---
 .../detached-triggers-simple/tailwind/index.tsx      |  2 +-
 .../components/popover/demos/hero/tailwind/index.tsx |  2 +-
 .../popover/demos/open-on-hover/tailwind/index.tsx   |  2 +-
 .../demos/grouped/css-modules/index.module.css       |  3 ++-
 .../select/demos/grouped/tailwind/index.tsx          |  2 +-
 .../select/demos/hero/css-modules/index.module.css   |  3 ++-
 .../components/select/demos/hero/tailwind/index.tsx  |  2 +-
 .../demos/multiple/css-modules/index.module.css      |  3 ++-
 .../select/demos/multiple/tailwind/index.tsx         |  2 +-
 .../demos/object-values/css-modules/index.module.css |  3 ++-
 .../select/demos/object-values/tailwind/index.tsx    |  2 +-
 .../demos/anchored/css-modules/index.module.css      |  6 ++++--
 .../toast/demos/anchored/tailwind/index.tsx          |  4 ++--
 .../toast/demos/custom/css-modules/index.module.css  |  6 ++++--
 .../demos/deduplicate/css-modules/index.module.css   |  6 ++++--
 .../toast/demos/hero/css-modules/index.module.css    |  6 ++++--
 .../components/toast/demos/hero/tailwind/index.tsx   |  4 ++--
 .../demos/position/css-modules/index.module.css      |  6 ++++--
 .../toast/demos/position/tailwind/index.tsx          |  4 ++--
 .../toast/demos/promise/css-modules/index.module.css |  6 ++++--
 .../toast/demos/undo/css-modules/index.module.css    |  6 ++++--
 .../varying-heights/css-modules/index.module.css     |  6 ++++--
 .../detached-triggers-controlled/tailwind/index.tsx  |  2 +-
 .../demos/detached-triggers-full/tailwind/index.tsx  |  2 +-
 .../react/components/tooltip/demos/index.module.css  |  3 ++-
 101 files changed, 202 insertions(+), 142 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
index f0d6f44f5c7..db6e0e0ef88 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
@@ -11,7 +11,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 3e5a5bd5ea3..866d1a90c69 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -7,7 +7,7 @@ type AlertPayload = { message: string };
 const demoAlertDialog = AlertDialog.createHandle<AlertPayload>();
 
 const buttonClasses =
-  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
index b35c455f16e..ab5bd9591eb 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { AlertDialog } from '@base-ui/react/alert-dialog';
 const demoAlertDialog = AlertDialog.createHandle();
 
 const buttonClasses =
-  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
index e9189caf6ca..5b28bdfa222 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
@@ -11,7 +11,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
index d4a01590c68..ec4a3543f59 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
@@ -1,7 +1,7 @@
 import { AlertDialog } from '@base-ui/react/alert-dialog';
 
 const buttonClasses =
-  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
index dd6e2b50973..ce0ce237c72 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
@@ -12,7 +12,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
   cursor: default;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
index 68851a69c9a..ac88bd04d40 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleAutocompleteCommandPalette() {
 
   return (
     <Dialog.Root open={open} onOpenChange={setOpen}>
-      <Dialog.Trigger className="flex h-8 cursor-default items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700">
+      <Dialog.Trigger className="flex h-8 cursor-default items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700">
         Open command palette
       </Dialog.Trigger>
       <Dialog.Portal>
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
index b0860a01bf8..575f1b83875 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
@@ -12,7 +12,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
index bb242a3168f..7368cbaa66a 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Button } from '@base-ui/react/button';
 
 export default function ExampleButton() {
   return (
-    <Button className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
+    <Button className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
       Submit
     </Button>
   );
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
index b0860a01bf8..575f1b83875 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
@@ -12,7 +12,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
index ca7a3f502b5..3b75cb9b972 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleButton() {
 
   return (
     <Button
-      className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
+      className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
       disabled={loading}
       focusableWhenDisabled
       onClick={() => {
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
index abcc6db0089..03586e5ff1d 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
@@ -29,7 +29,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   user-select: none;
 
   @media (hover: hover) {
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
index bb0b3630a0b..fe2bb806d72 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Collapsible } from '@base-ui/react/collapsible';
 export default function ExampleCollapsible() {
   return (
     <Collapsible.Root className="flex min-h-36 w-48 flex-col justify-center text-neutral-950 dark:text-white">
-      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 pl-3 pr-2 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
+      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
         Recovery keys
         <ChevronIcon className="size-3 transition-transform duration-100 ease-out group-data-panel-open:rotate-90" />
       </Collapsible.Trigger>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
index 8692eb6965e..6b27bcd8be6 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
@@ -359,7 +359,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
index baf714c2d2e..4aa4216e253 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
@@ -221,12 +221,12 @@ export default function ExampleCreatableCombobox() {
                 defaultValue={pendingQueryRef.current}
               />
               <div className="mt-4 flex justify-end gap-3">
-                <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700">
+                <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700">
                   Cancel
                 </Dialog.Close>
                 <button
                   type="submit"
-                  className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700"
+                  className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700"
                 >
                   Create
                 </button>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
index 7f7df5db6e3..3cef1d096b6 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
@@ -19,7 +19,8 @@
   border: 1px solid light-dark(var(--color-neutral-950), white);
   font-family: inherit;
   font-size: 0.875rem;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   font-weight: 400;
   color: light-dark(var(--color-neutral-950), white);
   cursor: default;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index 48eddf2a8d3..6a2033663a4 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExamplePopoverCombobox() {
         <Combobox.Label className="cursor-default text-sm leading-5 font-bold text-neutral-950 dark:text-white">
           Country
         </Combobox.Label>
-        <Combobox.Trigger className="flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white pr-2 pl-3 text-sm leading-5 font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800">
+        <Combobox.Trigger className="flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white pr-2 pl-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800">
           <Combobox.Value
             placeholder={
               <span className="text-neutral-600 dark:text-neutral-400">Select country</span>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
index 16b030d2001..02f66ec90ed 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
@@ -11,7 +11,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
index bc4d4edbfc1..1114e0b670d 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
@@ -11,7 +11,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
index f92c0aaba92..8675b3dc21d 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleDialog() {
         }
       }}
     >
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Tweet
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -50,12 +50,12 @@ export default function ExampleDialog() {
               onChange={(event) => setTextareaValue(event.target.value)}
             />
             <div className="flex justify-end gap-3">
-              <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Cancel
               </Dialog.Close>
               <button
                 type="submit"
-                className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+                className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
               >
                 Tweet
               </button>
@@ -73,12 +73,12 @@ export default function ExampleDialog() {
               Your tweet will be lost.
             </AlertDialog.Description>
             <div className="flex justify-end gap-3">
-              <AlertDialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <AlertDialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Go back
               </AlertDialog.Close>
               <button
                 type="button"
-                className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+                className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
                 onClick={() => {
                   setConfirmationOpen(false);
                   setDialogOpen(false);
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index ba6feb1d268..386cc7c1df3 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -17,7 +17,7 @@ export default function DialogDetachedTriggersControlledDemo() {
     <React.Fragment>
       <div className="flex flex-wrap gap-2 justify-center">
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoDialog}
           id="trigger-1"
           payload={1}
@@ -26,7 +26,7 @@ export default function DialogDetachedTriggersControlledDemo() {
         </Dialog.Trigger>
 
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoDialog}
           id="trigger-2"
           payload={2}
@@ -35,7 +35,7 @@ export default function DialogDetachedTriggersControlledDemo() {
         </Dialog.Trigger>
 
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoDialog}
           id="trigger-3"
           payload={3}
@@ -45,7 +45,7 @@ export default function DialogDetachedTriggersControlledDemo() {
 
         <button
           type="button"
-          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
@@ -70,7 +70,7 @@ export default function DialogDetachedTriggersControlledDemo() {
               )}
 
               <div className="flex justify-end gap-3 mt-4">
-                <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                   Close
                 </Dialog.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
index 277cd7d5b8f..a55fe0e0a17 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function DialogDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
       <Dialog.Trigger
-        className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoDialog}
       >
         View notifications
@@ -23,7 +23,7 @@ export default function DialogDetachedTriggersSimpleDemo() {
               You are all caught up. Good job!
             </Dialog.Description>
             <div className="flex justify-end gap-3 mt-4">
-              <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Close
               </Dialog.Close>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
index 4753923a3ed..504798286c3 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
@@ -11,7 +11,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
index 090b071a50b..dc26026dc9d 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -14,7 +14,7 @@ export default function ExampleDialog() {
             You are all caught up. Good job!
           </Dialog.Description>
           <div className="flex justify-end gap-3 mt-4">
-            <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+            <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
               Close
             </Dialog.Close>
           </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
index 31334d54472..0e302314ae2 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
@@ -11,7 +11,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
index 2c457235c42..c6830e26801 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function InsideScrollDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -36,7 +36,7 @@ export default function InsideScrollDialog() {
               </ScrollArea.Scrollbar>
             </ScrollArea.Root>
             <div className="flex justify-end gap-3 p-4">
-              <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Close
               </Dialog.Close>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
index ab8948c4565..58f0ef94a78 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
@@ -11,7 +11,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
index ab01774c945..0ae70d23f24 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -15,7 +15,7 @@ export default function ExampleDialog() {
           </Dialog.Description>
           <div className="flex items-center gap-3 mt-4">
             <Dialog.Root>
-              <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Customize
               </Dialog.Trigger>
               <Dialog.Portal>
@@ -25,7 +25,7 @@ export default function ExampleDialog() {
                     Review your settings here.
                   </Dialog.Description>
                   <div className="flex items-center justify-end gap-3 mt-4">
-                    <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                    <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                       Close
                     </Dialog.Close>
                   </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
index 752835d7d8b..4bb8f5ba897 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
@@ -11,7 +11,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index d124be1376d..fd85f546453 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function OutsideScrollDialog() {
   const popupRef = React.useRef<HTMLDivElement>(null);
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
index 68c57ea8170..47289a7b524 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
@@ -11,7 +11,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
index 5e180e2b981..4c09ba71e3d 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleUncontainedDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
index cd55975c1ff..c5b2383a339 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
@@ -11,7 +11,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
index f15fa8d24a0..5ddad72637c 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawer() {
   return (
     <Drawer.Root swipeDirection="right">
-      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open drawer
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -16,7 +16,7 @@ export default function ExampleDrawer() {
                 This is a drawer that slides in from the side. You can swipe to dismiss it.
               </Drawer.Description>
               <div className="flex justify-end gap-3">
-                <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
index ea03271b886..79220b7c8c6 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
@@ -61,7 +61,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
index beaf4f8a94f..8c001b6ed20 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleDrawer() {
         <Drawer.Indent className="[--indent-radius:calc(1rem*(1-var(--drawer-swipe-progress)))] [--indent-transition:calc(1-clamp(0,calc(var(--drawer-swipe-progress)*100000),1))] relative min-h-80 border border-neutral-950 bg-white p-4 text-neutral-950 [transition:transform_0.4s_cubic-bezier(0.32,0.72,0,1),border-radius_0.25s_cubic-bezier(0.32,0.72,0,1)] origin-[center_top] will-change-transform [transform:scale(1)_translateY(0)] [transition-duration:calc(400ms*var(--indent-transition)),calc(250ms*var(--indent-transition))] data-active:transform-[scale(calc(0.98+(0.02*var(--drawer-swipe-progress))))_translateY(calc(0.5rem*(1-var(--drawer-swipe-progress))))] data-active:rounded-tl-(--indent-radius) data-active:rounded-tr-(--indent-radius) dark:border-white dark:bg-neutral-950 dark:text-white">
           <div className="flex min-h-80 items-center justify-center">
             <Drawer.Root modal={false}>
-              <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Open drawer
               </Drawer.Trigger>
               <Drawer.Portal container={portalContainer}>
@@ -28,7 +28,7 @@ export default function ExampleDrawer() {
                         You are all caught up. Good job!
                       </Drawer.Description>
                       <div className="flex justify-center gap-3">
-                        <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                        <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                           Close
                         </Drawer.Close>
                       </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
index f4acf2cb4e8..573417e1036 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
@@ -11,7 +11,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
index 26603c1a5d2..9daee0f2886 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
@@ -53,7 +53,7 @@ const LONG_LIST = [
 export default function ExampleDrawerMobileNav() {
   return (
     <Drawer.Root>
-      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open mobile menu
       </Drawer.Trigger>
       <Drawer.Portal>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
index 1b94ff98f35..8b3316c3d1b 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
@@ -11,7 +11,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
index 8223ad8cea6..20d49144c18 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawerNested() {
   return (
     <Drawer.Root>
-      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open drawer stack
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -22,7 +22,7 @@ export default function ExampleDrawerNested() {
               <div className="flex items-center justify-end gap-4">
                 <div className="mr-auto">
                   <Drawer.Root>
-                    <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                    <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                       Security settings
                     </Drawer.Trigger>
                     <Drawer.Portal>
@@ -46,7 +46,7 @@ export default function ExampleDrawerNested() {
                             <div className="flex items-center justify-end gap-4">
                               <div className="mr-auto">
                                 <Drawer.Root>
-                                  <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                                  <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                                     Advanced options
                                   </Drawer.Trigger>
                                   <Drawer.Portal>
@@ -92,7 +92,7 @@ export default function ExampleDrawerNested() {
                                           </div>
 
                                           <div className="flex justify-end">
-                                            <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                                            <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                                               Done
                                             </Drawer.Close>
                                           </div>
@@ -103,7 +103,7 @@ export default function ExampleDrawerNested() {
                                 </Drawer.Root>
                               </div>
 
-                              <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                              <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                                 Close
                               </Drawer.Close>
                             </div>
@@ -114,7 +114,7 @@ export default function ExampleDrawerNested() {
                   </Drawer.Root>
                 </div>
 
-                <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
index 21e6f9f4aae..a4923390d1b 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
@@ -11,7 +11,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
index aab940c4faf..458c189ba4c 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawer() {
   return (
     <Drawer.Root swipeDirection="right" modal={false} disablePointerDismissal>
-      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open non-modal drawer
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -16,7 +16,7 @@ export default function ExampleDrawer() {
                 swipe to dismiss it.
               </Drawer.Description>
               <div className="flex justify-end gap-3">
-                <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
index 5a182950bb8..90e6c9abb88 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
@@ -11,7 +11,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
index 1a131c8f29f..187360e4f82 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawer() {
   return (
     <Drawer.Root>
-      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open bottom drawer
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -19,7 +19,7 @@ export default function ExampleDrawer() {
                 You are all caught up. Good job!
               </Drawer.Description>
               <div className="flex justify-center gap-3">
-                <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
index 653c830ff00..0544fdcfc51 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
@@ -11,7 +11,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
index ecf830de024..c4b205ac63c 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
@@ -14,7 +14,7 @@ const snapPoints = [...VISIBLE_SNAP_POINTS_REM.map(toViewportSnapPoint), 1];
 export default function ExampleDrawerSnapPoints() {
   return (
     <Drawer.Root snapPoints={snapPoints}>
-      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open snap drawer
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -41,7 +41,7 @@ export default function ExampleDrawerSnapPoints() {
                   ))}
                 </div>
                 <div className="flex items-center justify-end gap-3">
-                  <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                  <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                     Close
                   </Drawer.Close>
                 </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
index 8aa3bc536c4..d7ebdbe16b3 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
@@ -75,7 +75,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
index 348d865bcab..67bc33ac71b 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
@@ -31,7 +31,7 @@ export default function ExampleDrawerSwipeArea() {
                   Swipe from the edge whenever you want to jump back into your playlists.
                 </Drawer.Description>
                 <div className="flex justify-end gap-3">
-                  <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                  <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                     Close
                   </Drawer.Close>
                 </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
index ba6dc25374d..197da5370dd 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
@@ -11,7 +11,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
index a84747918ff..934167250d9 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleDrawerUncontained() {
 
   return (
     <Drawer.Root open={open} onOpenChange={setOpen}>
-      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open action sheet
       </Drawer.Trigger>
       <Drawer.Portal>
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
index 15c16945550..2a28d2ea3da 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
@@ -64,7 +64,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
index bc84f8aa50a..8e76517a137 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
@@ -34,7 +34,7 @@ export default function ActionStateForm() {
         type="submit"
         disabled={loading}
         focusableWhenDisabled
-        className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
index 15c16945550..2a28d2ea3da 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
@@ -64,7 +64,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
index e08ee334dbb..e3ca4bf224d 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
@@ -45,7 +45,7 @@ export default function ExampleForm() {
         disabled={loading}
         focusableWhenDisabled
         type="submit"
-        className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
index 15c16945550..2a28d2ea3da 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
@@ -64,7 +64,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
index 4f1b3846a22..527413a7f66 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
@@ -58,7 +58,7 @@ export default function Page() {
       </Field.Root>
       <Button
         type="submit"
-        className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
index 684ed2819e2..77881cdaf5b 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
@@ -67,7 +67,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
index d8300d41d91..5ce9a0be330 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
@@ -14,7 +14,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
index 23efb1cf6e4..384b9caddbd 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
@@ -8,7 +8,7 @@ const itemClass =
 export default function MenuArrowDemo() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Song <ChevronDownIcon className="size-3 -mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
index ebc37d290d9..d0203cd47cb 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
@@ -14,7 +14,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index f42c3c5179d..d55902f8f19 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleMenu() {
 
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Workspace <ChevronDownIcon className="size-3 -mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
index 1433f792b72..5876ae2e998 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { Menu } from '@base-ui/react/menu';
 const itemClass =
   "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
 const triggerClass =
-  'flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-neutral-100 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
+  'flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-neutral-100 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 const popupClass =
   'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
index f201bb3381f..c9f6872dccf 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
@@ -14,7 +14,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index e1cd1c00d94..0297c82614f 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleMenu() {
 
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         View <ChevronDownIcon className="size-3 -mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
index 30a47f9a480..4a114f858e1 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
@@ -14,7 +14,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
index 28c6ea9f1fe..157adbb5bc1 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
@@ -7,7 +7,7 @@ const itemClass =
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Song <ChevronDownIcon className="size-3 -mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
index 30a47f9a480..4a114f858e1 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
@@ -14,7 +14,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
index 3030c6d1fe1..f2151225c39 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleMenu() {
     <Menu.Root>
       <Menu.Trigger
         openOnHover
-        className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         Add to playlist <ChevronDownIcon className="size-3 -mr-1" />
       </Menu.Trigger>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
index 53f52f98eca..c6f60b2fdea 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
@@ -14,7 +14,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index d23766e880c..0662ad6660f 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleMenu() {
   const [value, setValue] = React.useState('date');
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Sort <ChevronDownIcon className="size-3 -mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
index 61306af1500..346d3209b19 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
@@ -14,7 +14,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
index f43469707bf..9e91c6bce4f 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
@@ -12,7 +12,7 @@ const submenuTriggerClass =
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Song <ChevronDownIcon className="size-3 -mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
index e501821e044..1b4638e9087 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
@@ -12,7 +12,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
@@ -156,7 +157,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
index 39f1e40017c..e77d4c898d5 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
     <React.Fragment>
       <div className="flex gap-2 flex-wrap justify-center">
         <Popover.Trigger
-          className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm leading-none whitespace-nowrap font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoPopover}
           id="trigger-1"
         >
@@ -26,7 +26,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
         </Popover.Trigger>
 
         <Popover.Trigger
-          className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm leading-none whitespace-nowrap font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoPopover}
           id="trigger-2"
         >
@@ -34,7 +34,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
         </Popover.Trigger>
 
         <Popover.Trigger
-          className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm leading-none whitespace-nowrap font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoPopover}
           id="trigger-3"
         >
@@ -43,7 +43,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
 
         <button
           type="button"
-          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
index ccca12be89e..30c387f8bff 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
@@ -12,7 +12,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
@@ -239,6 +240,7 @@
     background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
     font-size: 0.875rem;
     line-height: 1;
+    white-space: nowrap;
     overflow: hidden;
     height: 3rem;
     width: 3rem;
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
index 8f876ab5795..12f8ac5a2bb 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
@@ -10,7 +10,7 @@ export default function PopoverDetachedTriggersFullDemo() {
   return (
     <div className="flex gap-2">
       <Popover.Trigger
-        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm leading-none whitespace-nowrap font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
         payload={NotificationsPanel}
       >
@@ -18,7 +18,7 @@ export default function PopoverDetachedTriggersFullDemo() {
       </Popover.Trigger>
 
       <Popover.Trigger
-        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm leading-none whitespace-nowrap font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
         payload={ActivityPanel}
       >
@@ -26,7 +26,7 @@ export default function PopoverDetachedTriggersFullDemo() {
       </Popover.Trigger>
 
       <Popover.Trigger
-        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm leading-none whitespace-nowrap font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
         payload={ProfilePanel}
       >
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
index 0526ffbf8d2..d1c039abb74 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
       <Popover.Trigger
-        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm leading-none whitespace-nowrap font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoPopover}
       >
         <BellIcon aria-label="Notifications" className="size-5" />
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
index f4f446e0713..b8ab63c4503 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { BellIcon } from '../../icons-tw';
 export default function ExamplePopover() {
   return (
     <Popover.Root>
-      <Popover.Trigger className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Popover.Trigger className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm leading-none whitespace-nowrap font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         <BellIcon aria-label="Notifications" className="size-5" />
       </Popover.Trigger>
       <Popover.Portal>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
index 591aeebe0e9..ef12d7ec7e3 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExamplePopover() {
     <Popover.Root>
       <Popover.Trigger
         openOnHover
-        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm leading-none whitespace-nowrap font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         <BellIcon aria-label="Notifications" className="size-5" />
       </Popover.Trigger>
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index d883f63ed2e..f0d9ff7c419 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -32,7 +32,8 @@
   background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   font-weight: 400;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index 7dd1069591e..d82b91d7ec9 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleSelectGrouped() {
         Produce
       </Field.Label>
       <Select.Root items={groupedProduce}>
-        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-2 pr-2 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-2 pr-2 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           <Select.Value
             className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400"
             placeholder="Select produce"
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
index 6efb8bad13d..9c01c461adc 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
@@ -32,7 +32,8 @@
   background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   font-weight: 400;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index ec3046b6cc3..fce08b921fe 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function ExampleSelect() {
         <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Apple
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-2 pr-2 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-2 pr-2 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           <Select.Value
             className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400"
             placeholder="Select apple"
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
index 6d12a4f7224..a741dd73fdf 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
@@ -32,7 +32,8 @@
   background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   font-weight: 400;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index 88098c38ee0..eda5496edc7 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -36,7 +36,7 @@ export default function MultiSelectExample() {
         <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Languages
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-2 pr-2 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-2 pr-2 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           <Select.Value className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400">
             {renderValue}
           </Select.Value>
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
index 86c0149cfb1..28557a8d134 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
@@ -29,7 +29,8 @@
   background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
   font-size: 0.875rem;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   font-weight: 400;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index a77ff654ace..fc16e33d9b3 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ObjectValueSelect() {
         <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Shipping method
         </Select.Label>
-        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-start justify-between gap-3 pl-2 pr-2 py-1.5 text-sm border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-start justify-between gap-3 pl-2 pr-2 py-1.5 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           <Select.Value>
             {(method: ShippingMethod) => (
               <span className="flex flex-col items-start gap-0.5">
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
index 07a564c55e1..b62f3d4d0f9 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
@@ -190,7 +190,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
@@ -305,7 +306,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index eb13384860f..96c43d33465 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -35,7 +35,7 @@ function StackedToastButton() {
   return (
     <button
       type="button"
-      className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+      className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       onClick={createToast}
     >
       Stacked toast
@@ -130,7 +130,7 @@ function StackedToasts() {
                 <Toast.Title className="text-sm font-bold" />
                 <Toast.Description className="text-sm" />
               </div>
-              <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Dismiss
               </Toast.Close>
             </Toast.Content>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
index 947b703565c..76ea9790dc2 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
@@ -149,7 +149,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
@@ -186,7 +187,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
index 054f1e0ea4e..ca0d1432a0d 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
@@ -161,7 +161,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
@@ -198,7 +199,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
index 947b703565c..76ea9790dc2 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
@@ -149,7 +149,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
@@ -186,7 +187,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
index f850107813e..c9b9eb0ffd6 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
@@ -30,7 +30,7 @@ function ToastButton() {
   return (
     <button
       type="button"
-      className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+      className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       onClick={createToast}
     >
       Create toast
@@ -51,7 +51,7 @@ function ToastList() {
           <Toast.Title className="text-sm font-bold" />
           <Toast.Description className="text-sm" />
         </div>
-        <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           Dismiss
         </Toast.Close>
       </Toast.Content>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
index 4815639a476..8d6f2a892d5 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
@@ -144,7 +144,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
@@ -181,7 +182,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
index f415feaec90..f3cfb163496 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
@@ -30,7 +30,7 @@ function ToastButton() {
   return (
     <button
       type="button"
-      className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+      className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       onClick={createToast}
     >
       Create toast
@@ -52,7 +52,7 @@ function ToastList() {
           <Toast.Title className="text-sm font-bold" />
           <Toast.Description className="text-sm" />
         </div>
-        <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           Dismiss
         </Toast.Close>
       </Toast.Content>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
index 568bf6d7173..2c363b1ba27 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
@@ -157,7 +157,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
@@ -194,7 +195,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
index e0bacbbc981..9406265ce49 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
@@ -152,7 +152,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
@@ -189,7 +190,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
index ab2334fd7b6..483a25eaaf3 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
@@ -149,7 +149,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
@@ -186,7 +187,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
index 5f30c466c6e..048d6f79e8f 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -9,7 +9,7 @@ const iconButtonClass =
   'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const buttonClass =
-  'flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm font-normal text-neutral-950 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
+  'flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
   'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
index f5257e3381d..76fb3528df9 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
@@ -6,7 +6,7 @@ import { InfoIcon, HelpIcon, AlertIcon } from '../../icons-tw';
 const demoTooltip = Tooltip.createHandle<React.ComponentType>();
 
 const triggerClass =
-  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
+  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const arrowClass =
   "relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
index 2a651af7d94..5a6d2ee7a9f 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
@@ -148,7 +148,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 

From b226fa2bc7a4068a8cb0bae07556c18252559072 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 8 May 2026 12:41:55 +0200
Subject: [PATCH 143/257] Remove sticky group labels

---
 .../autocomplete/demos/grid/css-modules/index.module.css   | 7 +------
 .../components/autocomplete/demos/grid/tailwind/index.tsx  | 4 ++--
 .../demos/grouped/css-modules/index.module.css             | 7 +------
 .../autocomplete/demos/grouped/tailwind/index.tsx          | 4 ++--
 .../combobox/demos/grouped/css-modules/index.module.css    | 7 +------
 .../components/combobox/demos/grouped/tailwind/index.tsx   | 4 ++--
 .../select/demos/grouped/css-modules/index.module.css      | 7 +------
 .../components/select/demos/grouped/tailwind/index.tsx     | 4 ++--
 8 files changed, 12 insertions(+), 32 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
index f396317adb6..4a51e066334 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
@@ -162,14 +162,13 @@
 
 .List {
   overflow: auto;
-  scroll-padding-top: 2.5rem;
+  scroll-padding-top: 0.5rem;
   scroll-padding-bottom: 0.35rem;
   overscroll-behavior: contain;
   max-height: min(
     calc(20.5rem - var(--input-container-height) - 2px),
     calc(var(--available-height) - var(--input-container-height) - 2px)
   );
-  isolation: isolate; /* Prevent overlap with iOS overlay scrollbars. */
 
   &:empty {
     padding: 0;
@@ -182,9 +181,6 @@
 
 .GroupLabel {
   box-sizing: border-box;
-  position: sticky;
-  z-index: 1;
-  top: 0;
   padding: 0.5rem;
   font-size: 0.75rem;
   font-weight: 700;
@@ -192,7 +188,6 @@
   color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  background-color: light-dark(white, var(--color-neutral-950));
 }
 
 .Group {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
index 51d7deb4828..a2f15c67820 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
@@ -77,14 +77,14 @@ export default function ExampleEmojiPicker() {
                     No emojis found
                   </div>
                 </Autocomplete.Empty>
-                <Autocomplete.List className="max-h-[min(calc(20.5rem-var(--input-container-height)-2px),calc(var(--available-height)-var(--input-container-height)-2px))] overflow-auto scroll-pt-10 scroll-pb-[0.35rem] overscroll-contain empty:p-0">
+                <Autocomplete.List className="max-h-[min(calc(20.5rem-var(--input-container-height)-2px),calc(var(--available-height)-var(--input-container-height)-2px))] overflow-auto scroll-pt-2 scroll-pb-[0.35rem] overscroll-contain empty:p-0">
                   {(group: EmojiGroup) => (
                     <Autocomplete.Group
                       key={group.value}
                       items={group.items}
                       className="block pb-2"
                     >
-                      <Autocomplete.GroupLabel className="sticky top-0 z-[1] bg-white p-2 mr-2 text-xs font-bold text-neutral-500 uppercase tracking-wider dark:bg-neutral-950 dark:text-neutral-400">
+                      <Autocomplete.GroupLabel className="p-2 text-xs font-bold text-neutral-500 uppercase tracking-wider dark:text-neutral-400">
                         {group.label}
                       </Autocomplete.GroupLabel>
                       <div className="px-2 pb-1 pt-0" role="presentation">
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
index a970bd49139..4d60b16bf01 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
@@ -52,12 +52,11 @@
 .List {
   box-sizing: border-box;
   overflow-y: auto;
-  scroll-padding-top: 2.25rem;
+  scroll-padding-top: 0.5rem;
   scroll-padding-bottom: 0.5rem;
   overscroll-behavior: contain;
   max-height: min(22.5rem, var(--available-height));
   outline: 0;
-  isolation: isolate; /* Prevent overlap with iOS overlay scrollbars. */
 
   &[data-empty] {
     padding: 0;
@@ -71,9 +70,6 @@
 
 .GroupLabel {
   box-sizing: border-box;
-  position: sticky;
-  z-index: 1;
-  top: 0;
   padding: 0.5rem 0.5rem 0.25rem;
   font-size: 0.75rem;
   font-weight: 700;
@@ -81,7 +77,6 @@
   color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  background-color: light-dark(white, var(--color-neutral-950));
 }
 
 .Item {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
index 87f611076da..441647d259c 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
@@ -20,10 +20,10 @@ export default function ExampleGroupAutocomplete() {
                 No tags found.
               </div>
             </Autocomplete.Empty>
-            <Autocomplete.List className="outline-0 overflow-y-auto scroll-pt-[2.25rem] scroll-pb-[0.5rem] overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-empty:p-0">
+            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-2 overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-empty:p-0">
               {(group: TagGroup) => (
                 <Autocomplete.Group key={group.value} items={group.items} className="block pb-2">
-                  <Autocomplete.GroupLabel className="sticky top-0 z-[1] bg-white pt-2 px-2 pb-1 text-xs font-bold text-neutral-500 uppercase tracking-wider dark:bg-neutral-950 dark:text-neutral-400">
+                  <Autocomplete.GroupLabel className="pt-2 px-2 pb-1 text-xs font-bold text-neutral-500 uppercase tracking-wider dark:text-neutral-400">
                     {group.value}
                   </Autocomplete.GroupLabel>
                   <Autocomplete.Collection>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
index 3e33af4b93f..d752254395a 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
@@ -120,11 +120,10 @@
   box-sizing: border-box;
   overflow: auto;
   overscroll-behavior: contain;
-  scroll-padding-top: 2.25rem;
+  scroll-padding-top: 0.5rem;
   scroll-padding-bottom: 0.5rem;
   max-height: min(23rem, var(--available-height));
   outline: 0;
-  isolation: isolate; /* Prevent overlap with iOS overlay scrollbars. */
 }
 
 .Group {
@@ -134,9 +133,6 @@
 
 .GroupLabel {
   box-sizing: border-box;
-  position: sticky;
-  z-index: 1;
-  top: 0;
   padding: 0.5rem 0.5rem 0.25rem 1.75rem;
   font-size: 0.75rem;
   font-weight: 700;
@@ -144,7 +140,6 @@
   color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  background-color: light-dark(white, var(--color-neutral-950));
 }
 
 .Item {
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index 200c01bab81..90e35d42e0c 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -39,10 +39,10 @@ export default function ExampleGroupedCombobox() {
                 No produce found.
               </div>
             </Combobox.Empty>
-            <Combobox.List className="max-h-[min(23rem,var(--available-height))] overflow-auto overscroll-contain scroll-pt-[2.25rem] scroll-pb-2 outline-0">
+            <Combobox.List className="max-h-[min(23rem,var(--available-height))] overflow-auto overscroll-contain scroll-py-2 outline-0">
               {(group: ProduceGroup) => (
                 <Combobox.Group key={group.value} items={group.items} className="block pb-2">
-                  <Combobox.GroupLabel className="sticky top-0 z-[1] mr-2 bg-white py-2 pr-2 pb-1 pl-7 text-xs leading-4 font-bold tracking-wider text-neutral-500 uppercase dark:bg-neutral-950 dark:text-neutral-400">
+                  <Combobox.GroupLabel className="py-2 pr-2 pb-1 pl-7 text-xs leading-4 font-bold tracking-wider text-neutral-500 uppercase dark:text-neutral-400">
                     {group.value}
                   </Combobox.GroupLabel>
                   <Combobox.Collection>
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index f0d9ff7c419..bd9fe909137 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -117,9 +117,8 @@
   padding-block: 0.25rem;
   overflow-y: auto;
   max-height: var(--available-height);
-  scroll-padding-block-start: 2.25rem;
+  scroll-padding-block-start: 1.5rem;
   scroll-padding-block-end: 1.5rem;
-  isolation: isolate; /* Prevent overlap with iOS overlay scrollbars. */
 }
 
 .Group {
@@ -129,9 +128,6 @@
 
 .GroupLabel {
   box-sizing: border-box;
-  position: sticky;
-  z-index: 1;
-  top: 0;
   padding: 0.5rem 0.5rem 0.25rem calc(0.625rem + 0.75rem + 0.5rem);
   font-size: 0.75rem;
   font-weight: 700;
@@ -139,7 +135,6 @@
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-  background-color: light-dark(white, var(--color-neutral-950));
 }
 
 .Item {
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index d82b91d7ec9..6496d339e90 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -28,11 +28,11 @@ export default function ExampleSelectGrouped() {
               <Select.ScrollUpArrow className="top-0 z-[2] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
                 ⏶
               </Select.ScrollUpArrow>
-              <Select.List className="relative py-1 scroll-pt-[2.25rem] scroll-pb-6 overflow-y-auto max-h-[var(--available-height)]">
+              <Select.List className="relative py-1 scroll-pt-6 scroll-pb-6 overflow-y-auto max-h-[var(--available-height)]">
                 {groupedProduce.map((group, index) => (
                   <React.Fragment key={group.value}>
                     <Select.Group className="block pb-0.5">
-                      <Select.GroupLabel className="sticky top-0 z-[1] bg-white mr-2 pr-2 pb-1 pl-[1.875rem] pt-2 text-xs font-bold text-neutral-500 uppercase tracking-wider dark:bg-neutral-950 dark:text-neutral-400">
+                      <Select.GroupLabel className="pr-2 pb-1 pl-[1.875rem] pt-2 text-xs font-bold text-neutral-500 uppercase tracking-wider dark:text-neutral-400">
                         {group.value}
                       </Select.GroupLabel>
                       {group.items.map((item) => (

From 0b9140093addadea2c89e02105d9561c3c7d6429 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 8 May 2026 13:13:54 +0200
Subject: [PATCH 144/257] Buttons: add gap

---
 .../alert-dialog/demos/_index.module.css         |  1 +
 .../tailwind/index.tsx                           |  2 +-
 .../detached-triggers-simple/tailwind/index.tsx  |  2 +-
 .../demos/hero/css-modules/index.module.css      |  1 +
 .../alert-dialog/demos/hero/tailwind/index.tsx   |  2 +-
 .../command-palette/css-modules/index.module.css |  1 +
 .../demos/hero/css-modules/index.module.css      |  1 +
 .../button/demos/hero/tailwind/index.tsx         |  2 +-
 .../demos/loading/css-modules/index.module.css   |  1 +
 .../button/demos/loading/tailwind/index.tsx      |  2 +-
 .../demos/creatable/css-modules/index.module.css |  1 +
 .../combobox/demos/creatable/tailwind/index.tsx  |  4 ++--
 .../components/dialog/demos/_index.module.css    |  1 +
 .../css-modules/index.module.css                 |  1 +
 .../demos/close-confirmation/tailwind/index.tsx  | 10 +++++-----
 .../tailwind/index.tsx                           | 10 +++++-----
 .../detached-triggers-simple/tailwind/index.tsx  |  4 ++--
 .../demos/hero/css-modules/index.module.css      |  1 +
 .../dialog/demos/hero/tailwind/index.tsx         |  4 ++--
 .../inside-scroll/css-modules/index.module.css   |  1 +
 .../demos/inside-scroll/tailwind/index.tsx       |  4 ++--
 .../demos/nested/css-modules/index.module.css    |  2 ++
 .../dialog/demos/nested/tailwind/index.tsx       |  6 +++---
 .../outside-scroll/css-modules/index.module.css  |  1 +
 .../demos/outside-scroll/tailwind/index.tsx      |  2 +-
 .../uncontained/css-modules/index.module.css     |  1 +
 .../dialog/demos/uncontained/tailwind/index.tsx  |  2 +-
 .../demos/hero/css-modules/index.module.css      |  1 +
 .../drawer/demos/hero/tailwind/index.tsx         |  4 ++--
 .../indent-provider/css-modules/index.module.css |  1 +
 .../demos/indent-provider/tailwind/index.tsx     |  4 ++--
 .../mobile-nav/css-modules/index.module.css      |  1 +
 .../drawer/demos/mobile-nav/tailwind/index.tsx   |  2 +-
 .../demos/nested/css-modules/index.module.css    |  3 ++-
 .../drawer/demos/nested/tailwind/index.tsx       | 16 ++++++++--------
 .../demos/non-modal/css-modules/index.module.css |  1 +
 .../drawer/demos/non-modal/tailwind/index.tsx    |  4 ++--
 .../demos/position/css-modules/index.module.css  |  1 +
 .../drawer/demos/position/tailwind/index.tsx     |  4 ++--
 .../snap-points/css-modules/index.module.css     |  1 +
 .../drawer/demos/snap-points/tailwind/index.tsx  |  4 ++--
 .../swipe-area/css-modules/index.module.css      |  1 +
 .../drawer/demos/swipe-area/tailwind/index.tsx   |  2 +-
 .../uncontained/css-modules/index.module.css     |  1 +
 .../drawer/demos/uncontained/tailwind/index.tsx  |  2 +-
 .../form-action/css-modules/index.module.css     |  1 +
 .../form/demos/form-action/tailwind/index.tsx    |  2 +-
 .../form/demos/hero/css-modules/index.module.css |  1 +
 .../form/demos/hero/tailwind/index.tsx           |  2 +-
 .../form/demos/zod/css-modules/index.module.css  |  1 +
 .../components/form/demos/zod/tailwind/index.tsx |  2 +-
 .../tailwind/index.tsx                           |  2 +-
 .../components/popover/demos/_index.module.css   |  1 +
 .../tailwind/index.tsx                           |  2 +-
 .../tailwind/index.tsx                           |  2 +-
 .../preview-card/demos/index.module.css          |  4 +++-
 .../demos/anchored/css-modules/index.module.css  |  2 ++
 .../toast/demos/anchored/tailwind/index.tsx      |  4 ++--
 .../demos/custom/css-modules/index.module.css    |  2 ++
 .../deduplicate/css-modules/index.module.css     |  2 ++
 .../demos/hero/css-modules/index.module.css      |  2 ++
 .../toast/demos/hero/tailwind/index.tsx          |  4 ++--
 .../demos/position/css-modules/index.module.css  |  2 ++
 .../toast/demos/position/tailwind/index.tsx      |  4 ++--
 .../demos/promise/css-modules/index.module.css   |  2 ++
 .../demos/undo/css-modules/index.module.css      |  2 ++
 .../varying-heights/css-modules/index.module.css |  2 ++
 .../demos/hero/css-modules/index.module.css      |  4 +++-
 .../toolbar/demos/hero/tailwind/index.tsx        | 10 +++++-----
 .../tailwind/index.tsx                           |  2 +-
 .../components/tooltip/demos/index.module.css    |  1 +
 .../handbook/forms/demos/components/button.tsx   |  2 +-
 .../app/(docs)/react/handbook/styling/page.mdx   |  2 +-
 73 files changed, 120 insertions(+), 72 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
index db6e0e0ef88..3f03a5fb7f0 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
@@ -3,6 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 866d1a90c69..86ba74bcdc5 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -7,7 +7,7 @@ type AlertPayload = { message: string };
 const demoAlertDialog = AlertDialog.createHandle<AlertPayload>();
 
 const buttonClasses =
-  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
+  'flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
index ab5bd9591eb..b851bda5b43 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { AlertDialog } from '@base-ui/react/alert-dialog';
 const demoAlertDialog = AlertDialog.createHandle();
 
 const buttonClasses =
-  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
+  'flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
index 5b28bdfa222..94000452720 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
@@ -3,6 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
index ec4a3543f59..be78838287e 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
@@ -1,7 +1,7 @@
 import { AlertDialog } from '@base-ui/react/alert-dialog';
 
 const buttonClasses =
-  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
+  'flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
index ce0ce237c72..65f26e6ba9e 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
@@ -3,6 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
index 575f1b83875..4427ee821dc 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
@@ -3,6 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
index 7368cbaa66a..3df780c30fc 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Button } from '@base-ui/react/button';
 
 export default function ExampleButton() {
   return (
-    <Button className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
+    <Button className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
       Submit
     </Button>
   );
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
index 575f1b83875..4427ee821dc 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
@@ -3,6 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
index 3b75cb9b972..f8bf7a60ef0 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleButton() {
 
   return (
     <Button
-      className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
+      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
       disabled={loading}
       focusableWhenDisabled
       onClick={() => {
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
index 6b27bcd8be6..e08802a3349 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
@@ -350,6 +350,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
index 4aa4216e253..0dc304ab57a 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
@@ -221,12 +221,12 @@ export default function ExampleCreatableCombobox() {
                 defaultValue={pendingQueryRef.current}
               />
               <div className="mt-4 flex justify-end gap-3">
-                <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700">
+                <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700">
                   Cancel
                 </Dialog.Close>
                 <button
                   type="submit"
-                  className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700"
+                  className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700"
                 >
                   Create
                 </button>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
index 02f66ec90ed..69b0b93258a 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
@@ -3,6 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
index 1114e0b670d..17e7b92b8be 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
@@ -3,6 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
index 8675b3dc21d..71341153441 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleDialog() {
         }
       }}
     >
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Tweet
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -50,12 +50,12 @@ export default function ExampleDialog() {
               onChange={(event) => setTextareaValue(event.target.value)}
             />
             <div className="flex justify-end gap-3">
-              <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Cancel
               </Dialog.Close>
               <button
                 type="submit"
-                className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+                className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
               >
                 Tweet
               </button>
@@ -73,12 +73,12 @@ export default function ExampleDialog() {
               Your tweet will be lost.
             </AlertDialog.Description>
             <div className="flex justify-end gap-3">
-              <AlertDialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <AlertDialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Go back
               </AlertDialog.Close>
               <button
                 type="button"
-                className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+                className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
                 onClick={() => {
                   setConfirmationOpen(false);
                   setDialogOpen(false);
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 386cc7c1df3..7a43fad9266 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -17,7 +17,7 @@ export default function DialogDetachedTriggersControlledDemo() {
     <React.Fragment>
       <div className="flex flex-wrap gap-2 justify-center">
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoDialog}
           id="trigger-1"
           payload={1}
@@ -26,7 +26,7 @@ export default function DialogDetachedTriggersControlledDemo() {
         </Dialog.Trigger>
 
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoDialog}
           id="trigger-2"
           payload={2}
@@ -35,7 +35,7 @@ export default function DialogDetachedTriggersControlledDemo() {
         </Dialog.Trigger>
 
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           handle={demoDialog}
           id="trigger-3"
           payload={3}
@@ -45,7 +45,7 @@ export default function DialogDetachedTriggersControlledDemo() {
 
         <button
           type="button"
-          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
@@ -70,7 +70,7 @@ export default function DialogDetachedTriggersControlledDemo() {
               )}
 
               <div className="flex justify-end gap-3 mt-4">
-                <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                   Close
                 </Dialog.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
index a55fe0e0a17..eb3fc2666d8 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function DialogDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
       <Dialog.Trigger
-        className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         handle={demoDialog}
       >
         View notifications
@@ -23,7 +23,7 @@ export default function DialogDetachedTriggersSimpleDemo() {
               You are all caught up. Good job!
             </Dialog.Description>
             <div className="flex justify-end gap-3 mt-4">
-              <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Close
               </Dialog.Close>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
index 504798286c3..db8a7969ef7 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
@@ -3,6 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
index dc26026dc9d..52a4949346c 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -14,7 +14,7 @@ export default function ExampleDialog() {
             You are all caught up. Good job!
           </Dialog.Description>
           <div className="flex justify-end gap-3 mt-4">
-            <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+            <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
               Close
             </Dialog.Close>
           </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
index 0e302314ae2..deeb04c22a6 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
@@ -3,6 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
index c6830e26801..3299a4ebafb 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function InsideScrollDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -36,7 +36,7 @@ export default function InsideScrollDialog() {
               </ScrollArea.Scrollbar>
             </ScrollArea.Root>
             <div className="flex justify-end gap-3 p-4">
-              <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Close
               </Dialog.Close>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
index 58f0ef94a78..521b5f1c54b 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
@@ -3,6 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
@@ -42,6 +43,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
index 0ae70d23f24..3929cb4ec93 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -15,7 +15,7 @@ export default function ExampleDialog() {
           </Dialog.Description>
           <div className="flex items-center gap-3 mt-4">
             <Dialog.Root>
-              <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Customize
               </Dialog.Trigger>
               <Dialog.Portal>
@@ -25,7 +25,7 @@ export default function ExampleDialog() {
                     Review your settings here.
                   </Dialog.Description>
                   <div className="flex items-center justify-end gap-3 mt-4">
-                    <Dialog.Close className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                    <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                       Close
                     </Dialog.Close>
                   </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
index 4bb8f5ba897..ee32ea207f3 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
@@ -3,6 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index fd85f546453..a41678aa560 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function OutsideScrollDialog() {
   const popupRef = React.useRef<HTMLDivElement>(null);
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
index 47289a7b524..77c3cee8dd0 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
@@ -3,6 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
index 4c09ba71e3d..25d7466d19c 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleUncontainedDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
index c5b2383a339..a45398fba6c 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
@@ -3,6 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
index 5ddad72637c..d1ceebba0f3 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawer() {
   return (
     <Drawer.Root swipeDirection="right">
-      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open drawer
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -16,7 +16,7 @@ export default function ExampleDrawer() {
                 This is a drawer that slides in from the side. You can swipe to dismiss it.
               </Drawer.Description>
               <div className="flex justify-end gap-3">
-                <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
index 79220b7c8c6..1635867fb5d 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
@@ -53,6 +53,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
index 8c001b6ed20..38732b090cd 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleDrawer() {
         <Drawer.Indent className="[--indent-radius:calc(1rem*(1-var(--drawer-swipe-progress)))] [--indent-transition:calc(1-clamp(0,calc(var(--drawer-swipe-progress)*100000),1))] relative min-h-80 border border-neutral-950 bg-white p-4 text-neutral-950 [transition:transform_0.4s_cubic-bezier(0.32,0.72,0,1),border-radius_0.25s_cubic-bezier(0.32,0.72,0,1)] origin-[center_top] will-change-transform [transform:scale(1)_translateY(0)] [transition-duration:calc(400ms*var(--indent-transition)),calc(250ms*var(--indent-transition))] data-active:transform-[scale(calc(0.98+(0.02*var(--drawer-swipe-progress))))_translateY(calc(0.5rem*(1-var(--drawer-swipe-progress))))] data-active:rounded-tl-(--indent-radius) data-active:rounded-tr-(--indent-radius) dark:border-white dark:bg-neutral-950 dark:text-white">
           <div className="flex min-h-80 items-center justify-center">
             <Drawer.Root modal={false}>
-              <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Open drawer
               </Drawer.Trigger>
               <Drawer.Portal container={portalContainer}>
@@ -28,7 +28,7 @@ export default function ExampleDrawer() {
                         You are all caught up. Good job!
                       </Drawer.Description>
                       <div className="flex justify-center gap-3">
-                        <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                        <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                           Close
                         </Drawer.Close>
                       </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
index 573417e1036..110116bf22e 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
@@ -3,6 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
index 9daee0f2886..e8766b8c097 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
@@ -53,7 +53,7 @@ const LONG_LIST = [
 export default function ExampleDrawerMobileNav() {
   return (
     <Drawer.Root>
-      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open mobile menu
       </Drawer.Trigger>
       <Drawer.Portal>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
index 8b3316c3d1b..0269fecd40d 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
@@ -3,6 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
@@ -230,7 +231,7 @@
 
 .Field {
   display: grid;
-  gap: 0.375rem;
+  gap: 0.5rem;
   margin-bottom: 1rem;
 }
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
index 20d49144c18..83ce8b464d1 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawerNested() {
   return (
     <Drawer.Root>
-      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open drawer stack
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -22,7 +22,7 @@ export default function ExampleDrawerNested() {
               <div className="flex items-center justify-end gap-4">
                 <div className="mr-auto">
                   <Drawer.Root>
-                    <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                    <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                       Security settings
                     </Drawer.Trigger>
                     <Drawer.Portal>
@@ -46,7 +46,7 @@ export default function ExampleDrawerNested() {
                             <div className="flex items-center justify-end gap-4">
                               <div className="mr-auto">
                                 <Drawer.Root>
-                                  <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                                  <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                                     Advanced options
                                   </Drawer.Trigger>
                                   <Drawer.Portal>
@@ -62,7 +62,7 @@ export default function ExampleDrawerNested() {
                                             stacking.
                                           </Drawer.Description>
 
-                                          <div className="grid gap-1.5 mb-4">
+                                          <div className="grid gap-2 mb-4">
                                             <label
                                               className="text-sm font-bold text-neutral-700 dark:text-neutral-300"
                                               htmlFor="device-name-tw"
@@ -76,7 +76,7 @@ export default function ExampleDrawerNested() {
                                             />
                                           </div>
 
-                                          <div className="grid gap-1.5 mb-4">
+                                          <div className="grid gap-2 mb-4">
                                             <label
                                               className="text-sm font-bold text-neutral-700 dark:text-neutral-300"
                                               htmlFor="notes-tw"
@@ -92,7 +92,7 @@ export default function ExampleDrawerNested() {
                                           </div>
 
                                           <div className="flex justify-end">
-                                            <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                                            <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                                               Done
                                             </Drawer.Close>
                                           </div>
@@ -103,7 +103,7 @@ export default function ExampleDrawerNested() {
                                 </Drawer.Root>
                               </div>
 
-                              <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                              <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                                 Close
                               </Drawer.Close>
                             </div>
@@ -114,7 +114,7 @@ export default function ExampleDrawerNested() {
                   </Drawer.Root>
                 </div>
 
-                <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
index a4923390d1b..901df048e99 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
@@ -3,6 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
index 458c189ba4c..6c9f815e755 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawer() {
   return (
     <Drawer.Root swipeDirection="right" modal={false} disablePointerDismissal>
-      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open non-modal drawer
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -16,7 +16,7 @@ export default function ExampleDrawer() {
                 swipe to dismiss it.
               </Drawer.Description>
               <div className="flex justify-end gap-3">
-                <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
index 90e6c9abb88..b4c80b36dba 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
@@ -3,6 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
index 187360e4f82..cf3998873cc 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawer() {
   return (
     <Drawer.Root>
-      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open bottom drawer
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -19,7 +19,7 @@ export default function ExampleDrawer() {
                 You are all caught up. Good job!
               </Drawer.Description>
               <div className="flex justify-center gap-3">
-                <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
index 0544fdcfc51..516e921fcc0 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
@@ -3,6 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
index c4b205ac63c..2cf0d491ea3 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
@@ -14,7 +14,7 @@ const snapPoints = [...VISIBLE_SNAP_POINTS_REM.map(toViewportSnapPoint), 1];
 export default function ExampleDrawerSnapPoints() {
   return (
     <Drawer.Root snapPoints={snapPoints}>
-      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open snap drawer
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -41,7 +41,7 @@ export default function ExampleDrawerSnapPoints() {
                   ))}
                 </div>
                 <div className="flex items-center justify-end gap-3">
-                  <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                  <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                     Close
                   </Drawer.Close>
                 </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
index d7ebdbe16b3..75b59ad86d5 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
@@ -67,6 +67,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
index 67bc33ac71b..cbe83d99061 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
@@ -31,7 +31,7 @@ export default function ExampleDrawerSwipeArea() {
                   Swipe from the edge whenever you want to jump back into your playlists.
                 </Drawer.Description>
                 <div className="flex justify-end gap-3">
-                  <Drawer.Close className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                  <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                     Close
                   </Drawer.Close>
                 </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
index 197da5370dd..135ab0119ba 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
@@ -3,6 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
index 934167250d9..1f452bf20a2 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleDrawerUncontained() {
 
   return (
     <Drawer.Root open={open} onOpenChange={setOpen}>
-      <Drawer.Trigger className="flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
         Open action sheet
       </Drawer.Trigger>
       <Drawer.Portal>
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
index 2a28d2ea3da..4d4c2e16a05 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
@@ -54,6 +54,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
index 8e76517a137..d1a2d846179 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
@@ -34,7 +34,7 @@ export default function ActionStateForm() {
         type="submit"
         disabled={loading}
         focusableWhenDisabled
-        className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
index 2a28d2ea3da..4d4c2e16a05 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
@@ -54,6 +54,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
index e3ca4bf224d..f3c03be15d5 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
@@ -45,7 +45,7 @@ export default function ExampleForm() {
         disabled={loading}
         focusableWhenDisabled
         type="submit"
-        className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
index 2a28d2ea3da..4d4c2e16a05 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
@@ -54,6 +54,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
index 527413a7f66..e8a89c592d3 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
@@ -58,7 +58,7 @@ export default function Page() {
       </Field.Root>
       <Button
         type="submit"
-        className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
index 5876ae2e998..3fb52685803 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { Menu } from '@base-ui/react/menu';
 const itemClass =
   "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
 const triggerClass =
-  'flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-neutral-100 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
+  'flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-neutral-100 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 const popupClass =
   'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
 
diff --git a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
index 1b4638e9087..359436654a4 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
@@ -149,6 +149,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
index e77d4c898d5..a8c720f8a04 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -43,7 +43,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
 
         <button
           type="button"
-          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
index 6febfe23e42..12b133511f6 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -99,7 +99,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
         </p>
         <button
           type="button"
-          className="flex h-10 items-center justify-center border border-neutral-950 bg-white px-3.5 font-[inherit] text-base font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-10 items-center justify-center gap-2 border border-neutral-950 bg-white px-3.5 font-[inherit] text-base leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
index 0954693460c..b0da67cf07b 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
@@ -149,6 +149,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2.5rem;
   padding: 0 0.875rem;
   margin: 0;
@@ -157,7 +158,8 @@
   font-family: inherit;
   font-size: 1rem;
   font-weight: 400;
-  line-height: 1.5rem;
+  line-height: 1;
+  white-space: nowrap;
   color: light-dark(var(--color-neutral-950), white);
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
index b62f3d4d0f9..e04beff0141 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
@@ -181,6 +181,7 @@
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
@@ -297,6 +298,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index 96c43d33465..6e1ecb4cd7c 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -35,7 +35,7 @@ function StackedToastButton() {
   return (
     <button
       type="button"
-      className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       onClick={createToast}
     >
       Stacked toast
@@ -130,7 +130,7 @@ function StackedToasts() {
                 <Toast.Title className="text-sm font-bold" />
                 <Toast.Description className="text-sm" />
               </div>
-              <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Toast.Close className="flex h-8 shrink-0 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Dismiss
               </Toast.Close>
             </Toast.Content>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
index 76ea9790dc2..2d4a2a6ae1d 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
@@ -140,6 +140,7 @@
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
@@ -178,6 +179,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
index ca0d1432a0d..18ebd2d83dd 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
@@ -152,6 +152,7 @@
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
@@ -190,6 +191,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
index 76ea9790dc2..2d4a2a6ae1d 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
@@ -140,6 +140,7 @@
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
@@ -178,6 +179,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
index c9b9eb0ffd6..4fa2c9046ca 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
@@ -30,7 +30,7 @@ function ToastButton() {
   return (
     <button
       type="button"
-      className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       onClick={createToast}
     >
       Create toast
@@ -51,7 +51,7 @@ function ToastList() {
           <Toast.Title className="text-sm font-bold" />
           <Toast.Description className="text-sm" />
         </div>
-        <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Toast.Close className="flex h-8 shrink-0 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           Dismiss
         </Toast.Close>
       </Toast.Content>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
index 8d6f2a892d5..ee2ad528976 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
@@ -135,6 +135,7 @@
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
@@ -173,6 +174,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
index f3cfb163496..5a209fbab40 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
@@ -30,7 +30,7 @@ function ToastButton() {
   return (
     <button
       type="button"
-      className="flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
       onClick={createToast}
     >
       Create toast
@@ -52,7 +52,7 @@ function ToastList() {
           <Toast.Title className="text-sm font-bold" />
           <Toast.Description className="text-sm" />
         </div>
-        <Toast.Close className="flex h-8 shrink-0 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Toast.Close className="flex h-8 shrink-0 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
           Dismiss
         </Toast.Close>
       </Toast.Content>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
index 2c363b1ba27..62f2efa76ee 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
@@ -148,6 +148,7 @@
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
@@ -186,6 +187,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
index 9406265ce49..1be2880db5d 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
@@ -143,6 +143,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
@@ -181,6 +182,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
index 483a25eaaf3..4b9653e1d29 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
@@ -140,6 +140,7 @@
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
@@ -178,6 +179,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
index 7b16c90e282..0f3b7ca95e3 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
@@ -18,6 +18,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   min-width: 2rem;
   height: 2rem;
   padding: 0;
@@ -29,7 +30,8 @@
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
index 8f2efc48cb8..2c2180c789d 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleToolbar() {
           render={<Toggle />}
           aria-label="Align left"
           value="align-left"
-          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent px-3 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         >
           Align Left
         </Toolbar.Button>
@@ -20,7 +20,7 @@ export default function ExampleToolbar() {
           render={<Toggle />}
           aria-label="Align right"
           value="align-right"
-          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent px-3 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         >
           Align Right
         </Toolbar.Button>
@@ -28,13 +28,13 @@ export default function ExampleToolbar() {
       <Toolbar.Separator className="m-1 h-4 w-px bg-neutral-950 dark:bg-white" />
       <Toolbar.Group className="flex" aria-label="Numerical format">
         <Toolbar.Button
-          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           aria-label="Format as currency"
         >
           $
         </Toolbar.Button>
         <Toolbar.Button
-          className="flex h-8 min-w-8 items-center justify-center border-0 bg-transparent font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           aria-label="Format as percent"
         >
           %
@@ -44,7 +44,7 @@ export default function ExampleToolbar() {
       <Select.Root defaultValue="Helvetica">
         <Toolbar.Button
           render={<Select.Trigger />}
-          className="flex h-8 min-w-32 cursor-default items-center justify-between border-0 bg-transparent px-2 font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-32 cursor-default items-center justify-between gap-2 border-0 bg-transparent px-2 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
         >
           <Select.Value />
           <Select.Icon className="flex">
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
index 048d6f79e8f..fe723799e66 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -9,7 +9,7 @@ const iconButtonClass =
   'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const buttonClass =
-  'flex h-8 items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
+  'flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
   'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
index 5a6d2ee7a9f..967f717ceef 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
@@ -140,6 +140,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx
index 11ff17cfc6c..a0690a40afa 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx
@@ -7,7 +7,7 @@ export function Button({ className, ...props }: React.ComponentPropsWithoutRef<'
     <BaseButton
       type="button"
       className={clsx(
-        'flex h-8 items-center justify-center rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:disabled:border-neutral-400 dark:disabled:text-neutral-400',
+        'flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:disabled:border-neutral-400 dark:disabled:text-neutral-400',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/styling/page.mdx b/docs/src/app/(docs)/react/handbook/styling/page.mdx
index b7c832841c9..45f0d4dad57 100644
--- a/docs/src/app/(docs)/react/handbook/styling/page.mdx
+++ b/docs/src/app/(docs)/react/handbook/styling/page.mdx
@@ -71,7 +71,7 @@ import { Menu } from '@base-ui/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-neutral-200 bg-neutral-50 px-3.5 text-base font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100 data-popup-open:bg-neutral-100">
+      <Menu.Trigger className="flex h-10 items-center justify-center gap-2 rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base leading-none whitespace-nowrap font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100 data-popup-open:bg-neutral-100">
         Song
       </Menu.Trigger>
       <Menu.Portal>

From 7e28a21279e3ceab85e051f2392772c3ed0f5a66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 8 May 2026 13:15:48 +0200
Subject: [PATCH 145/257] PreviewCard: fix button size

---
 .../demos/detached-triggers-controlled/tailwind/index.tsx   | 2 +-
 .../react/components/preview-card/demos/index.module.css    | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
index 12b133511f6..fa04d8c6dac 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -99,7 +99,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
         </p>
         <button
           type="button"
-          className="flex h-10 items-center justify-center gap-2 border border-neutral-950 bg-white px-3.5 font-[inherit] text-base leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
index b0da67cf07b..8a6df41067b 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
@@ -150,13 +150,13 @@
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-  height: 2.5rem;
-  padding: 0 0.875rem;
+  height: 2rem;
+  padding: 0 0.75rem;
   margin: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;

From 45d038b585fa1afc85ba3e86a20a61a9954e9f59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 8 May 2026 13:17:09 +0200
Subject: [PATCH 146/257] Combobox: fix focus outline on TW demo

---
 .../combobox/demos/input-inside-popup/tailwind/index.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index 6a2033663a4..45e42569d02 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -28,7 +28,7 @@ export default function ExamplePopoverCombobox() {
               <div className="h-[var(--input-container-height)] w-80 bg-white text-center dark:bg-neutral-950">
                 <Combobox.Input
                   placeholder="e.g. United Kingdom"
-                  className="h-8 w-full min-w-72 border-0 bg-white px-2 dark:bg-neutral-950 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 dark:text-white"
+                  className="h-8 w-full min-w-72 border-0 bg-white px-2 dark:bg-neutral-950 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-blue-800 dark:text-white"
                 />
               </div>
               <Combobox.Empty>

From 4a1b4b9bf0cb19fbe2d17e1a0b4cc9fdf18e554f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 8 May 2026 16:29:00 +0200
Subject: [PATCH 147/257] Group labels: remove uppercase and bold text

---
 .../command-palette/css-modules/index.module.css     |  1 -
 .../demos/command-palette/tailwind/index.tsx         |  2 +-
 .../demos/grid/css-modules/index.module.css          | 10 ++--------
 .../autocomplete/demos/grid/tailwind/index.tsx       |  2 +-
 .../demos/grouped/css-modules/index.module.css       |  8 +++-----
 .../autocomplete/demos/grouped/tailwind/index.tsx    |  2 +-
 .../demos/grouped/css-modules/index.module.css       |  8 +++-----
 .../combobox/demos/grouped/tailwind/index.tsx        |  2 +-
 .../react/components/menu/demos/_index.module.css    |  8 ++++----
 .../demos/detached-triggers-full/tailwind/index.tsx  |  2 +-
 .../demos/group-labels/css-modules/index.module.css  |  6 +-----
 .../menu/demos/group-labels/tailwind/index.tsx       |  4 ++--
 .../demos/grouped/css-modules/index.module.css       | 12 ++++++------
 .../select/demos/grouped/tailwind/index.tsx          |  2 +-
 14 files changed, 27 insertions(+), 42 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
index 65f26e6ba9e..cfa6b3afc0a 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
@@ -158,7 +158,6 @@
 
 .GroupLabel {
   outline: 0;
-  cursor: default;
   user-select: none;
   display: flex;
   align-items: center;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
index ac88bd04d40..e9f45c508f1 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
@@ -52,7 +52,7 @@ export default function ExampleAutocompleteCommandPalette() {
                           items={group.items}
                           className="not-last:mb-1"
                         >
-                          <Autocomplete.GroupLabel className="m-0 flex min-h-8 cursor-default items-center pr-6 pl-4 text-sm leading-none font-normal text-neutral-500 select-none outline-none dark:text-neutral-400">
+                          <Autocomplete.GroupLabel className="m-0 flex min-h-8 items-center pr-6 pl-4 text-sm leading-none font-normal text-neutral-500 select-none outline-none dark:text-neutral-400">
                             {group.value}
                           </Autocomplete.GroupLabel>
                           <Autocomplete.Collection>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
index 4a51e066334..3e687f580f0 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
@@ -175,19 +175,13 @@
   }
 }
 
-.ListContainer {
-  padding: 0.5rem;
-}
-
 .GroupLabel {
   box-sizing: border-box;
   padding: 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-size: 0.875rem;
   line-height: 1rem;
   color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  user-select: none;
 }
 
 .Group {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
index a2f15c67820..afa58b26eb4 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
@@ -84,7 +84,7 @@ export default function ExampleEmojiPicker() {
                       items={group.items}
                       className="block pb-2"
                     >
-                      <Autocomplete.GroupLabel className="p-2 text-xs font-bold text-neutral-500 uppercase tracking-wider dark:text-neutral-400">
+                      <Autocomplete.GroupLabel className="p-2 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
                         {group.label}
                       </Autocomplete.GroupLabel>
                       <div className="px-2 pb-1 pt-0" role="presentation">
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
index 4d60b16bf01..6e41e4ebf6c 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
@@ -70,13 +70,11 @@
 
 .GroupLabel {
   box-sizing: border-box;
-  padding: 0.5rem 0.5rem 0.25rem;
-  font-size: 0.75rem;
-  font-weight: 700;
+  user-select: none;
+  padding: 0.5rem;
+  font-size: 0.875rem;
   line-height: 1rem;
   color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
 }
 
 .Item {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
index 441647d259c..f43fffe8829 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
@@ -23,7 +23,7 @@ export default function ExampleGroupAutocomplete() {
             <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-2 overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-empty:p-0">
               {(group: TagGroup) => (
                 <Autocomplete.Group key={group.value} items={group.items} className="block pb-2">
-                  <Autocomplete.GroupLabel className="pt-2 px-2 pb-1 text-xs font-bold text-neutral-500 uppercase tracking-wider dark:text-neutral-400">
+                  <Autocomplete.GroupLabel className="p-2 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
                     {group.value}
                   </Autocomplete.GroupLabel>
                   <Autocomplete.Collection>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
index d752254395a..840806e789d 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
@@ -133,13 +133,11 @@
 
 .GroupLabel {
   box-sizing: border-box;
-  padding: 0.5rem 0.5rem 0.25rem 1.75rem;
-  font-size: 0.75rem;
-  font-weight: 700;
+  user-select: none;
+  padding: 0.5rem 0.5rem 0.5rem 1.75rem;
+  font-size: 0.875rem;
   line-height: 1rem;
   color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
 }
 
 .Item {
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index 90e35d42e0c..4134e1aed06 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -42,7 +42,7 @@ export default function ExampleGroupedCombobox() {
             <Combobox.List className="max-h-[min(23rem,var(--available-height))] overflow-auto overscroll-contain scroll-py-2 outline-0">
               {(group: ProduceGroup) => (
                 <Combobox.Group key={group.value} items={group.items} className="block pb-2">
-                  <Combobox.GroupLabel className="py-2 pr-2 pb-1 pl-7 text-xs leading-4 font-bold tracking-wider text-neutral-500 uppercase dark:text-neutral-400">
+                  <Combobox.GroupLabel className="py-2 pr-2 pl-7 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
                     {group.value}
                   </Combobox.GroupLabel>
                   <Combobox.Collection>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
index 77881cdaf5b..af04d73d228 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
@@ -160,11 +160,11 @@
 }
 
 .Label {
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  user-select: none;
   padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
 
 .Separator {
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
index 0e3a63bf718..7a5dcad566b 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
@@ -125,7 +125,7 @@ export default function MenuDetachedTriggersFullDemo() {
                       <React.Fragment key={groupIndex}>
                         <Menu.Group>
                           {groupIndex === 0 && (
-                            <Menu.GroupLabel className="px-4 py-2 text-xs tracking-[0.05em] text-neutral-600 uppercase dark:text-neutral-400">
+                            <Menu.GroupLabel className="px-4 py-2 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
                               {MENUS[payload].heading}
                             </Menu.GroupLabel>
                           )}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
index c9f6872dccf..89bd9a8ea8e 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
@@ -140,15 +140,11 @@
 }
 
 .GroupLabel {
-  cursor: default;
   user-select: none;
   padding-block: 0.5rem;
   padding-left: 1.875rem;
   padding-right: 2rem;
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-size: 0.875rem;
   line-height: 1rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
   color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index 0297c82614f..410ec500854 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -20,7 +20,7 @@ export default function ExampleMenu() {
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
           <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
             <Menu.Group>
-              <Menu.GroupLabel className="cursor-default py-2 pr-8 pl-7.5 text-xs font-bold tracking-wider text-neutral-500 uppercase select-none dark:text-neutral-400">
+              <Menu.GroupLabel className="py-2 pr-8 pl-7.5 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
                 Sort
               </Menu.GroupLabel>
               <Menu.RadioGroup value={value} onValueChange={setValue}>
@@ -48,7 +48,7 @@ export default function ExampleMenu() {
             <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
 
             <Menu.Group>
-              <Menu.GroupLabel className="cursor-default py-2 pr-8 pl-7.5 text-xs font-bold tracking-wider text-neutral-500 uppercase select-none dark:text-neutral-400">
+              <Menu.GroupLabel className="py-2 pr-8 pl-7.5 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
                 Workspace
               </Menu.GroupLabel>
               <Menu.CheckboxItem
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index bd9fe909137..97cb6afcec8 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -128,12 +128,12 @@
 
 .GroupLabel {
   box-sizing: border-box;
-  padding: 0.5rem 0.5rem 0.25rem calc(0.625rem + 0.75rem + 0.5rem);
-  font-size: 0.75rem;
-  font-weight: 700;
-  line-height: 1rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  padding-block: 0.375rem;
+  padding-left: calc(0.625rem + 0.75rem + 0.5rem);
+  padding-right: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  user-select: none;
   color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
 }
 
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index 6496d339e90..2082c3f2d60 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -32,7 +32,7 @@ export default function ExampleSelectGrouped() {
                 {groupedProduce.map((group, index) => (
                   <React.Fragment key={group.value}>
                     <Select.Group className="block pb-0.5">
-                      <Select.GroupLabel className="pr-2 pb-1 pl-[1.875rem] pt-2 text-xs font-bold text-neutral-500 uppercase tracking-wider dark:text-neutral-400">
+                      <Select.GroupLabel className="py-1.5 pr-4 pl-[1.875rem] text-sm leading-5 text-neutral-500 select-none dark:text-neutral-400">
                         {group.value}
                       </Select.GroupLabel>
                       {group.items.map((item) => (

From 13a798e4e2b2e81225a0b31966cb043e6bd6e20c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 8 May 2026 16:30:56 +0200
Subject: [PATCH 148/257] Menu: fix separator margin on arrow demo

---
 .../components/menu/demos/arrow/css-modules/index.module.css  | 2 +-
 .../react/components/menu/demos/arrow/tailwind/index.tsx      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
index 5ce9a0be330..0288e38184a 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
@@ -150,7 +150,7 @@
 }
 
 .Separator {
-  margin: 0.25rem 1rem;
+  margin: 0.25rem;
   height: 1px;
   background-color: light-dark(var(--color-neutral-950), white);
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
index 384b9caddbd..09e0c544281 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
@@ -20,10 +20,10 @@ export default function MenuArrowDemo() {
             <Menu.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:[transform:translate(-50%,50%)_rotate(45deg)] before:border before:border-neutral-950 before:bg-white before:content-[''] dark:before:border-white dark:before:bg-neutral-950" />
             <Menu.Item className={itemClass}>Add to Library</Menu.Item>
             <Menu.Item className={itemClass}>Add to Playlist</Menu.Item>
-            <Menu.Separator className="mx-4 my-1 h-px bg-neutral-950 dark:bg-white" />
+            <Menu.Separator className="m-1 h-px bg-neutral-950 dark:bg-white" />
             <Menu.Item className={itemClass}>Play Next</Menu.Item>
             <Menu.Item className={itemClass}>Play Last</Menu.Item>
-            <Menu.Separator className="mx-4 my-1 h-px bg-neutral-950 dark:bg-white" />
+            <Menu.Separator className="m-1 h-px bg-neutral-950 dark:bg-white" />
             <Menu.Item className={itemClass}>Favorite</Menu.Item>
             <Menu.Item className={itemClass}>Share</Menu.Item>
           </Menu.Popup>

From 633e72b8d0c6286d9645260e5d8917060fe69acf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 8 May 2026 16:53:33 +0200
Subject: [PATCH 149/257] Toast: add gap between title and desc

---
 .../toast/demos/anchored/css-modules/index.module.css     | 3 +++
 .../components/toast/demos/anchored/tailwind/index.tsx    | 2 +-
 .../toast/demos/custom/css-modules/index.module.css       | 3 +++
 .../toast/demos/deduplicate/css-modules/index.module.css  | 3 +++
 .../toast/demos/hero/css-modules/index.module.css         | 3 +++
 .../react/components/toast/demos/hero/tailwind/index.tsx  | 2 +-
 .../toast/demos/position/css-modules/index.module.css     | 3 +++
 .../components/toast/demos/position/tailwind/index.tsx    | 2 +-
 .../toast/demos/promise/css-modules/index.module.css      | 3 +++
 .../toast/demos/undo/css-modules/index.module.css         | 8 +++++++-
 .../components/toast/demos/undo/css-modules/index.tsx     | 2 +-
 .../demos/varying-heights/css-modules/index.module.css    | 3 +++
 12 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
index e04beff0141..b3a9e0da252 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
@@ -159,6 +159,9 @@
 }
 
 .Text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
   min-width: 0;
   flex: 1;
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index 6e1ecb4cd7c..9ace4a584b4 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -126,7 +126,7 @@ function StackedToasts() {
             className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-limited:opacity-0 data-starting-style:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-expanded:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
           >
             <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100">
-              <div className="min-w-0 flex-1">
+              <div className="flex min-w-0 flex-1 flex-col gap-1">
                 <Toast.Title className="text-sm font-bold" />
                 <Toast.Description className="text-sm" />
               </div>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
index 2d4a2a6ae1d..8ba4e7e4d9d 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
@@ -118,6 +118,9 @@
 }
 
 .Text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
   min-width: 0;
   flex: 1;
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
index 18ebd2d83dd..077e6e8c58b 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
@@ -130,6 +130,9 @@
 }
 
 .Text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
   min-width: 0;
   flex: 1;
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
index 2d4a2a6ae1d..8ba4e7e4d9d 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
@@ -118,6 +118,9 @@
 }
 
 .Text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
   min-width: 0;
   flex: 1;
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
index 4fa2c9046ca..ac874358a0e 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
@@ -47,7 +47,7 @@ function ToastList() {
       className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-limited:opacity-0 data-starting-style:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-expanded:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
     >
       <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100">
-        <div className="min-w-0 flex-1">
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
           <Toast.Title className="text-sm font-bold" />
           <Toast.Description className="text-sm" />
         </div>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
index ee2ad528976..bf258d72d1b 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
@@ -113,6 +113,9 @@
 }
 
 .Text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
   min-width: 0;
   flex: 1;
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
index 5a209fbab40..873dedda7a3 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
@@ -48,7 +48,7 @@ function ToastList() {
       className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)+(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))] absolute top-0 right-0 left-0 z-[calc(1000-var(--toast-index))] mx-auto w-full origin-top [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-limited:opacity-0 data-starting-style:[transform:translateY(-150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)] data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-expanded:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
     >
       <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100">
-        <div className="min-w-0 flex-1">
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
           <Toast.Title className="text-sm font-bold" />
           <Toast.Description className="text-sm" />
         </div>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
index 62f2efa76ee..e379474d682 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
@@ -126,6 +126,9 @@
 }
 
 .Text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
   min-width: 0;
   flex: 1;
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
index 1be2880db5d..b51fb906f44 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
@@ -123,7 +123,13 @@
   flex: 1;
   flex-direction: column;
   align-items: start;
-  gap: 0.5rem;
+  gap: 0.75rem;
+}
+
+.Message {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
 }
 
 .Title {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.tsx
index 6821a80559d..59e7224e615 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.tsx
@@ -49,7 +49,7 @@ function ToastList() {
     <Toast.Root key={toast.id} toast={toast} className={styles.Toast}>
       <Toast.Content className={styles.Content}>
         <div className={styles.Text}>
-          <div>
+          <div className={styles.Message}>
             <Toast.Title className={styles.Title} />
             <Toast.Description className={styles.Description} />
           </div>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
index 4b9653e1d29..992aa3d9c9c 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
@@ -118,6 +118,9 @@
 }
 
 .Text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
   min-width: 0;
   flex: 1;
 }

From 248ed49a250467d440a215ece53ab02b1c7b5d5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 8 May 2026 17:02:54 +0200
Subject: [PATCH 150/257] PreviewCard: use high contrast text color

---
 .../demos/detached-triggers-controlled/tailwind/index.tsx   | 6 +++---
 .../detached-triggers-full/css-modules/index.module.css     | 1 -
 .../demos/detached-triggers-full/tailwind/index.tsx         | 6 +++---
 .../demos/detached-triggers-simple/tailwind/index.tsx       | 2 +-
 .../components/preview-card/demos/hero/tailwind/index.tsx   | 2 +-
 .../react/components/preview-card/demos/index.module.css    | 1 -
 6 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
index fa04d8c6dac..0ae60bed7b2 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -14,7 +14,7 @@ const cardContents = {
         src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
         alt="Station Hofplein signage in Rotterdam, Netherlands"
       />
-      <p className="m-0 text-sm text-neutral-600 text-pretty dark:text-neutral-400">
+      <p className="m-0 text-sm text-pretty">
         <strong>Typography</strong> is the art and science of arranging type.
       </p>
     </div>
@@ -28,7 +28,7 @@ const cardContents = {
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Braun_ABW30_%28schwarz%29.jpg/250px-Braun_ABW30_%28schwarz%29.jpg"
         alt="Braun ABW30"
       />
-      <p className="m-0 text-sm text-neutral-600 text-pretty dark:text-neutral-400">
+      <p className="m-0 text-sm text-pretty">
         A <strong>design</strong> is the concept or proposal for an object, process, or system.
       </p>
     </div>
@@ -42,7 +42,7 @@ const cardContents = {
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/MonaLisa_sfumato.jpeg/250px-MonaLisa_sfumato.jpeg"
         alt="Mona Lisa"
       />
-      <p className="m-0 text-sm text-neutral-600 text-pretty dark:text-neutral-400">
+      <p className="m-0 text-sm text-pretty">
         <strong>Art</strong> is a diverse range of cultural activity centered around works utilizing
         creative or imaginative talents, which are expected to evoke a worthwhile experience,
         generally through an expression of emotional power, conceptual ideas, technical proficiency,
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
index e350c1b6173..a1bbea1c863 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
@@ -140,7 +140,6 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
   text-wrap: pretty;
 }
 
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
index 32aa3a22c77..9a8612aeb7e 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
@@ -14,7 +14,7 @@ const cardContents = {
         src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
         alt="Station Hofplein signage in Rotterdam, Netherlands"
       />
-      <p className="m-0 text-sm text-neutral-600 text-pretty dark:text-neutral-400">
+      <p className="m-0 text-sm text-pretty">
         <strong>Typography</strong> is the art and science of arranging type.
       </p>
     </div>
@@ -28,7 +28,7 @@ const cardContents = {
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Braun_ABW30_%28schwarz%29.jpg/250px-Braun_ABW30_%28schwarz%29.jpg"
         alt="Braun ABW30"
       />
-      <p className="m-0 text-sm text-neutral-600 text-pretty dark:text-neutral-400">
+      <p className="m-0 text-sm text-pretty">
         A <strong>design</strong> is the concept or proposal for an object, process, or system.
       </p>
     </div>
@@ -42,7 +42,7 @@ const cardContents = {
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/MonaLisa_sfumato.jpeg/250px-MonaLisa_sfumato.jpeg"
         alt="Mona Lisa"
       />
-      <p className="m-0 text-sm text-neutral-600 text-pretty dark:text-neutral-400">
+      <p className="m-0 text-sm text-pretty">
         <strong>Art</strong> is a diverse range of cultural activity centered around works utilizing
         creative or imaginative talents, which are expected to evoke a worthwhile experience,
         generally through an expression of emotional power, conceptual ideas, technical proficiency,
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
index b29da3b77cc..a69181959f5 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
@@ -31,7 +31,7 @@ export default function PreviewCardDetachedTriggersSimpleDemo() {
                   src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
                   alt="Station Hofplein signage in Rotterdam, Netherlands"
                 />
-                <p className="m-0 text-sm text-neutral-600 text-pretty dark:text-neutral-400">
+                <p className="m-0 text-sm text-pretty">
                   <strong>Typography</strong> is the art and science of arranging type to make
                   written language clear, visually appealing, and effective in communication.
                 </p>
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
index 2e449f504a1..39541eed01f 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
@@ -26,7 +26,7 @@ export default function ExamplePreviewCard() {
                 src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
                 alt="Station Hofplein signage in Rotterdam, Netherlands"
               />
-              <p className="m-0 text-sm text-neutral-600 text-pretty dark:text-neutral-400">
+              <p className="m-0 text-sm text-pretty">
                 <strong>Typography</strong> is the art and science of arranging type to make written
                 language clear, visually appealing, and effective in communication.
               </p>
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
index 8a6df41067b..c3b5e4784b0 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
@@ -88,7 +88,6 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
   text-wrap: pretty;
 }
 

From 6a0850aa3fd1060c12a151d5f6c67ad7070e6f84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 8 May 2026 18:05:09 +0200
Subject: [PATCH 151/257] Dialog: spacing and typography tweaks

---
 .../components/dialog/demos/_index.module.css | 16 +++--
 .../css-modules/index.module.css              | 51 +++++++++------
 .../close-confirmation/css-modules/index.tsx  | 64 ++++++++++---------
 .../close-confirmation/tailwind/index.tsx     | 20 +++---
 .../tailwind/index.tsx                        |  6 +-
 .../css-modules/index.tsx                     | 10 +--
 .../tailwind/index.tsx                        | 14 ++--
 .../demos/hero/css-modules/index.module.css   | 16 +++--
 .../dialog/demos/hero/css-modules/index.tsx   | 10 +--
 .../dialog/demos/hero/tailwind/index.tsx      | 14 ++--
 .../css-modules/index.module.css              | 15 +++--
 .../demos/inside-scroll/css-modules/index.tsx |  2 +-
 .../demos/inside-scroll/tailwind/index.tsx    | 12 ++--
 .../demos/nested/css-modules/index.module.css | 17 +++--
 .../dialog/demos/nested/css-modules/index.tsx | 20 +++---
 .../dialog/demos/nested/tailwind/index.tsx    | 30 +++++----
 .../css-modules/index.module.css              | 29 ++++++---
 .../outside-scroll/css-modules/index.tsx      | 11 ++--
 .../demos/outside-scroll/tailwind/index.tsx   | 27 ++++----
 .../demos/uncontained/tailwind/index.tsx      |  4 +-
 20 files changed, 233 insertions(+), 155 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
index 69b0b93258a..d0cae5a5bb4 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
@@ -63,6 +63,9 @@
 
 .Popup {
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   position: fixed;
   top: 50%;
   left: 50%;
@@ -70,7 +73,7 @@
   width: 24rem;
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
-  padding: 0.75rem;
+  padding: 1rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -90,10 +93,16 @@
   }
 }
 
+.Intro {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
 .Title {
   margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
@@ -108,7 +117,6 @@
   display: flex;
   justify-content: end;
   gap: 0.75rem;
-  margin-top: 1rem;
 }
 
 .Container {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
index 17e7b92b8be..771a8a394e6 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
@@ -66,50 +66,66 @@
   position: fixed;
   top: 50%;
   left: 50%;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   width: 24rem;
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
-  padding: 0.75rem;
+  padding: 1rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+  translate: -50% calc(-50% + 1.25rem * var(--nested-dialogs));
+  scale: calc(1 - 0.1 * var(--nested-dialogs));
   transition:
-    transform 100ms ease-out,
-    opacity 100ms ease-out;
-
-  transform: translate(-50%, -50%) scale(calc(1 - 0.1 * var(--nested-dialogs)));
-  translate: 0 calc(0px + 1.25rem * var(--nested-dialogs));
+    translate 150ms ease-out,
+    scale 150ms ease-out,
+    opacity 150ms ease-out;
 
   @media (prefers-color-scheme: dark) {
     box-shadow: none;
   }
 
-  &[data-nested-dialog-open] {
-    &::after {
-      content: '';
-      inset: 0;
-      position: absolute;
-      background-color: rgb(0 0 0 / 0.05);
-    }
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: rgb(0 0 0 / 0.05);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 150ms ease-out;
+  }
+
+  &[data-nested-dialog-open]::after {
+    opacity: 1;
   }
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: translate(-50%, -50%) scale(0.98);
+    translate: -50% calc(-50% + 0.25rem + 1.25rem * var(--nested-dialogs));
+    scale: 0.96;
   }
 }
 
+.PopupBody,
+.Intro {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
 .Title {
   margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
 .Description {
-  margin: 0 0 1rem;
+  margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
@@ -125,7 +141,6 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  margin-top: 0.25rem;
 }
 
 .Textarea {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.tsx
index 6e99746ac64..a2c0f98fabc 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.tsx
@@ -29,32 +29,34 @@ export default function ExampleDialog() {
       <Dialog.Portal>
         <Dialog.Backdrop className={styles.Backdrop} />
         <Dialog.Popup className={styles.Popup}>
-          <Dialog.Title id={titleId} className={styles.Title}>
-            New tweet
-          </Dialog.Title>
-          <form
-            className={styles.TextareaContainer}
-            onSubmit={(event) => {
-              event.preventDefault();
-              // Close the dialog when submitting
-              setDialogOpen(false);
-            }}
-          >
-            <textarea
-              aria-labelledby={titleId}
-              required
-              className={styles.Textarea}
-              placeholder="What’s on your mind?"
-              value={textareaValue}
-              onChange={(event) => setTextareaValue(event.target.value)}
-            />
-            <div className={styles.Actions}>
-              <Dialog.Close className={styles.Button}>Cancel</Dialog.Close>
-              <button type="submit" className={styles.Button}>
-                Tweet
-              </button>
-            </div>
-          </form>
+          <div className={styles.PopupBody}>
+            <Dialog.Title id={titleId} className={styles.Title}>
+              New tweet
+            </Dialog.Title>
+            <form
+              className={styles.TextareaContainer}
+              onSubmit={(event) => {
+                event.preventDefault();
+                // Close the dialog when submitting
+                setDialogOpen(false);
+              }}
+            >
+              <textarea
+                aria-labelledby={titleId}
+                required
+                className={styles.Textarea}
+                placeholder="What’s on your mind?"
+                value={textareaValue}
+                onChange={(event) => setTextareaValue(event.target.value)}
+              />
+              <div className={styles.Actions}>
+                <Dialog.Close className={styles.Button}>Cancel</Dialog.Close>
+                <button type="submit" className={styles.Button}>
+                  Tweet
+                </button>
+              </div>
+            </form>
+          </div>
         </Dialog.Popup>
       </Dialog.Portal>
 
@@ -62,10 +64,12 @@ export default function ExampleDialog() {
       <AlertDialog.Root open={confirmationOpen} onOpenChange={setConfirmationOpen}>
         <AlertDialog.Portal>
           <AlertDialog.Popup className={styles.Popup}>
-            <AlertDialog.Title className={styles.Title}>Discard tweet?</AlertDialog.Title>
-            <AlertDialog.Description className={styles.Description}>
-              Your tweet will be lost.
-            </AlertDialog.Description>
+            <div className={styles.Intro}>
+              <AlertDialog.Title className={styles.Title}>Discard tweet?</AlertDialog.Title>
+              <AlertDialog.Description className={styles.Description}>
+                Your tweet will be lost.
+              </AlertDialog.Description>
+            </div>
             <div className={styles.Actions}>
               <AlertDialog.Close className={styles.Button}>Go back</AlertDialog.Close>
               <button
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
index 71341153441..3334549a6b4 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
@@ -29,12 +29,12 @@ export default function ExampleDialog() {
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-[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))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-nested-dialog-open:after:absolute data-nested-dialog-open:after:inset-0 data-nested-dialog-open:after:bg-black/5 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
-          <Dialog.Title id={titleId} className="text-sm font-bold">
+        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] flex-col gap-1 translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-ending-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
+          <Dialog.Title id={titleId} className="text-base font-bold">
             New tweet
           </Dialog.Title>
           <form
-            className="mt-1 flex flex-col gap-4"
+            className="flex flex-col gap-4"
             onSubmit={(event) => {
               event.preventDefault();
               // Close the dialog when submitting
@@ -67,11 +67,15 @@ 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))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-nested-dialog-open:after:absolute data-nested-dialog-open:after:inset-0 data-nested-dialog-open:after:bg-black/5 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
-            <AlertDialog.Title className="text-sm font-bold">Discard tweet?</AlertDialog.Title>
-            <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
-              Your tweet will be lost.
-            </AlertDialog.Description>
+          <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] flex-col gap-4 translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-ending-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
+            <div className="flex flex-col gap-1">
+              <AlertDialog.Title className="text-base font-bold">
+                Discard tweet?
+              </AlertDialog.Title>
+              <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
+                Your tweet will be lost.
+              </AlertDialog.Description>
+            </div>
             <div className="flex justify-end gap-3">
               <AlertDialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Go back
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 7a43fad9266..6fe30663030 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -64,12 +64,12 @@ export default function DialogDetachedTriggersControlledDemo() {
         {({ payload }) => (
           <Dialog.Portal>
             <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-            <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+            <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
               {payload !== undefined && (
-                <Dialog.Title className="text-sm font-bold">Dialog {payload}</Dialog.Title>
+                <Dialog.Title className="text-base font-bold">Dialog {payload}</Dialog.Title>
               )}
 
-              <div className="flex justify-end gap-3 mt-4">
+              <div className="flex justify-end gap-3">
                 <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                   Close
                 </Dialog.Close>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/css-modules/index.tsx
index e4d1fd1edfe..aa4e19e054c 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/css-modules/index.tsx
@@ -16,10 +16,12 @@ export default function DialogDetachedTriggersSimpleDemo() {
         <Dialog.Portal>
           <Dialog.Backdrop className={styles.Backdrop} />
           <Dialog.Popup className={styles.Popup}>
-            <Dialog.Title className={styles.Title}>Notifications</Dialog.Title>
-            <Dialog.Description className={styles.Description}>
-              You are all caught up. Good job!
-            </Dialog.Description>
+            <div className={styles.Intro}>
+              <Dialog.Title className={styles.Title}>Notifications</Dialog.Title>
+              <Dialog.Description className={styles.Description}>
+                You are all caught up. Good job!
+              </Dialog.Description>
+            </div>
             <div className={styles.Actions}>
               <Dialog.Close className={styles.Button}>Close</Dialog.Close>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
index eb3fc2666d8..97979aedf1d 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -17,12 +17,14 @@ export default function DialogDetachedTriggersSimpleDemo() {
       <Dialog.Root handle={demoDialog}>
         <Dialog.Portal>
           <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-          <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
-            <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
-            <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
-              You are all caught up. Good job!
-            </Dialog.Description>
-            <div className="flex justify-end gap-3 mt-4">
+          <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+            <div className="flex flex-col gap-1">
+              <Dialog.Title className="text-base font-bold">Notifications</Dialog.Title>
+              <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
+                You are all caught up. Good job!
+              </Dialog.Description>
+            </div>
+            <div className="flex justify-end gap-3">
               <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Close
               </Dialog.Close>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
index db8a7969ef7..f05e36a0604 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
@@ -63,6 +63,9 @@
 
 .Popup {
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   position: fixed;
   top: 50%;
   left: 50%;
@@ -70,7 +73,7 @@
   width: 24rem;
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
-  padding: 0.75rem;
+  padding: 1rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -90,10 +93,16 @@
   }
 }
 
+.Intro {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
 .Title {
   margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
@@ -108,5 +117,4 @@
   display: flex;
   justify-content: end;
   gap: 0.75rem;
-  margin-top: 1rem;
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.tsx
index 13e08dafb92..d5171ffbf43 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.tsx
@@ -8,10 +8,12 @@ export default function ExampleDialog() {
       <Dialog.Portal>
         <Dialog.Backdrop className={styles.Backdrop} />
         <Dialog.Popup className={styles.Popup}>
-          <Dialog.Title className={styles.Title}>Notifications</Dialog.Title>
-          <Dialog.Description className={styles.Description}>
-            You are all caught up. Good job!
-          </Dialog.Description>
+          <div className={styles.Intro}>
+            <Dialog.Title className={styles.Title}>Notifications</Dialog.Title>
+            <Dialog.Description className={styles.Description}>
+              You are all caught up. Good job!
+            </Dialog.Description>
+          </div>
           <div className={styles.Actions}>
             <Dialog.Close className={styles.Button}>Close</Dialog.Close>
           </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
index 52a4949346c..5cfb7ec4650 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
@@ -8,12 +8,14 @@ export default function ExampleDialog() {
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
-          <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
-          <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
-            You are all caught up. Good job!
-          </Dialog.Description>
-          <div className="flex justify-end gap-3 mt-4">
+        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+          <div className="flex flex-col gap-1">
+            <Dialog.Title className="text-base font-bold">Notifications</Dialog.Title>
+            <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
+              You are all caught up. Good job!
+            </Dialog.Description>
+          </div>
+          <div className="flex justify-end gap-3">
             <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
               Close
             </Dialog.Close>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
index deeb04c22a6..5e5ba155e2b 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
@@ -147,12 +147,15 @@
   }
 }
 
-.PopupHeader {
-  padding: 1rem 1rem 0.75rem;
+.Header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 1rem;
 }
 
 .Title {
-  margin: 0 0 0.25rem;
+  margin: 0;
   font-size: 1rem;
   line-height: 1.5rem;
   font-weight: 700;
@@ -192,11 +195,15 @@
 }
 
 .Section {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
   padding: 1rem;
 }
 
 .SectionTitle {
-  margin: 0 0 0.25rem;
+  margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.tsx
index 66153f79db5..06af4d228ee 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.tsx
@@ -11,7 +11,7 @@ export default function InsideScrollDialog() {
         <Dialog.Backdrop className={styles.Backdrop} />
         <Dialog.Viewport className={styles.Viewport}>
           <Dialog.Popup className={styles.Popup}>
-            <div className={styles.PopupHeader}>
+            <div className={styles.Header}>
               <Dialog.Title className={styles.Title}>Dialog</Dialog.Title>
               <Dialog.Description className={styles.Description}>
                 This layout keeps the popup fully on screen while allowing its content to scroll.
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
index 3299a4ebafb..8d609c16761 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
@@ -12,9 +12,9 @@ export default function InsideScrollDialog() {
         <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-starting-style:opacity-0 data-ending-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="fixed inset-0 flex items-center justify-center overflow-hidden py-6 [@media(min-height:600px)]:pb-12 [@media(min-height:600px)]:pt-8">
           <Dialog.Popup className="relative flex w-[min(40rem,calc(100vw-2rem))] max-h-full max-w-full min-h-0 flex-col overflow-hidden bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-ending-style:scale-[0.98] data-ending-style:opacity-0">
-            <div className="px-4 pt-4 pb-3">
-              <Dialog.Title className="m-0 mb-1 text-base font-bold">Dialog</Dialog.Title>
-              <Dialog.Description className="m-0 text-sm text-neutral-600 dark:text-neutral-400">
+            <div className="flex flex-col gap-1 p-4">
+              <Dialog.Title className="text-base font-bold">Dialog</Dialog.Title>
+              <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
                 This layout keeps the popup fully on screen while allowing its content to scroll.
               </Dialog.Description>
             </div>
@@ -22,9 +22,9 @@ export default function InsideScrollDialog() {
               <ScrollArea.Viewport className="flex-auto min-h-0 overflow-y-auto overscroll-contain focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 <ScrollArea.Content className="flex flex-col">
                   {CONTENT_SECTIONS.map((item) => (
-                    <section className="p-4" key={item.title}>
-                      <h3 className="mb-1 text-sm font-bold">{item.title}</h3>
-                      <p className="m-0 text-sm text-neutral-700 dark:text-neutral-300">
+                    <section className="flex flex-col gap-1 p-4" key={item.title}>
+                      <h3 className="text-sm font-bold">{item.title}</h3>
+                      <p className="text-sm text-neutral-700 dark:text-neutral-300">
                         {item.body}
                       </p>
                     </section>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
index 521b5f1c54b..0ab2f77652b 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
@@ -96,10 +96,13 @@
   position: fixed;
   top: 50%;
   left: 50%;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   width: 24rem;
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
-  padding: 0.75rem;
+  padding: 1rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -137,10 +140,16 @@
   }
 }
 
+.Intro {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
 .Title {
   margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
@@ -155,7 +164,6 @@
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  margin-top: 1rem;
 }
 
 .EndActions {
@@ -163,5 +171,4 @@
   align-items: center;
   justify-content: end;
   gap: 0.75rem;
-  margin-top: 1rem;
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.tsx
index f8324c785e2..1b34afec82a 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.tsx
@@ -8,19 +8,23 @@ export default function ExampleDialog() {
       <Dialog.Portal>
         <Dialog.Backdrop className={styles.Backdrop} />
         <Dialog.Popup className={styles.Popup}>
-          <Dialog.Title className={styles.Title}>Notifications</Dialog.Title>
-          <Dialog.Description className={styles.Description}>
-            You are all caught up. Good job!
-          </Dialog.Description>
+          <div className={styles.Intro}>
+            <Dialog.Title className={styles.Title}>Notifications</Dialog.Title>
+            <Dialog.Description className={styles.Description}>
+              You are all caught up. Good job!
+            </Dialog.Description>
+          </div>
           <div className={styles.Actions}>
             <Dialog.Root>
               <Dialog.Trigger className={styles.Button}>Customize</Dialog.Trigger>
               <Dialog.Portal>
                 <Dialog.Popup className={styles.Popup}>
-                  <Dialog.Title className={styles.Title}>Customize notifications</Dialog.Title>
-                  <Dialog.Description className={styles.Description}>
-                    Review your settings here.
-                  </Dialog.Description>
+                  <div className={styles.Intro}>
+                    <Dialog.Title className={styles.Title}>Customize notifications</Dialog.Title>
+                    <Dialog.Description className={styles.Description}>
+                      Review your settings here.
+                    </Dialog.Description>
+                  </div>
                   <div className={styles.EndActions}>
                     <Dialog.Close className={styles.Button}>Close</Dialog.Close>
                   </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
index 3929cb4ec93..12e485a9e8e 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
@@ -8,23 +8,29 @@ export default function ExampleDialog() {
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-ending-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
-          <Dialog.Title className="text-sm font-bold">Notifications</Dialog.Title>
-          <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
-            You are all caught up. Good job!
-          </Dialog.Description>
-          <div className="flex items-center gap-3 mt-4">
+        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] flex-col gap-4 translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-ending-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
+          <div className="flex flex-col gap-1">
+            <Dialog.Title className="text-base font-bold">Notifications</Dialog.Title>
+            <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
+              You are all caught up. Good job!
+            </Dialog.Description>
+          </div>
+          <div className="flex items-center gap-3">
             <Dialog.Root>
               <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                 Customize
               </Dialog.Trigger>
               <Dialog.Portal>
-                <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-ending-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
-                  <Dialog.Title className="text-sm font-bold">Customize notifications</Dialog.Title>
-                  <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
-                    Review your settings here.
-                  </Dialog.Description>
-                  <div className="flex items-center justify-end gap-3 mt-4">
+                <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] flex-col gap-4 translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-ending-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
+                  <div className="flex flex-col gap-1">
+                    <Dialog.Title className="text-base font-bold">
+                      Customize notifications
+                    </Dialog.Title>
+                    <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
+                      Review your settings here.
+                    </Dialog.Description>
+                  </div>
+                  <div className="flex items-center justify-end gap-3">
                     <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
                       Close
                     </Dialog.Close>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
index ee32ea207f3..4e9a2a2ac6e 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
@@ -115,6 +115,9 @@
 .Popup {
   box-sizing: border-box;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   width: min(40rem, calc(100vw - 2rem));
   padding: 1rem;
   margin: 4rem auto;
@@ -145,11 +148,11 @@
 }
 
 .PopupHeader {
+  position: relative;
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 0.75rem;
-  margin-bottom: 0.25rem;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding-right: 2rem;
 }
 
 .Title {
@@ -160,7 +163,7 @@
 }
 
 .Description {
-  margin: 0 0 1rem;
+  margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
@@ -168,11 +171,11 @@
 
 .Close {
   box-sizing: border-box;
+  position: absolute;
+  top: -0.25rem;
+  right: -0.25rem;
   display: inline-flex;
   align-items: center;
-  position: relative;
-  right: -0.25rem;
-  top: -0.25rem;
   justify-content: center;
   width: 2rem;
   height: 2rem;
@@ -206,11 +209,17 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  margin-bottom: 1rem;
+}
+
+.Section {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
 }
 
 .SectionTitle {
-  margin: 0 0 0.25rem;
+  margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx
index cfa3213d214..35ec71d9388 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx
@@ -18,19 +18,18 @@ export default function OutsideScrollDialog() {
                 <Dialog.Popup ref={popupRef} className={styles.Popup} initialFocus={popupRef}>
                   <div className={styles.PopupHeader}>
                     <Dialog.Title className={styles.Title}>Dialog</Dialog.Title>
+                    <Dialog.Description className={styles.Description}>
+                      This layout keeps an outer container scrollable while the dialog can extend
+                      past the bottom edge.
+                    </Dialog.Description>
                     <Dialog.Close className={styles.Close} aria-label="Close">
                       <XIcon className={styles.CloseIcon} />
                     </Dialog.Close>
                   </div>
 
-                  <Dialog.Description className={styles.Description}>
-                    This layout keeps an outer container scrollable while the dialog can extend past
-                    the bottom edge.
-                  </Dialog.Description>
-
                   <div className={styles.Body}>
                     {CONTENT_SECTIONS.map((item) => (
-                      <section key={item.title}>
+                      <section className={styles.Section} key={item.title}>
                         <h3 className={styles.SectionTitle}>{item.title}</h3>
                         <p className={styles.SectionBody}>{item.body}</p>
                       </section>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index a41678aa560..bf8e625547c 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -22,35 +22,34 @@ export default function OutsideScrollDialog() {
                 <Dialog.Popup
                   ref={popupRef}
                   initialFocus={popupRef}
-                  className="outline-0 relative mx-auto my-16 w-[min(40rem,calc(100vw-2rem))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate] duration-[350ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-starting-style:translate-y-[100dvh] data-ending-style:translate-y-[max(100dvh,100%)] data-ending-style:duration-[220ms] data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] motion-reduce:transition-none"
+                  className="outline-0 relative mx-auto my-16 flex w-[min(40rem,calc(100vw-2rem))] flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate] duration-[350ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-starting-style:translate-y-[100dvh] data-ending-style:translate-y-[max(100dvh,100%)] data-ending-style:duration-[220ms] data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] motion-reduce:transition-none"
                 >
-                  <div className="mb-1 flex items-start justify-between gap-3">
-                    <Dialog.Title className="m-0 text-base font-bold">Dialog</Dialog.Title>
+                  <div className="relative flex flex-col gap-1 pr-8">
+                    <Dialog.Title className="text-base font-bold">Dialog</Dialog.Title>
+                    <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
+                      This layout keeps an outer container scrollable while the dialog can extend past
+                      the bottom edge.
+                    </Dialog.Description>
                     <Dialog.Close
                       aria-label="Close"
-                      className="relative top-[-0.25rem] right-[-0.25rem] inline-flex items-center justify-center w-8 h-8 bg-transparent text-neutral-950 dark:text-white hover:bg-neutral-200 dark:hover:bg-neutral-950 hover:text-neutral-950 dark:hover:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+                      className="absolute -top-1 -right-1 inline-flex items-center justify-center w-8 h-8 border-none bg-transparent p-0 text-neutral-950 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
                     >
                       <XIcon className="h-5 w-5" />
                     </Dialog.Close>
                   </div>
 
-                  <Dialog.Description className="m-0 mb-4 text-sm text-neutral-600 dark:text-neutral-400">
-                    This layout keeps an outer container scrollable while the dialog can extend past
-                    the bottom edge.
-                  </Dialog.Description>
-
-                  <div className="mb-4 flex flex-col gap-4">
+                  <div className="flex flex-col gap-4">
                     {CONTENT_SECTIONS.map((item) => (
-                      <section key={item.title}>
-                        <h3 className="m-0 mb-1 text-sm font-bold">{item.title}</h3>
-                        <p className="m-0 text-sm text-neutral-700 dark:text-neutral-300">
+                      <section className="flex flex-col gap-1" key={item.title}>
+                        <h3 className="text-sm font-bold">{item.title}</h3>
+                        <p className="text-sm text-neutral-700 dark:text-neutral-300">
                           {item.body}
                         </p>
                       </section>
                     ))}
                   </div>
 
-                  <p className="m-0 text-sm text-neutral-600 dark:text-neutral-400">
+                  <p className="text-sm text-neutral-600 dark:text-neutral-400">
                     Related docs:{' '}
                     {RELATED_LINKS.map((item, index) => (
                       <React.Fragment key={item.href}>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
index 25d7466d19c..8abe2dde80e 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
@@ -11,10 +11,10 @@ export default function ExampleUncontainedDialog() {
         <Dialog.Viewport className="fixed inset-0 grid place-items-center px-4 py-12 xl:py-6">
           <Dialog.Popup className="group/popup relative flex h-full w-full max-w-[70rem] xl:max-w-none justify-center pointer-events-none transition-opacity duration-150 data-starting-style:opacity-0 data-ending-style:opacity-0">
             <Dialog.Close
-              className="absolute right-0 -top-10 flex h-8 w-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none hover:bg-neutral-100 dark:hover:bg-neutral-800 xl:top-0 xl:h-10 xl:w-10 pointer-events-auto focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+              className="absolute right-0 -top-10 flex h-8 w-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 xl:top-0 xl:h-10 xl:w-10 pointer-events-auto focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
               aria-label="Close"
             >
-              <XIcon className="h-6 w-6" />
+              <XIcon className="h-5 w-5" />
             </Dialog.Close>
             <div className="pointer-events-auto h-full w-full max-w-[70rem] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-starting-style/popup:scale-105" />
           </Dialog.Popup>

From 4d9540ac9fdcbaf83de8321aad4d76a945e0254e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 8 May 2026 18:05:15 +0200
Subject: [PATCH 152/257] AlertDialog: spacing and typography tweaks

---
 .../alert-dialog/demos/_index.module.css       | 16 ++++++++++++----
 .../css-modules/index.tsx                      | 14 ++++++++------
 .../tailwind/index.tsx                         | 18 ++++++++++--------
 .../css-modules/index.tsx                      | 10 ++++++----
 .../tailwind/index.tsx                         | 14 ++++++++------
 .../demos/hero/css-modules/index.module.css    | 16 ++++++++++++----
 .../demos/hero/css-modules/index.tsx           | 10 ++++++----
 .../alert-dialog/demos/hero/tailwind/index.tsx | 14 ++++++++------
 8 files changed, 70 insertions(+), 42 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
index 3f03a5fb7f0..5608b7bc02e 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
@@ -67,6 +67,9 @@
 
 .Popup {
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   position: fixed;
   top: 50%;
   left: 50%;
@@ -74,7 +77,7 @@
   width: 24rem;
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
-  padding: 0.75rem;
+  padding: 1rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -94,10 +97,16 @@
   }
 }
 
+.Intro {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
 .Title {
   margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
@@ -112,7 +121,6 @@
   display: flex;
   justify-content: end;
   gap: 0.75rem;
-  margin-top: 1rem;
 }
 
 .Container {
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/css-modules/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/css-modules/index.tsx
index ceac1654348..c2bfde509a3 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/css-modules/index.tsx
@@ -68,12 +68,14 @@ export default function AlertDialogDetachedTriggersControlledDemo() {
           <AlertDialog.Portal>
             <AlertDialog.Backdrop className={styles.Backdrop} />
             <AlertDialog.Popup className={styles.Popup}>
-              <AlertDialog.Title className={styles.Title}>
-                {payload?.message ?? 'Are you sure?'}
-              </AlertDialog.Title>
-              <AlertDialog.Description className={styles.Description}>
-                This action cannot be undone.
-              </AlertDialog.Description>
+              <div className={styles.Intro}>
+                <AlertDialog.Title className={styles.Title}>
+                  {payload?.message ?? 'Are you sure?'}
+                </AlertDialog.Title>
+                <AlertDialog.Description className={styles.Description}>
+                  This action cannot be undone.
+                </AlertDialog.Description>
+              </div>
               <div className={styles.Actions}>
                 <AlertDialog.Close className={styles.Button}>Cancel</AlertDialog.Close>
                 <AlertDialog.Close className={`${styles.Button} ${styles.DangerButton}`}>
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 86ba74bcdc5..8c7d21f6ba2 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -71,14 +71,16 @@ export default function AlertDialogDetachedTriggersControlledDemo() {
         {({ payload }) => (
           <AlertDialog.Portal>
             <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-            <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
-              <AlertDialog.Title className="text-sm font-bold">
-                {payload?.message ?? 'Are you sure?'}
-              </AlertDialog.Title>
-              <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
-                This action cannot be undone.
-              </AlertDialog.Description>
-              <div className="flex justify-end gap-3 mt-4">
+            <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+              <div className="flex flex-col gap-1">
+                <AlertDialog.Title className="text-base font-bold">
+                  {payload?.message ?? 'Are you sure?'}
+                </AlertDialog.Title>
+                <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
+                  This action cannot be undone.
+                </AlertDialog.Description>
+              </div>
+              <div className="flex justify-end gap-3">
                 <AlertDialog.Close className={buttonClasses}>Cancel</AlertDialog.Close>
                 <AlertDialog.Close className={dangerButtonClasses}>Confirm</AlertDialog.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/css-modules/index.tsx
index e837da6ccc6..6ef4bc0c13d 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/css-modules/index.tsx
@@ -19,10 +19,12 @@ export default function AlertDialogDetachedTriggersSimpleDemo() {
         <AlertDialog.Portal>
           <AlertDialog.Backdrop className={styles.Backdrop} />
           <AlertDialog.Popup className={styles.Popup}>
-            <AlertDialog.Title className={styles.Title}>Discard draft?</AlertDialog.Title>
-            <AlertDialog.Description className={styles.Description}>
-              This action cannot be undone.
-            </AlertDialog.Description>
+            <div className={styles.Intro}>
+              <AlertDialog.Title className={styles.Title}>Discard draft?</AlertDialog.Title>
+              <AlertDialog.Description className={styles.Description}>
+                This action cannot be undone.
+              </AlertDialog.Description>
+            </div>
             <div className={styles.Actions}>
               <AlertDialog.Close className={styles.Button}>Cancel</AlertDialog.Close>
               <AlertDialog.Close className={`${styles.Button} ${styles.DangerButton}`}>
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
index b851bda5b43..3909278a8b6 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -19,12 +19,14 @@ export default function AlertDialogDetachedTriggersSimpleDemo() {
       <AlertDialog.Root handle={demoAlertDialog}>
         <AlertDialog.Portal>
           <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-          <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
-            <AlertDialog.Title className="text-sm font-bold">Discard draft?</AlertDialog.Title>
-            <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
-              This action cannot be undone.
-            </AlertDialog.Description>
-            <div className="flex justify-end gap-3 mt-4">
+          <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+            <div className="flex flex-col gap-1">
+              <AlertDialog.Title className="text-base font-bold">Discard draft?</AlertDialog.Title>
+              <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
+                This action cannot be undone.
+              </AlertDialog.Description>
+            </div>
+            <div className="flex justify-end gap-3">
               <AlertDialog.Close className={buttonClasses}>Cancel</AlertDialog.Close>
               <AlertDialog.Close className={dangerButtonClasses}>Discard</AlertDialog.Close>
             </div>
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
index 94000452720..20c0a28d46b 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
@@ -67,6 +67,9 @@
 
 .Popup {
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   position: fixed;
   top: 50%;
   left: 50%;
@@ -74,7 +77,7 @@
   width: 24rem;
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
-  padding: 0.75rem;
+  padding: 1rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -94,10 +97,16 @@
   }
 }
 
+.Intro {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
 .Title {
   margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 700;
 }
 
@@ -112,5 +121,4 @@
   display: flex;
   justify-content: end;
   gap: 0.75rem;
-  margin-top: 1rem;
 }
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.tsx
index b592b68271b..676e8bed888 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.tsx
@@ -10,10 +10,12 @@ export default function ExampleAlertDialog() {
       <AlertDialog.Portal>
         <AlertDialog.Backdrop className={styles.Backdrop} />
         <AlertDialog.Popup className={styles.Popup}>
-          <AlertDialog.Title className={styles.Title}>Discard draft?</AlertDialog.Title>
-          <AlertDialog.Description className={styles.Description}>
-            You can't undo this action.
-          </AlertDialog.Description>
+          <div className={styles.Intro}>
+            <AlertDialog.Title className={styles.Title}>Discard draft?</AlertDialog.Title>
+            <AlertDialog.Description className={styles.Description}>
+              You can't undo this action.
+            </AlertDialog.Description>
+          </div>
           <div className={styles.Actions}>
             <AlertDialog.Close className={styles.Button}>Cancel</AlertDialog.Close>
             <AlertDialog.Close data-color="red" className={styles.Button}>
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
index be78838287e..a1fe47a1c21 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
@@ -11,12 +11,14 @@ export default function ExampleAlertDialog() {
       <AlertDialog.Trigger className={dangerButtonClasses}>Discard draft</AlertDialog.Trigger>
       <AlertDialog.Portal>
         <AlertDialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <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 bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
-          <AlertDialog.Title className="text-sm font-bold">Discard draft?</AlertDialog.Title>
-          <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
-            You can’t undo this action.
-          </AlertDialog.Description>
-          <div className="flex justify-end gap-3 mt-4">
+        <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+          <div className="flex flex-col gap-1">
+            <AlertDialog.Title className="text-base font-bold">Discard draft?</AlertDialog.Title>
+            <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
+              You can’t undo this action.
+            </AlertDialog.Description>
+          </div>
+          <div className="flex justify-end gap-3">
             <AlertDialog.Close className={buttonClasses}>Cancel</AlertDialog.Close>
             <AlertDialog.Close className={dangerButtonClasses}>Discard</AlertDialog.Close>
           </div>

From 555ab95994b63667f97dec45b37e3b9f747160c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 8 May 2026 18:15:48 +0200
Subject: [PATCH 153/257] NumberField: reduce padding

---
 .../number-field/demos/hero/css-modules/index.module.css        | 2 +-
 .../react/components/number-field/demos/hero/tailwind/index.tsx | 2 +-
 .../react/handbook/forms/demos/components/number-field.tsx      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
index b0ae5c8c2b5..69a94673734 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
@@ -31,7 +31,7 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
-  padding: 0 0.75rem;
+  padding: 0 0.5rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
   border-right: 0;
   border-left: 0;
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
index dc32d924004..de40acaa7e3 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleNumberField() {
         <NumberField.Decrement className={stepperClasses}>
           <MinusIcon className="size-3" />
         </NumberField.Decrement>
-        <NumberField.Input className="h-full w-[7ch] border-y border-neutral-950 rounded-none bg-white dark:bg-neutral-950 px-3 text-left text-sm font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white" />
+        <NumberField.Input className="h-full w-[7ch] border-y border-neutral-950 rounded-none bg-white px-2 text-left text-sm font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white" />
         <NumberField.Increment className={stepperClasses}>
           <PlusIcon className="size-3" />
         </NumberField.Increment>
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
index 8c604cb036b..e246af9db5a 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
@@ -32,7 +32,7 @@ export const Input = React.forwardRef<HTMLInputElement, NumberField.Input.Props>
     <NumberField.Input
       ref={forwardedRef}
       className={clsx(
-        'h-full w-16 rounded-none border-y border-neutral-950 bg-white px-3 text-center text-sm font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white',
+        'h-full w-16 rounded-none border-y border-neutral-950 bg-white px-2 text-sm font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white',
         className,
       )}
       {...props}

From 8ef29501ffa62d51041130999b46d1620465bd1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 8 May 2026 18:30:47 +0200
Subject: [PATCH 154/257] Popover: tweak spacing

---
 .../popover/demos/_index.module.css           |  3 +++
 .../tailwind/index.tsx                        |  4 ++--
 .../css-modules/index.module.css              |  6 ++++++
 .../css-modules/index.tsx                     |  8 ++++----
 .../detached-triggers-full/tailwind/index.tsx | 20 +++++++++----------
 .../tailwind/index.tsx                        |  2 +-
 .../popover/demos/hero/tailwind/index.tsx     |  2 +-
 .../demos/open-on-hover/tailwind/index.tsx    |  2 +-
 8 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
index 359436654a4..70518038378 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
@@ -56,6 +56,9 @@
 .Popup {
   box-sizing: border-box;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
   padding: 0.75rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
index a8c720f8a04..8ec8fe09037 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { BellIcon } from '../../icons-tw';
 
 const demoPopover = Popover.createHandle();
 
-export default function PopoverDetachedTriggersSimpleDemo() {
+export default function PopoverDetachedTriggersControlledDemo() {
   const [open, setOpen] = React.useState(false);
   const [triggerId, setTriggerId] = React.useState<string | null>(null);
 
@@ -64,7 +64,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
             className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)]"
             sideOffset={8}
           >
-            <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+            <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
               <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
               <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
index 30c387f8bff..7973d702f85 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
@@ -188,6 +188,12 @@
   }
 }
 
+.Stack {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
 .Title {
   margin: 0;
   font-size: 0.875rem;
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx
index a357b94aab4..0c39a1eb8a2 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx
@@ -46,12 +46,12 @@ export default function PopoverDetachedTriggersFullDemo() {
 
 function NotificationsPanel() {
   return (
-    <React.Fragment>
+    <div className={styles.Stack}>
       <Popover.Title className={styles.Title}>Notifications</Popover.Title>
       <Popover.Description className={styles.Description}>
         You are all caught up. Good job!
       </Popover.Description>
-    </React.Fragment>
+    </div>
   );
 }
 
@@ -78,12 +78,12 @@ function ProfilePanel() {
 
 function ActivityPanel() {
   return (
-    <React.Fragment>
+    <div className={styles.Stack}>
       <Popover.Title className={styles.Title}>Activity</Popover.Title>
       <Popover.Description className={styles.Description}>
         Nothing interesting happened recently.
       </Popover.Description>
-    </React.Fragment>
+    </div>
   );
 }
 
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
index 12f8ac5a2bb..b15ad06e9c8 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
@@ -40,7 +40,7 @@ export default function PopoverDetachedTriggersFullDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none"
             >
-              <Popover.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[31.25rem] origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:scale-90 data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-90 data-starting-style:opacity-0">
+              <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[31.25rem] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:scale-90 data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-90 data-starting-style:opacity-0">
                 <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
 
                 <Popover.Viewport
@@ -80,19 +80,19 @@ export default function PopoverDetachedTriggersFullDemo() {
 
 function NotificationsPanel() {
   return (
-    <React.Fragment>
-      <Popover.Title className="m-0 text-sm font-bold">Notifications</Popover.Title>
-      <Popover.Description className="m-0 text-sm text-neutral-600 dark:text-neutral-400">
+    <div className="flex flex-col gap-1">
+      <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
+      <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
         You are all caught up. Good job!
       </Popover.Description>
-    </React.Fragment>
+    </div>
   );
 }
 
 function ProfilePanel() {
   return (
     <div className="grid w-max grid-cols-[auto_auto] gap-x-2">
-      <Popover.Title className="col-start-2 col-end-3 row-start-1 row-end-2 m-0 text-sm font-bold">
+      <Popover.Title className="col-start-2 col-end-3 row-start-1 row-end-2 text-sm font-bold">
         Jason Eventon
       </Popover.Title>
       <Avatar.Root className="col-start-1 col-end-2 row-start-1 row-end-3 inline-flex h-12 w-12 items-center justify-center overflow-hidden bg-neutral-200 dark:bg-neutral-800 align-middle text-sm leading-none font-bold text-neutral-950 dark:text-white select-none">
@@ -126,11 +126,11 @@ function ProfilePanel() {
 
 function ActivityPanel() {
   return (
-    <React.Fragment>
-      <Popover.Title className="m-0 text-sm font-bold">Activity</Popover.Title>
-      <Popover.Description className="m-0 text-sm text-neutral-600 dark:text-neutral-400">
+    <div className="flex flex-col gap-1">
+      <Popover.Title className="text-sm font-bold">Activity</Popover.Title>
+      <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
         Nothing interesting happened recently.
       </Popover.Description>
-    </React.Fragment>
+    </div>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
index d1c039abb74..7ea1793ac75 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
       <Popover.Root handle={demoPopover}>
         <Popover.Portal>
           <Popover.Positioner sideOffset={8}>
-            <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+            <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
               <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
               <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
index b8ab63c4503..0a2fc170078 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExamplePopover() {
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
-          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+          <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
             <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
             <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
index ef12d7ec7e3..75572de9b46 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExamplePopover() {
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
-          <Popover.Popup className="relative origin-[var(--transform-origin)] max-w-[500px] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+          <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
             <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
             <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">

From 34a4a9731fa8981bf8e95a33bbfe76cd9354b7fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 8 May 2026 18:41:18 +0200
Subject: [PATCH 155/257] Popover: use text buttons instead of icons buttons

---
 .../popover/demos/_index.module.css           | 63 ++++---------------
 .../css-modules/index.tsx                     | 20 ++----
 .../tailwind/index.tsx                        | 30 +++------
 .../css-modules/index.module.css              | 49 ---------------
 .../css-modules/index.tsx                     | 51 +++------------
 .../detached-triggers-full/tailwind/index.tsx | 16 ++---
 .../css-modules/index.tsx                     | 12 +---
 .../tailwind/index.tsx                        | 11 ++--
 .../popover/demos/hero/css-modules/index.tsx  | 12 +---
 .../popover/demos/hero/tailwind/index.tsx     |  8 +--
 .../components/popover/demos/icons-tw.tsx     | 39 ------------
 .../demos/open-on-hover/css-modules/index.tsx | 12 +---
 .../demos/open-on-hover/tailwind/index.tsx    | 11 ++--
 13 files changed, 63 insertions(+), 271 deletions(-)
 delete mode 100644 docs/src/app/(docs)/react/components/popover/demos/icons-tw.tsx

diff --git a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
index 70518038378..6c692e30c52 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
@@ -1,52 +1,3 @@
-.IconButton {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-  margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  font-family: inherit;
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1;
-  white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
-  user-select: none;
-
-  @media (hover: hover) {
-    &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
-    }
-  }
-
-  &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
-  }
-
-  &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
-  }
-
-  &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
-    outline-offset: -2px;
-  }
-}
-
-.Icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
 .Positioner {
   width: var(--positioner-width);
   height: var(--positioner-height);
@@ -167,15 +118,25 @@
   user-select: none;
 
   @media (hover: hover) {
-    &:hover {
+    &:hover:not([data-disabled], :disabled) {
       background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
-  &:active {
+  &:active:not([data-disabled], :disabled) {
     background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
+  &[data-popup-open]:not([data-disabled], :disabled) {
+    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+  }
+
+  &[data-disabled],
+  &:disabled {
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-blue-800);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/css-modules/index.tsx
index 1f2d65495a7..7e1dcc7aa85 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/css-modules/index.tsx
@@ -17,16 +17,16 @@ export default function PopoverDetachedTriggersControlledDemo() {
   return (
     <React.Fragment>
       <div className={styles.Container}>
-        <Popover.Trigger className={styles.IconButton} handle={demoPopover} id="trigger-1">
-          <BellIcon aria-label="Notifications" className={styles.Icon} />
+        <Popover.Trigger className={styles.Button} handle={demoPopover} id="trigger-1">
+          Trigger 1
         </Popover.Trigger>
 
-        <Popover.Trigger className={styles.IconButton} handle={demoPopover} id="trigger-2">
-          <BellIcon aria-label="Notifications" className={styles.Icon} />
+        <Popover.Trigger className={styles.Button} handle={demoPopover} id="trigger-2">
+          Trigger 2
         </Popover.Trigger>
 
-        <Popover.Trigger className={styles.IconButton} handle={demoPopover} id="trigger-3">
-          <BellIcon aria-label="Notifications" className={styles.Icon} />
+        <Popover.Trigger className={styles.Button} handle={demoPopover} id="trigger-3">
+          Trigger 3
         </Popover.Trigger>
 
         <button
@@ -62,11 +62,3 @@ export default function PopoverDetachedTriggersControlledDemo() {
     </React.Fragment>
   );
 }
-
-function BellIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg fill="currentColor" viewBox="0 0 16 16" {...props}>
-      <path d="M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
index 8ec8fe09037..d620982bd44 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -1,10 +1,12 @@
 'use client';
 import * as React from 'react';
 import { Popover } from '@base-ui/react/popover';
-import { BellIcon } from '../../icons-tw';
 
 const demoPopover = Popover.createHandle();
 
+const triggerClassName =
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
+
 export default function PopoverDetachedTriggersControlledDemo() {
   const [open, setOpen] = React.useState(false);
   const [triggerId, setTriggerId] = React.useState<string | null>(null);
@@ -17,33 +19,21 @@ export default function PopoverDetachedTriggersControlledDemo() {
   return (
     <React.Fragment>
       <div className="flex gap-2 flex-wrap justify-center">
-        <Popover.Trigger
-          className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm leading-none whitespace-nowrap font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
-          handle={demoPopover}
-          id="trigger-1"
-        >
-          <BellIcon aria-label="Notifications" className="size-5" />
+        <Popover.Trigger className={triggerClassName} handle={demoPopover} id="trigger-1">
+          Trigger 1
         </Popover.Trigger>
 
-        <Popover.Trigger
-          className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm leading-none whitespace-nowrap font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
-          handle={demoPopover}
-          id="trigger-2"
-        >
-          <BellIcon aria-label="Notifications" className="size-5" />
+        <Popover.Trigger className={triggerClassName} handle={demoPopover} id="trigger-2">
+          Trigger 2
         </Popover.Trigger>
 
-        <Popover.Trigger
-          className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm leading-none whitespace-nowrap font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
-          handle={demoPopover}
-          id="trigger-3"
-        >
-          <BellIcon aria-label="Notifications" className="size-5" />
+        <Popover.Trigger className={triggerClassName} handle={demoPopover} id="trigger-3">
+          Trigger 3
         </Popover.Trigger>
 
         <button
           type="button"
-          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
index 7973d702f85..7bb0f45cd95 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
@@ -1,52 +1,3 @@
-.IconButton {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-  margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  font-family: inherit;
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1;
-  white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
-  user-select: none;
-
-  @media (hover: hover) {
-    &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
-    }
-  }
-
-  &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
-  }
-
-  &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
-  }
-
-  &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
-    outline-offset: -2px;
-  }
-}
-
-.Icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
 .Positioner {
   --easing: cubic-bezier(0.22, 1, 0.36, 1);
   --animation-duration: 0.35s;
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx
index 0c39a1eb8a2..5fac7b84b5e 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx
@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { Popover } from '@base-ui/react/popover';
 import { Avatar } from '@base-ui/react/avatar';
+import baseStyles from '../../_index.module.css';
 import styles from './index.module.css';
 
 const demoPopover = Popover.createHandle<React.ComponentType>();
@@ -10,19 +11,19 @@ export default function PopoverDetachedTriggersFullDemo() {
   return (
     <div className={styles.Container}>
       <Popover.Trigger
-        className={styles.IconButton}
+        className={baseStyles.Button}
         handle={demoPopover}
         payload={NotificationsPanel}
       >
-        <BellIcon aria-label="Notifications" className={styles.Icon} />
+        Notifications
       </Popover.Trigger>
 
-      <Popover.Trigger className={styles.IconButton} handle={demoPopover} payload={ActivityPanel}>
-        <ListIcon aria-label="Activity" className={styles.Icon} />
+      <Popover.Trigger className={baseStyles.Button} handle={demoPopover} payload={ActivityPanel}>
+        Activity
       </Popover.Trigger>
 
-      <Popover.Trigger className={styles.IconButton} handle={demoPopover} payload={ProfilePanel}>
-        <UserIcon aria-label="Profile" className={styles.Icon} />
+      <Popover.Trigger className={baseStyles.Button} handle={demoPopover} payload={ProfilePanel}>
+        Profile
       </Popover.Trigger>
 
       <Popover.Root handle={demoPopover}>
@@ -86,41 +87,3 @@ function ActivityPanel() {
     </div>
   );
 }
-
-function BellIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg fill="currentColor" viewBox="0 0 16 16" {...props}>
-      <path d="M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z" />
-    </svg>
-  );
-}
-
-function UserIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} {...props}>
-      <path d="M18 20a6 6 0 0 0-12 0" />
-      <circle cx="12" cy="10" r="4" />
-      <circle cx="12" cy="12" r="10" />
-    </svg>
-  );
-}
-
-function ListIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.5}
-      strokeLinecap="square"
-      {...props}
-    >
-      <path d="M3 5h.01" />
-      <path d="M3 12h.01" />
-      <path d="M3 19h.01" />
-      <path d="M8 5h13" />
-      <path d="M8 12h13" />
-      <path d="M8 19h13" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
index b15ad06e9c8..ec9d8814cb0 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
@@ -2,35 +2,37 @@
 import * as React from 'react';
 import { Popover } from '@base-ui/react/popover';
 import { Avatar } from '@base-ui/react/avatar';
-import { BellIcon, ListIcon, UserIcon } from '../../icons-tw';
 
 const demoPopover = Popover.createHandle<React.ComponentType>();
 
+const triggerClassName =
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
+
 export default function PopoverDetachedTriggersFullDemo() {
   return (
     <div className="flex gap-2">
       <Popover.Trigger
-        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm leading-none whitespace-nowrap font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className={triggerClassName}
         handle={demoPopover}
         payload={NotificationsPanel}
       >
-        <BellIcon aria-label="Notifications" className="size-5" />
+        Notifications
       </Popover.Trigger>
 
       <Popover.Trigger
-        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm leading-none whitespace-nowrap font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className={triggerClassName}
         handle={demoPopover}
         payload={ActivityPanel}
       >
-        <ListIcon aria-label="Activity" className="size-5" />
+        Activity
       </Popover.Trigger>
 
       <Popover.Trigger
-        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm leading-none whitespace-nowrap font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className={triggerClassName}
         handle={demoPopover}
         payload={ProfilePanel}
       >
-        <UserIcon aria-label="Profile" className="size-5" />
+        Profile
       </Popover.Trigger>
 
       <Popover.Root handle={demoPopover}>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/css-modules/index.tsx
index a1df1ff4c3b..9fab34c29d4 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/css-modules/index.tsx
@@ -8,8 +8,8 @@ const demoPopover = Popover.createHandle();
 export default function PopoverDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
-      <Popover.Trigger className={styles.IconButton} handle={demoPopover}>
-        <BellIcon aria-label="Notifications" className={styles.Icon} />
+      <Popover.Trigger className={styles.Button} handle={demoPopover}>
+        Notifications
       </Popover.Trigger>
 
       <Popover.Root handle={demoPopover}>
@@ -28,11 +28,3 @@ export default function PopoverDetachedTriggersSimpleDemo() {
     </React.Fragment>
   );
 }
-
-function BellIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg fill="currentColor" viewBox="0 0 16 16" {...props}>
-      <path d="M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
index 7ea1793ac75..225ea103306 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
@@ -1,18 +1,17 @@
 'use client';
 import * as React from 'react';
 import { Popover } from '@base-ui/react/popover';
-import { BellIcon } from '../../icons-tw';
 
 const demoPopover = Popover.createHandle();
 
+const triggerClassName =
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
+
 export default function PopoverDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
-      <Popover.Trigger
-        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm leading-none whitespace-nowrap font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
-        handle={demoPopover}
-      >
-        <BellIcon aria-label="Notifications" className="size-5" />
+      <Popover.Trigger className={triggerClassName} handle={demoPopover}>
+        Notifications
       </Popover.Trigger>
 
       <Popover.Root handle={demoPopover}>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/css-modules/index.tsx
index 08f15bc3c1a..018ef215f44 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/css-modules/index.tsx
@@ -5,9 +5,7 @@ import styles from '../../_index.module.css';
 export default function ExamplePopover() {
   return (
     <Popover.Root>
-      <Popover.Trigger className={styles.IconButton}>
-        <BellIcon aria-label="Notifications" className={styles.Icon} />
-      </Popover.Trigger>
+      <Popover.Trigger className={styles.Button}>Notifications</Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
           <Popover.Popup className={styles.Popup}>
@@ -22,11 +20,3 @@ export default function ExamplePopover() {
     </Popover.Root>
   );
 }
-
-function BellIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg fill="currentColor" viewBox="0 0 16 16" {...props}>
-      <path d="M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
index 0a2fc170078..d563473d70f 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
@@ -1,12 +1,12 @@
 import { Popover } from '@base-ui/react/popover';
-import { BellIcon } from '../../icons-tw';
+
+const triggerClassName =
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
 
 export default function ExamplePopover() {
   return (
     <Popover.Root>
-      <Popover.Trigger className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm leading-none whitespace-nowrap font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
-        <BellIcon aria-label="Notifications" className="size-5" />
-      </Popover.Trigger>
+      <Popover.Trigger className={triggerClassName}>Notifications</Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
           <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/icons-tw.tsx b/docs/src/app/(docs)/react/components/popover/demos/icons-tw.tsx
deleted file mode 100644
index 907acc55e40..00000000000
--- a/docs/src/app/(docs)/react/components/popover/demos/icons-tw.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from 'react';
-
-export function BellIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg fill="currentColor" viewBox="0 0 16 16" {...props}>
-      <path d="M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z" />
-    </svg>
-  );
-}
-
-export function UserIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} {...props}>
-      <path d="M18 20a6 6 0 0 0-12 0" />
-      <circle cx="12" cy="10" r="4" />
-      <circle cx="12" cy="12" r="10" />
-    </svg>
-  );
-}
-
-export function ListIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.5}
-      strokeLinecap="square"
-      {...props}
-    >
-      <path d="M3 5h.01" />
-      <path d="M3 12h.01" />
-      <path d="M3 19h.01" />
-      <path d="M8 5h13" />
-      <path d="M8 12h13" />
-      <path d="M8 19h13" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/css-modules/index.tsx
index bb621d0c7c7..7e2c8c72e05 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/css-modules/index.tsx
@@ -5,8 +5,8 @@ import styles from '../../_index.module.css';
 export default function ExamplePopover() {
   return (
     <Popover.Root>
-      <Popover.Trigger openOnHover className={styles.IconButton}>
-        <BellIcon aria-label="Notifications" className={styles.Icon} />
+      <Popover.Trigger openOnHover className={styles.Button}>
+        Notifications
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
@@ -22,11 +22,3 @@ export default function ExamplePopover() {
     </Popover.Root>
   );
 }
-
-function BellIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg fill="currentColor" viewBox="0 0 16 16" {...props}>
-      <path d="M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
index 75572de9b46..535055b8727 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
@@ -1,14 +1,13 @@
 import { Popover } from '@base-ui/react/popover';
-import { BellIcon } from '../../icons-tw';
+
+const triggerClassName =
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
 
 export default function ExamplePopover() {
   return (
     <Popover.Root>
-      <Popover.Trigger
-        openOnHover
-        className="flex size-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white text-sm leading-none whitespace-nowrap font-normal select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
-      >
-        <BellIcon aria-label="Notifications" className="size-5" />
+      <Popover.Trigger openOnHover className={triggerClassName}>
+        Notifications
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>

From 39fdb985ac3cc291cbb319cfb7c58016e5f25a47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 8 May 2026 18:54:02 +0200
Subject: [PATCH 156/257] Replace custom classes with TW counterpart

---
 .../autocomplete/demos/command-palette/tailwind/index.tsx       | 2 +-
 .../components/combobox/demos/async-multiple/tailwind/index.tsx | 2 +-
 .../components/combobox/demos/creatable/tailwind/index.tsx      | 2 +-
 .../react/components/combobox/demos/multiple/tailwind/index.tsx | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
index e9f45c508f1..c5de579a4f7 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
@@ -20,7 +20,7 @@ export default function ExampleAutocompleteCommandPalette() {
         <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 ease-[cubic-bezier(0.45,1.005,0,1.005)] data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="fixed inset-0 flex items-start justify-center overflow-hidden px-2 pt-18 pb-2">
           <Dialog.Popup
-            className="relative flex max-h-[min(36rem,calc(100dvh-5rem))] w-[calc(100vw-1rem)] max-w-[28rem] flex-col border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-150 data-ending-style:-translate-y-4 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:-translate-y-4 data-starting-style:scale-95 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+            className="relative flex max-h-[min(36rem,calc(100dvh-5rem))] w-[calc(100vw-1rem)] max-w-md flex-col border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-150 data-ending-style:-translate-y-4 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:-translate-y-4 data-starting-style:scale-95 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-label="Command palette"
           >
             <Autocomplete.Root
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index 62b35cb8816..4b69319f617 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -134,7 +134,7 @@ export default function ExampleAsyncMultipleCombobox() {
         });
       }}
     >
-      <div className="max-w-[28rem] flex flex-col gap-1">
+      <div className="max-w-md flex flex-col gap-1">
         <label
           className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white"
           htmlFor={id}
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
index 0dc304ab57a..1884ad1ab0e 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
@@ -121,7 +121,7 @@ export default function ExampleCreatableCombobox() {
           highlightedItemRef.current = item;
         }}
       >
-        <div className="max-w-[28rem] flex flex-col gap-1">
+        <div className="max-w-md flex flex-col gap-1">
           <label
             className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white"
             htmlFor={id}
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
index 294a9137a3d..3260640d342 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleMultipleCombobox() {
 
   return (
     <Combobox.Root items={langs} multiple>
-      <div className="max-w-[28rem] flex flex-col gap-1">
+      <div className="max-w-md flex flex-col gap-1">
         <label
           className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white"
           htmlFor={id}

From 70a9968469821ef8c49b77593f4469ba3cf129ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 8 May 2026 19:06:20 +0200
Subject: [PATCH 157/257] Tabs: use text content instead of illustrations

---
 .../demos/hero/css-modules/index.module.css   | 34 ++++++--
 .../tabs/demos/hero/css-modules/index.tsx     | 47 +++--------
 .../tabs/demos/hero/tailwind/index.tsx        | 77 +++++--------------
 3 files changed, 59 insertions(+), 99 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
index 59f314f602f..54a933510b6 100644
--- a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
@@ -1,3 +1,9 @@
+.Root {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 20rem;
+}
+
 .List {
   display: flex;
   position: relative;
@@ -60,16 +66,30 @@
   background-color: light-dark(white, var(--color-neutral-950));
 }
 
+.PanelViewport {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  width: 100%;
+  min-height: 8rem;
+  border-inline: 1px solid light-dark(var(--color-neutral-950), white);
+  border-block: 1px solid light-dark(var(--color-neutral-950), white);
+}
+
 .Panel {
   box-sizing: border-box;
-  position: relative;
+  grid-area: 1 / 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 8rem;
+  width: 100%;
+  padding: 1rem;
+
   outline: 0;
-  border-inline: 1px solid light-dark(var(--color-neutral-950), white);
-  border-block: 1px solid light-dark(var(--color-neutral-950), white);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  text-align: center;
+  color: light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
 
   &:focus-visible {
@@ -83,8 +103,6 @@
   }
 }
 
-.Icon {
-  width: 2.5rem;
-  height: 2.5rem;
-  color: light-dark(var(--color-neutral-400), var(--color-neutral-500));
+.Paragraph {
+  margin: 0;
 }
diff --git a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.tsx
index 6fd3ba6eaf5..1f38a3adf5d 100644
--- a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.tsx
@@ -1,10 +1,9 @@
-import * as React from 'react';
 import { Tabs } from '@base-ui/react/tabs';
 import styles from './index.module.css';
 
 export default function ExampleTabs() {
   return (
-    <Tabs.Root defaultValue="overview">
+    <Tabs.Root className={styles.Root} defaultValue="overview">
       <Tabs.List className={styles.List}>
         <Tabs.Tab className={styles.Tab} value="overview">
           Overview
@@ -17,39 +16,17 @@ export default function ExampleTabs() {
         </Tabs.Tab>
         <Tabs.Indicator className={styles.Indicator} />
       </Tabs.List>
-      <Tabs.Panel className={styles.Panel} value="overview">
-        <OverviewIcon className={styles.Icon} />
-      </Tabs.Panel>
-      <Tabs.Panel className={styles.Panel} value="projects">
-        <ProjectIcon className={styles.Icon} />
-      </Tabs.Panel>
-      <Tabs.Panel className={styles.Panel} value="account">
-        <PersonIcon className={styles.Icon} />
-      </Tabs.Panel>
+      <div className={styles.PanelViewport}>
+        <Tabs.Panel className={styles.Panel} value="overview">
+          <p className={styles.Paragraph}>Workspace stats and activity.</p>
+        </Tabs.Panel>
+        <Tabs.Panel className={styles.Panel} value="projects">
+          <p className={styles.Paragraph}>Milestones and deadlines.</p>
+        </Tabs.Panel>
+        <Tabs.Panel className={styles.Panel} value="account">
+          <p className={styles.Paragraph}>Profile and preferences.</p>
+        </Tabs.Panel>
+      </div>
     </Tabs.Root>
   );
 }
-
-function OverviewIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="40" height="40" viewBox="0 0 30 30" fill="currentColor" {...props}>
-      <path d="M 6 4 C 4.895 4 4 4.895 4 6 L 4 12 C 4 13.105 4.895 14 6 14 L 12 14 C 13.105 14 14 13.105 14 12 L 14 6 C 14 4.895 13.105 4 12 4 L 6 4 z M 18 4 C 16.895 4 16 4.895 16 6 L 16 12 C 16 13.105 16.895 14 18 14 L 24 14 C 25.105 14 26 13.105 26 12 L 26 6 C 26 4.895 25.105 4 24 4 L 18 4 z M 9 6 C 10.657 6 12 7.343 12 9 C 12 10.657 10.657 12 9 12 C 7.343 12 6 10.657 6 9 C 6 7.343 7.343 6 9 6 z M 18 6 L 24 6 L 24 12 L 18 12 L 18 6 z M 6 16 C 4.895 16 4 16.895 4 18 L 4 24 C 4 25.105 4.895 26 6 26 L 12 26 C 13.105 26 14 25.105 14 24 L 14 18 C 14 16.895 13.105 16 12 16 L 6 16 z M 18 16 C 16.895 16 16 16.895 16 18 L 16 24 C 16 25.105 16.895 26 18 26 L 24 26 C 25.105 26 26 25.105 26 24 L 26 18 C 26 16.895 25.105 16 24 16 L 18 16 z M 21 17.5 L 24.5 21 L 21 24.5 L 17.5 21 L 21 17.5 z M 9 18 L 11.886719 23 L 6.1132812 23 L 9 18 z" />
-    </svg>
-  );
-}
-
-function ProjectIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="40" height="40" viewBox="0 0 30 30" fill="currentColor" {...props}>
-      <path d="M 14.984375 1.9863281 A 1.0001 1.0001 0 0 0 14 3 L 14 4 L 5 4 L 4 4 A 1.0001 1.0001 0 1 0 3.9804688 6 C 3.9348612 9.0608831 3.6893807 11.887023 3.1523438 14.142578 C 2.5565033 16.645108 1.6039585 18.395538 0.4453125 19.167969 A 1.0001 1.0001 0 0 0 1 21 L 4 21 C 4 22.105 4.895 23 6 23 L 11.787109 23 L 10.148438 26.042969 A 1.5 1.5 0 0 0 9 27.5 A 1.5 1.5 0 0 0 10.5 29 A 1.5 1.5 0 0 0 12 27.5 A 1.5 1.5 0 0 0 11.910156 26.992188 L 14.060547 23 L 15.939453 23 L 18.089844 26.992188 A 1.5 1.5 0 0 0 18 27.5 A 1.5 1.5 0 0 0 19.5 29 A 1.5 1.5 0 0 0 21 27.5 A 1.5 1.5 0 0 0 19.851562 26.042969 L 18.212891 23 L 24 23 C 25.105 23 26 22.105 26 21 L 26 6 A 1.0001 1.0001 0 1 0 26 4 L 25 4 L 16 4 L 16 3 A 1.0001 1.0001 0 0 0 14.984375 1.9863281 z M 5.9589844 6 L 14.832031 6 A 1.0001 1.0001 0 0 0 15.158203 6 L 23.958984 6 C 23.912194 9.0500505 23.687726 11.893974 23.152344 14.142578 C 22.583328 16.532444 21.674397 18.178754 20.585938 19 L 3.1523438 19 C 3.9976592 17.786874 4.6791735 16.365049 5.0976562 14.607422 C 5.6877248 12.129135 5.9137751 9.1554725 5.9589844 6 z" />
-    </svg>
-  );
-}
-
-function PersonIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="40" height="40" viewBox="0 0 30 30" fill="currentColor" {...props}>
-      <path d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M8,22.141 c1.167-3.5,4.667-2.134,5.25-4.03v-1.264c-0.262-0.141-1.013-1.109-1.092-1.865c-0.207-0.018-0.531-0.223-0.627-1.034 c-0.051-0.435,0.153-0.68,0.276-0.757c0,0-0.308-0.702-0.308-1.399C11.5,9.72,12.526,8,15,8c1.336,0,1.75,0.947,1.75,0.947 c1.194,0,1.75,1.309,1.75,2.844c0,0.765-0.308,1.399-0.308,1.399c0.124,0.077,0.328,0.322,0.277,0.757 c-0.096,0.811-0.42,1.016-0.627,1.034c-0.079,0.756-0.829,1.724-1.092,1.865v1.264c0.583,1.897,4.083,0.531,5.25,4.031 c0,0-2.618,2.859-7,2.859C10.593,25,8,22.141,8,22.141z" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
index 2f835ae9b1e..f739dc7c28c 100644
--- a/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
@@ -1,72 +1,37 @@
-import * as React from 'react';
 import { Tabs } from '@base-ui/react/tabs';
 
+const tabClassName =
+  'flex h-[calc(2rem+1px)] items-center justify-center bg-transparent px-2 py-0 font-inherit text-sm font-normal leading-5 break-keep whitespace-nowrap text-neutral-600 outline-none select-none hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-active:text-neutral-950 dark:text-neutral-300 dark:hover:text-white dark:data-active:text-white';
+
+const panelClassName =
+  'col-start-1 row-start-1 flex w-full items-center justify-center bg-white p-4 text-center text-sm text-neutral-950 outline-none focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:bg-neutral-950 dark:text-white [[hidden]]:hidden';
+
 export default function ExampleTabs() {
   return (
-    <Tabs.Root defaultValue="overview">
+    <Tabs.Root className="w-full max-w-xs" defaultValue="overview">
       <Tabs.List className="relative z-1 -mb-px flex gap-1">
-        <Tabs.Tab
-          className="flex h-[calc(2rem+1px)] items-center justify-center border-0 px-2 text-sm font-normal break-keep whitespace-nowrap text-neutral-600 outline-0 select-none hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-active:text-neutral-950 dark:text-neutral-300 dark:hover:text-white dark:data-active:text-white"
-          value="overview"
-        >
+        <Tabs.Tab className={tabClassName} value="overview">
           Overview
         </Tabs.Tab>
-        <Tabs.Tab
-          className="flex h-[calc(2rem+1px)] items-center justify-center border-0 px-2 text-sm font-normal break-keep whitespace-nowrap text-neutral-600 outline-0 select-none hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-active:text-neutral-950 dark:text-neutral-300 dark:hover:text-white dark:data-active:text-white"
-          value="projects"
-        >
+        <Tabs.Tab className={tabClassName} value="projects">
           Projects
         </Tabs.Tab>
-        <Tabs.Tab
-          className="flex h-[calc(2rem+1px)] items-center justify-center border-0 px-2 text-sm font-normal break-keep whitespace-nowrap text-neutral-600 outline-0 select-none hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-active:text-neutral-950 dark:text-neutral-300 dark:hover:text-white dark:data-active:text-white"
-          value="account"
-        >
+        <Tabs.Tab className={tabClassName} value="account">
           Account
         </Tabs.Tab>
         <Tabs.Indicator className="absolute top-0 left-0 -z-1 h-full w-(--active-tab-width) translate-x-(--active-tab-left) border-x border-t border-neutral-950 bg-white transition-[translate,width] duration-150 ease-in-out dark:border-white dark:bg-neutral-950" />
       </Tabs.List>
-      <Tabs.Panel
-        className="relative flex h-32 items-center justify-center border border-neutral-950 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 [&[hidden]]:hidden"
-        value="overview"
-      >
-        <OverviewIcon className="size-10 text-neutral-400 dark:text-neutral-500" />
-      </Tabs.Panel>
-      <Tabs.Panel
-        className="relative flex h-32 items-center justify-center border border-neutral-950 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 [&[hidden]]:hidden"
-        value="projects"
-      >
-        <ProjectIcon className="size-10 text-neutral-400 dark:text-neutral-500" />
-      </Tabs.Panel>
-      <Tabs.Panel
-        className="relative flex h-32 items-center justify-center border border-neutral-950 bg-white outline-0 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 [&[hidden]]:hidden"
-        value="account"
-      >
-        <PersonIcon className="size-10 text-neutral-400 dark:text-neutral-500" />
-      </Tabs.Panel>
+      <div className="grid w-full min-h-32 grid-cols-1 border border-neutral-950 dark:border-white">
+        <Tabs.Panel className={panelClassName} value="overview">
+          <p>Workspace stats and activity.</p>
+        </Tabs.Panel>
+        <Tabs.Panel className={panelClassName} value="projects">
+          <p>Milestones and deadlines.</p>
+        </Tabs.Panel>
+        <Tabs.Panel className={panelClassName} value="account">
+          <p>Profile and preferences.</p>
+        </Tabs.Panel>
+      </div>
     </Tabs.Root>
   );
 }
-
-function OverviewIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="40" height="40" viewBox="0 0 30 30" fill="currentColor" {...props}>
-      <path d="M 6 4 C 4.895 4 4 4.895 4 6 L 4 12 C 4 13.105 4.895 14 6 14 L 12 14 C 13.105 14 14 13.105 14 12 L 14 6 C 14 4.895 13.105 4 12 4 L 6 4 z M 18 4 C 16.895 4 16 4.895 16 6 L 16 12 C 16 13.105 16.895 14 18 14 L 24 14 C 25.105 14 26 13.105 26 12 L 26 6 C 26 4.895 25.105 4 24 4 L 18 4 z M 9 6 C 10.657 6 12 7.343 12 9 C 12 10.657 10.657 12 9 12 C 7.343 12 6 10.657 6 9 C 6 7.343 7.343 6 9 6 z M 18 6 L 24 6 L 24 12 L 18 12 L 18 6 z M 6 16 C 4.895 16 4 16.895 4 18 L 4 24 C 4 25.105 4.895 26 6 26 L 12 26 C 13.105 26 14 25.105 14 24 L 14 18 C 14 16.895 13.105 16 12 16 L 6 16 z M 18 16 C 16.895 16 16 16.895 16 18 L 16 24 C 16 25.105 16.895 26 18 26 L 24 26 C 25.105 26 26 25.105 26 24 L 26 18 C 26 16.895 25.105 16 24 16 L 18 16 z M 21 17.5 L 24.5 21 L 21 24.5 L 17.5 21 L 21 17.5 z M 9 18 L 11.886719 23 L 6.1132812 23 L 9 18 z" />
-    </svg>
-  );
-}
-
-function ProjectIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="40" height="40" viewBox="0 0 30 30" fill="currentColor" {...props}>
-      <path d="M 14.984375 1.9863281 A 1.0001 1.0001 0 0 0 14 3 L 14 4 L 5 4 L 4 4 A 1.0001 1.0001 0 1 0 3.9804688 6 C 3.9348612 9.0608831 3.6893807 11.887023 3.1523438 14.142578 C 2.5565033 16.645108 1.6039585 18.395538 0.4453125 19.167969 A 1.0001 1.0001 0 0 0 1 21 L 4 21 C 4 22.105 4.895 23 6 23 L 11.787109 23 L 10.148438 26.042969 A 1.5 1.5 0 0 0 9 27.5 A 1.5 1.5 0 0 0 10.5 29 A 1.5 1.5 0 0 0 12 27.5 A 1.5 1.5 0 0 0 11.910156 26.992188 L 14.060547 23 L 15.939453 23 L 18.089844 26.992188 A 1.5 1.5 0 0 0 18 27.5 A 1.5 1.5 0 0 0 19.5 29 A 1.5 1.5 0 0 0 21 27.5 A 1.5 1.5 0 0 0 19.851562 26.042969 L 18.212891 23 L 24 23 C 25.105 23 26 22.105 26 21 L 26 6 A 1.0001 1.0001 0 1 0 26 4 L 25 4 L 16 4 L 16 3 A 1.0001 1.0001 0 0 0 14.984375 1.9863281 z M 5.9589844 6 L 14.832031 6 A 1.0001 1.0001 0 0 0 15.158203 6 L 23.958984 6 C 23.912194 9.0500505 23.687726 11.893974 23.152344 14.142578 C 22.583328 16.532444 21.674397 18.178754 20.585938 19 L 3.1523438 19 C 3.9976592 17.786874 4.6791735 16.365049 5.0976562 14.607422 C 5.6877248 12.129135 5.9137751 9.1554725 5.9589844 6 z" />
-    </svg>
-  );
-}
-
-function PersonIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="40" height="40" viewBox="0 0 30 30" fill="currentColor" {...props}>
-      <path d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M8,22.141 c1.167-3.5,4.667-2.134,5.25-4.03v-1.264c-0.262-0.141-1.013-1.109-1.092-1.865c-0.207-0.018-0.531-0.223-0.627-1.034 c-0.051-0.435,0.153-0.68,0.276-0.757c0,0-0.308-0.702-0.308-1.399C11.5,9.72,12.526,8,15,8c1.336,0,1.75,0.947,1.75,0.947 c1.194,0,1.75,1.309,1.75,2.844c0,0.765-0.308,1.399-0.308,1.399c0.124,0.077,0.328,0.322,0.277,0.757 c-0.096,0.811-0.42,1.016-0.627,1.034c-0.079,0.756-0.829,1.724-1.092,1.865v1.264c0.583,1.897,4.083,0.531,5.25,4.031 c0,0-2.618,2.859-7,2.859C10.593,25,8,22.141,8,22.141z" />
-    </svg>
-  );
-}

From f2a6c778e89d7a422871dddcdf9ad2824cf22111 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 11 May 2026 07:46:24 +0200
Subject: [PATCH 158/257] NumberField: tweak focus outline offset

---
 .../demos/hero/css-modules/index.module.css   | 25 +++++--------------
 .../demos/hero/tailwind/index.tsx             |  2 +-
 .../forms/demos/components/number-field.tsx   |  2 +-
 3 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
index 69a94673734..d24aa98f7a7 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
@@ -33,8 +33,6 @@
   margin: 0;
   padding: 0 0.5rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
-  border-right: 0;
-  border-left: 0;
   border-radius: 0;
   width: 7ch;
   height: 100%;
@@ -50,7 +48,7 @@
   &:focus {
     z-index: 1;
     outline: 2px solid var(--color-blue-800);
-    outline-offset: -2px;
+    outline-offset: -1px;
   }
 }
 
@@ -87,27 +85,16 @@
     border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
   }
 
-  &:focus-visible {
-    z-index: 1;
-    outline: 2px solid var(--color-blue-800);
-    outline-offset: -2px;
-  }
-}
-
-.Decrement {
-  border-right: 1px solid light-dark(var(--color-neutral-950), white);
-
   svg {
     width: 0.75rem;
     height: 0.75rem;
   }
 }
 
-.Increment {
-  border-left: 1px solid light-dark(var(--color-neutral-950), white);
+.Decrement {
+  border-right: 0;
+}
 
-  svg {
-    width: 0.75rem;
-    height: 0.75rem;
-  }
+.Increment {
+  border-left: 0;
 }
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
index de40acaa7e3..ee1eab1604d 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleNumberField() {
         <NumberField.Decrement className={stepperClasses}>
           <MinusIcon className="size-3" />
         </NumberField.Decrement>
-        <NumberField.Input className="h-full w-[7ch] border-y border-neutral-950 rounded-none bg-white px-2 text-left text-sm font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white" />
+        <NumberField.Input className="h-full w-[7ch] border-y border-neutral-950 rounded-none bg-white px-2 text-left text-sm font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white" />
         <NumberField.Increment className={stepperClasses}>
           <PlusIcon className="size-3" />
         </NumberField.Increment>
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
index e246af9db5a..bcf9ccfe7c4 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
@@ -32,7 +32,7 @@ export const Input = React.forwardRef<HTMLInputElement, NumberField.Input.Props>
     <NumberField.Input
       ref={forwardedRef}
       className={clsx(
-        'h-full w-16 rounded-none border-y border-neutral-950 bg-white px-2 text-sm font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white',
+        'h-full w-16 rounded-none border-y border-neutral-950 bg-white px-2 text-sm font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white',
         className,
       )}
       {...props}

From 0202f57e2820641d50276258f8db64585948bb16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 11 May 2026 07:53:10 +0200
Subject: [PATCH 159/257] Prettier

---
 .../demos/close-confirmation/tailwind/index.tsx      |  4 +---
 .../dialog/demos/inside-scroll/tailwind/index.tsx    |  4 +---
 .../dialog/demos/outside-scroll/tailwind/index.tsx   |  4 ++--
 .../demos/detached-triggers-full/tailwind/index.tsx  | 12 ++----------
 4 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
index 3334549a6b4..61c0079bc75 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
@@ -69,9 +69,7 @@ export default function ExampleDialog() {
         <AlertDialog.Portal>
           <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] flex-col gap-4 translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-ending-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
             <div className="flex flex-col gap-1">
-              <AlertDialog.Title className="text-base font-bold">
-                Discard tweet?
-              </AlertDialog.Title>
+              <AlertDialog.Title className="text-base font-bold">Discard tweet?</AlertDialog.Title>
               <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
                 Your tweet will be lost.
               </AlertDialog.Description>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
index 8d609c16761..872d7102a60 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
@@ -24,9 +24,7 @@ export default function InsideScrollDialog() {
                   {CONTENT_SECTIONS.map((item) => (
                     <section className="flex flex-col gap-1 p-4" key={item.title}>
                       <h3 className="text-sm font-bold">{item.title}</h3>
-                      <p className="text-sm text-neutral-700 dark:text-neutral-300">
-                        {item.body}
-                      </p>
+                      <p className="text-sm text-neutral-700 dark:text-neutral-300">{item.body}</p>
                     </section>
                   ))}
                 </ScrollArea.Content>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index bf8e625547c..54807f99aa5 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -27,8 +27,8 @@ export default function OutsideScrollDialog() {
                   <div className="relative flex flex-col gap-1 pr-8">
                     <Dialog.Title className="text-base font-bold">Dialog</Dialog.Title>
                     <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
-                      This layout keeps an outer container scrollable while the dialog can extend past
-                      the bottom edge.
+                      This layout keeps an outer container scrollable while the dialog can extend
+                      past the bottom edge.
                     </Dialog.Description>
                     <Dialog.Close
                       aria-label="Close"
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
index ec9d8814cb0..30a6789ee0b 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
@@ -19,19 +19,11 @@ export default function PopoverDetachedTriggersFullDemo() {
         Notifications
       </Popover.Trigger>
 
-      <Popover.Trigger
-        className={triggerClassName}
-        handle={demoPopover}
-        payload={ActivityPanel}
-      >
+      <Popover.Trigger className={triggerClassName} handle={demoPopover} payload={ActivityPanel}>
         Activity
       </Popover.Trigger>
 
-      <Popover.Trigger
-        className={triggerClassName}
-        handle={demoPopover}
-        payload={ProfilePanel}
-      >
+      <Popover.Trigger className={triggerClassName} handle={demoPopover} payload={ProfilePanel}>
         Profile
       </Popover.Trigger>
 

From 92f986ed9d64d8c68c07f854e51e04b3e79a347a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 11 May 2026 07:53:29 +0200
Subject: [PATCH 160/257] Drawer: realistic shadow

---
 .../components/drawer/demos/hero/css-modules/index.module.css | 2 +-
 .../react/components/drawer/demos/hero/tailwind/index.tsx     | 2 +-
 .../drawer/demos/indent-provider/css-modules/index.module.css | 2 +-
 .../drawer/demos/indent-provider/tailwind/index.tsx           | 2 +-
 .../drawer/demos/nested/css-modules/index.module.css          | 2 +-
 .../react/components/drawer/demos/nested/tailwind/index.tsx   | 2 +-
 .../drawer/demos/non-modal/css-modules/index.module.css       | 4 ++--
 .../components/drawer/demos/non-modal/tailwind/index.tsx      | 2 +-
 .../drawer/demos/position/css-modules/index.module.css        | 2 +-
 .../react/components/drawer/demos/position/tailwind/index.tsx | 2 +-
 .../drawer/demos/snap-points/css-modules/index.module.css     | 4 ++--
 .../components/drawer/demos/snap-points/tailwind/index.tsx    | 2 +-
 .../drawer/demos/swipe-area/css-modules/index.module.css      | 2 +-
 .../components/drawer/demos/swipe-area/tailwind/index.tsx     | 2 +-
 14 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
index a45398fba6c..6c9b7ae11b9 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
@@ -99,7 +99,7 @@
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   outline: 0;
-  box-shadow: -0.25rem 0 0 rgb(0 0 0 / 12%);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
   overscroll-behavior: contain;
   touch-action: auto;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
index d1ceebba0f3..de7f6e63790 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleDrawer() {
       <Drawer.Portal>
         <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
         <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] fixed inset-0 flex items-stretch justify-end p-(--viewport-padding)">
-          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[-0.25rem_0_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Drawer.Content className="mx-auto w-full max-w-[32rem]">
               <Drawer.Title className="mb-1 text-base font-bold">Drawer</Drawer.Title>
               <Drawer.Description className="mb-6 text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
index 1635867fb5d..dc090faa462 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
@@ -137,7 +137,7 @@
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   outline: 0;
-  box-shadow: 0 -0.25rem 0 rgb(0 0 0 / 12%);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
   overscroll-behavior: contain;
   transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
index 38732b090cd..c7863e84427 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function ExampleDrawer() {
               <Drawer.Portal container={portalContainer}>
                 <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] absolute inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
                 <Drawer.Viewport className="absolute inset-0 flex items-end justify-center">
-                  <Drawer.Popup className="w-full max-h-[calc(80vh+var(--bleed))] -mb-[var(--bleed)] border-t border-neutral-950 bg-white px-6 py-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+var(--bleed))] text-neutral-950 outline-none shadow-[0_-0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] [transform:translateY(var(--drawer-swipe-movement-y))] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-starting-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+                  <Drawer.Popup className="w-full max-h-[calc(80vh+var(--bleed))] -mb-[var(--bleed)] border-t border-neutral-950 bg-white px-6 py-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+var(--bleed))] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] [transform:translateY(var(--drawer-swipe-movement-y))] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-starting-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
                     <div className="mx-auto mb-4 h-1 w-12 bg-neutral-300 dark:bg-neutral-700" />
                     <Drawer.Content className="mx-auto w-full max-w-[32rem]">
                       <Drawer.Title className="mt-0 mb-1 text-base font-bold text-center">
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
index 0269fecd40d..9221f74be69 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
@@ -110,7 +110,7 @@
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   outline: 0;
-  box-shadow: 0 -0.25rem 0 rgb(0 0 0 / 12%);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
   overscroll-behavior: contain;
   transform-origin: 50% calc(100% - var(--bleed));
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
index 83ce8b464d1..0ec1e93b0db 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
@@ -127,7 +127,7 @@ export default function ExampleDrawerNested() {
 }
 
 const popupClassName =
-  "[--bleed:3rem] [--peek:1rem] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))] group/popup relative -mb-[3rem] w-full max-h-[calc(80vh+3rem)] [height:var(--drawer-height,auto)] border-t border-neutral-950 bg-white px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] text-neutral-950 outline-none shadow-[0_-0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform-origin:50%_calc(100%-var(--bleed))] [transform:translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] after:absolute after:inset-0 after:rounded-[inherit] after:bg-transparent after:pointer-events-none after:content-[''] after:transition-[background-color] after:duration-[450ms] after:ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-swiping:duration-0 data-nested-drawer-swiping:duration-0 data-starting-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-open:h-[calc(var(--height)+var(--bleed))] data-nested-drawer-open:overflow-hidden data-nested-drawer-open:after:bg-black/5 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none [transition:transform_450ms_cubic-bezier(0.32,0.72,0,1),height_450ms_cubic-bezier(0.32,0.72,0,1),opacity_450ms_cubic-bezier(0.32,0.72,0,1)]";
+  "[--bleed:3rem] [--peek:1rem] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))] group/popup relative -mb-[3rem] w-full max-h-[calc(80vh+3rem)] [height:var(--drawer-height,auto)] border-t border-neutral-950 bg-white px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform-origin:50%_calc(100%-var(--bleed))] [transform:translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] after:absolute after:inset-0 after:rounded-[inherit] after:bg-transparent after:pointer-events-none after:content-[''] after:transition-[background-color] after:duration-[450ms] after:ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-swiping:duration-0 data-nested-drawer-swiping:duration-0 data-starting-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-open:h-[calc(var(--height)+var(--bleed))] data-nested-drawer-open:overflow-hidden data-nested-drawer-open:after:bg-black/5 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none [transition:transform_450ms_cubic-bezier(0.32,0.72,0,1),height_450ms_cubic-bezier(0.32,0.72,0,1),opacity_450ms_cubic-bezier(0.32,0.72,0,1)]";
 
 const contentClassName =
   'mx-auto w-full max-w-[32rem] transition-opacity duration-[300ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] group-data-nested-drawer-open/popup:opacity-0 group-data-nested-drawer-swiping/popup:opacity-100';
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
index 901df048e99..355f42210e2 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
@@ -104,7 +104,7 @@
   overscroll-behavior: contain;
   touch-action: auto;
   pointer-events: auto;
-  box-shadow: -0.25rem 0 0 rgb(0 0 0 / 12%);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 450ms cubic-bezier(0.32, 0.72, 0, 1),
     box-shadow 450ms cubic-bezier(0.32, 0.72, 0, 1);
@@ -122,7 +122,7 @@
   &[data-starting-style],
   &[data-ending-style] {
     transform: translateX(calc(100% - var(--bleed) + var(--viewport-padding) + 2px));
-    box-shadow: -0.25rem 0 0 rgb(0 0 0 / 0%);
+    box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 0%);
   }
 
   &[data-ending-style] {
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
index 6c9f815e755..a7b787ffd2f 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleDrawer() {
       </Drawer.Trigger>
       <Drawer.Portal>
         <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] fixed inset-0 flex items-stretch justify-end p-(--viewport-padding) pointer-events-none">
-          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] pointer-events-auto h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[-0.25rem_0_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:shadow-[-0.25rem_0_0] data-ending-style:shadow-black/0 data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:shadow-[-0.25rem_0_0] data-starting-style:shadow-black/0 data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] pointer-events-auto h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:shadow-[0.25rem_0.25rem_0] data-ending-style:shadow-black/0 data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:shadow-[0.25rem_0.25rem_0] data-starting-style:shadow-black/0 data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Drawer.Content className="mx-auto w-full max-w-[32rem]">
               <Drawer.Title className="mb-1 text-base font-bold">Non-modal drawer</Drawer.Title>
               <Drawer.Description className="mb-6 text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
index b4c80b36dba..ac6462da191 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
@@ -88,7 +88,7 @@
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   outline: 0;
-  box-shadow: 0 -0.25rem 0 rgb(0 0 0 / 12%);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
   overscroll-behavior: contain;
   transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
index cf3998873cc..76995a5b251 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleDrawer() {
       <Drawer.Portal>
         <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
         <Drawer.Viewport className="fixed inset-0 flex items-end justify-center">
-          <Drawer.Popup className="-mb-[3rem] w-full max-h-[calc(80vh+3rem)] border-t border-neutral-950 bg-white px-6 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] pt-4 text-neutral-950 outline-none shadow-[0_-0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform:translateY(var(--drawer-swipe-movement-y))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%-3rem+2px))] data-starting-style:[transform:translateY(calc(100%-3rem+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Drawer.Popup className="-mb-[3rem] w-full max-h-[calc(80vh+3rem)] border-t border-neutral-950 bg-white px-6 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] pt-4 text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform:translateY(var(--drawer-swipe-movement-y))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%-3rem+2px))] data-starting-style:[transform:translateY(calc(100%-3rem+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <div className="mx-auto mb-4 h-1 w-12 bg-neutral-300 dark:bg-neutral-700" />
             <Drawer.Content className="mx-auto w-full max-w-[32rem]">
               <Drawer.Title className="mb-1 text-base font-bold text-center">
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
index 516e921fcc0..72782ace27c 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
@@ -98,7 +98,7 @@
   outline: 0;
   overflow: visible;
   touch-action: none;
-  box-shadow: 0 -0.25rem 0 rgb(0 0 0 / 12%);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 450ms cubic-bezier(0.32, 0.72, 0, 1),
     box-shadow 450ms cubic-bezier(0.32, 0.72, 0, 1);
@@ -127,7 +127,7 @@
   &[data-ending-style] {
     transform: translateY(calc(100% + 2px));
     padding-bottom: 0;
-    box-shadow: 0 -0.25rem 0 rgb(0 0 0 / 0%);
+    box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 0%);
   }
 
   &[data-ending-style] {
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
index 2cf0d491ea3..cc3cd0b5f4b 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
@@ -21,7 +21,7 @@ export default function ExampleDrawerSnapPoints() {
         <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
         <Drawer.Viewport className="fixed inset-0 flex items-end justify-center touch-none">
           <Drawer.Popup
-            className="relative flex w-full max-h-[calc(100dvh-var(--top-margin))] min-h-0 flex-col overflow-visible border-t border-neutral-950 bg-white text-neutral-950 outline-none touch-none shadow-[0_-0.25rem_0] shadow-black/12 [--bleed:3rem] [padding-bottom:max(0px,calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] [transform:translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-[var(--bleed)] after:bg-[inherit] after:content-[''] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%+2px))] data-starting-style:[transform:translateY(calc(100%+2px))] data-starting-style:[padding-bottom:0] data-ending-style:[padding-bottom:0] data-starting-style:shadow-[0_-0.25rem_0] data-starting-style:shadow-black/0 data-ending-style:shadow-[0_-0.25rem_0] data-ending-style:shadow-black/0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+            className="relative flex w-full max-h-[calc(100dvh-var(--top-margin))] min-h-0 flex-col overflow-visible border-t border-neutral-950 bg-white text-neutral-950 outline-none touch-none shadow-[0.25rem_0.25rem_0] shadow-black/12 [--bleed:3rem] [padding-bottom:max(0px,calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] [transform:translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-[var(--bleed)] after:bg-[inherit] after:content-[''] data-swiping:select-none data-ending-style:[transform:translateY(calc(100%+2px))] data-starting-style:[transform:translateY(calc(100%+2px))] data-starting-style:[padding-bottom:0] data-ending-style:[padding-bottom:0] data-starting-style:shadow-[0.25rem_0.25rem_0] data-starting-style:shadow-black/0 data-ending-style:shadow-[0.25rem_0.25rem_0] data-ending-style:shadow-black/0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             style={{ '--top-margin': `${TOP_MARGIN_REM}rem` } as React.CSSProperties}
           >
             <div className="shrink-0 border-b border-neutral-300 px-6 pt-3.5 pb-4 touch-none dark:border-neutral-700">
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
index 75b59ad86d5..007d33172e5 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
@@ -159,7 +159,7 @@
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   outline: 0;
-  box-shadow: -0.25rem 0 0 rgb(0 0 0 / 12%);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
   touch-action: auto;
   transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
index cbe83d99061..45a94b134ed 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleDrawerSwipeArea() {
         <Drawer.Portal container={portalContainer}>
           <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] absolute inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
           <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] absolute inset-0 z-20 flex items-stretch justify-end p-(--viewport-padding)">
-            <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[-0.25rem_0_0] shadow-black/12 overflow-y-auto touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Drawer.Content className="mx-auto w-full max-w-[32rem]">
                 <Drawer.Title className="mb-1 text-base font-bold">Library</Drawer.Title>
                 <Drawer.Description className="mb-6 text-sm text-neutral-600 dark:text-neutral-400">

From 27d6352ae48266ee0c0f077abbccbfce13ba6753 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 11 May 2026 09:10:11 +0200
Subject: [PATCH 161/257] Drawer: fix inline borders on nested drawers

---
 .../drawer/demos/nested/css-modules/index.module.css      | 8 ++++++--
 .../components/drawer/demos/nested/tailwind/index.tsx     | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
index 9221f74be69..8d203bb33ad 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
@@ -100,13 +100,17 @@
 
   box-sizing: border-box;
   position: relative;
-  width: 100%;
+  width: calc(100% + 2px);
+  margin-left: -1px;
+  margin-right: -1px;
   max-height: calc(80vh + var(--bleed));
   height: var(--drawer-height, auto);
   margin-bottom: calc(-1 * var(--bleed));
   padding: 1rem 1.5rem 1.5rem;
   padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + var(--bleed));
-  border-top: 1px solid light-dark(var(--color-neutral-950), white);
+  border-width: 1px 1px 0;
+  border-style: solid;
+  border-color: light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   outline: 0;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
index 0ec1e93b0db..bc829b5a1ca 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
@@ -127,7 +127,7 @@ export default function ExampleDrawerNested() {
 }
 
 const popupClassName =
-  "[--bleed:3rem] [--peek:1rem] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))] group/popup relative -mb-[3rem] w-full max-h-[calc(80vh+3rem)] [height:var(--drawer-height,auto)] border-t border-neutral-950 bg-white px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform-origin:50%_calc(100%-var(--bleed))] [transform:translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] after:absolute after:inset-0 after:rounded-[inherit] after:bg-transparent after:pointer-events-none after:content-[''] after:transition-[background-color] after:duration-[450ms] after:ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-swiping:duration-0 data-nested-drawer-swiping:duration-0 data-starting-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-open:h-[calc(var(--height)+var(--bleed))] data-nested-drawer-open:overflow-hidden data-nested-drawer-open:after:bg-black/5 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none [transition:transform_450ms_cubic-bezier(0.32,0.72,0,1),height_450ms_cubic-bezier(0.32,0.72,0,1),opacity_450ms_cubic-bezier(0.32,0.72,0,1)]";
+  "[--bleed:3rem] [--peek:1rem] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))] group/popup relative -mx-px -mb-[3rem] w-[calc(100%+2px)] max-h-[calc(80vh+3rem)] [height:var(--drawer-height,auto)] border border-neutral-950 border-b-0 bg-white px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform-origin:50%_calc(100%-var(--bleed))] [transform:translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-transparent after:content-[''] after:transition-[background-color] after:duration-[450ms] after:ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-swiping:duration-0 data-nested-drawer-swiping:duration-0 data-starting-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-open:h-[calc(var(--height)+var(--bleed))] data-nested-drawer-open:overflow-hidden data-nested-drawer-open:after:bg-black/5 dark:border-white dark:border-b-0 dark:bg-neutral-950 dark:text-white dark:shadow-none [transition:transform_450ms_cubic-bezier(0.32,0.72,0,1),height_450ms_cubic-bezier(0.32,0.72,0,1),opacity_450ms_cubic-bezier(0.32,0.72,0,1)]";
 
 const contentClassName =
   'mx-auto w-full max-w-[32rem] transition-opacity duration-[300ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] group-data-nested-drawer-open/popup:opacity-0 group-data-nested-drawer-swiping/popup:opacity-100';

From 71206e19d0ed2b709669c5c43f5ce7abb03afbd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 11 May 2026 09:34:03 +0200
Subject: [PATCH 162/257] All: focus blue -> focus black/white

---
 .../components/accordion/demos/_index.module.css |  2 +-
 .../accordion/demos/hero/tailwind/index.tsx      |  6 +++---
 .../accordion/demos/multiple/tailwind/index.tsx  |  6 +++---
 .../alert-dialog/demos/_index.module.css         |  2 +-
 .../tailwind/index.tsx                           |  2 +-
 .../detached-triggers-simple/tailwind/index.tsx  |  2 +-
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../alert-dialog/demos/hero/tailwind/index.tsx   |  2 +-
 .../demos/async/css-modules/index.module.css     |  2 +-
 .../autocomplete/demos/async/tailwind/index.tsx  |  2 +-
 .../auto-highlight/css-modules/index.module.css  |  2 +-
 .../demos/auto-highlight/tailwind/index.tsx      |  2 +-
 .../command-palette/css-modules/index.module.css |  6 +++---
 .../demos/command-palette/tailwind/index.tsx     |  6 +++---
 .../fuzzy-matching/css-modules/index.module.css  |  2 +-
 .../demos/fuzzy-matching/tailwind/index.tsx      |  2 +-
 .../demos/grid/css-modules/index.module.css      |  8 ++++----
 .../autocomplete/demos/grid/tailwind/index.tsx   |  6 +++---
 .../demos/grouped/css-modules/index.module.css   |  2 +-
 .../demos/grouped/tailwind/index.tsx             |  2 +-
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../autocomplete/demos/hero/tailwind/index.tsx   |  2 +-
 .../demos/inline/css-modules/index.module.css    |  2 +-
 .../autocomplete/demos/inline/tailwind/index.tsx |  2 +-
 .../demos/limit/css-modules/index.module.css     |  2 +-
 .../autocomplete/demos/limit/tailwind/index.tsx  |  2 +-
 .../virtualized/css-modules/index.module.css     |  2 +-
 .../demos/virtualized/tailwind/index.tsx         |  2 +-
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../button/demos/hero/tailwind/index.tsx         |  2 +-
 .../demos/loading/css-modules/index.module.css   |  2 +-
 .../button/demos/loading/tailwind/index.tsx      |  2 +-
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../checkbox-group/demos/hero/tailwind/index.tsx |  6 +++---
 .../demos/nested/css-modules/index.module.css    |  2 +-
 .../demos/parent/css-modules/index.module.css    |  2 +-
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../checkbox/demos/hero/tailwind/index.tsx       |  2 +-
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../collapsible/demos/hero/tailwind/index.tsx    |  2 +-
 .../async-multiple/css-modules/index.module.css  |  2 +-
 .../demos/async-multiple/tailwind/index.tsx      |  2 +-
 .../async-single/css-modules/index.module.css    |  2 +-
 .../demos/async-single/tailwind/index.tsx        |  2 +-
 .../demos/creatable/css-modules/index.module.css |  6 +++---
 .../combobox/demos/creatable/tailwind/index.tsx  |  8 ++++----
 .../demos/grouped/css-modules/index.module.css   |  2 +-
 .../combobox/demos/grouped/tailwind/index.tsx    |  2 +-
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../combobox/demos/hero/tailwind/index.tsx       |  2 +-
 .../css-modules/index.module.css                 |  4 ++--
 .../demos/input-inside-popup/tailwind/index.tsx  |  4 ++--
 .../demos/multiple/css-modules/index.module.css  |  2 +-
 .../combobox/demos/multiple/tailwind/index.tsx   |  2 +-
 .../virtualized/css-modules/index.module.css     |  2 +-
 .../demos/virtualized/tailwind/index.tsx         |  2 +-
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../context-menu/demos/hero/tailwind/index.tsx   |  2 +-
 .../demos/submenu/css-modules/index.module.css   |  2 +-
 .../demos/submenu/tailwind/index.tsx             |  2 +-
 .../components/dialog/demos/_index.module.css    |  2 +-
 .../css-modules/index.module.css                 |  4 ++--
 .../demos/close-confirmation/tailwind/index.tsx  | 12 ++++++------
 .../tailwind/index.tsx                           | 10 +++++-----
 .../detached-triggers-simple/tailwind/index.tsx  |  4 ++--
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../dialog/demos/hero/tailwind/index.tsx         |  4 ++--
 .../inside-scroll/css-modules/index.module.css   |  4 ++--
 .../demos/inside-scroll/tailwind/index.tsx       |  6 +++---
 .../demos/nested/css-modules/index.module.css    |  4 ++--
 .../dialog/demos/nested/tailwind/index.tsx       |  6 +++---
 .../outside-scroll/css-modules/index.module.css  |  6 +++---
 .../demos/outside-scroll/tailwind/index.tsx      |  6 +++---
 .../uncontained/css-modules/index.module.css     |  4 ++--
 .../dialog/demos/uncontained/tailwind/index.tsx  |  4 ++--
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../drawer/demos/hero/tailwind/index.tsx         |  4 ++--
 .../indent-provider/css-modules/index.module.css |  2 +-
 .../demos/indent-provider/tailwind/index.tsx     |  4 ++--
 .../mobile-nav/css-modules/index.module.css      |  6 +++---
 .../drawer/demos/mobile-nav/tailwind/index.tsx   |  8 ++++----
 .../demos/nested/css-modules/index.module.css    |  4 ++--
 .../drawer/demos/nested/tailwind/index.tsx       | 16 ++++++++--------
 .../demos/non-modal/css-modules/index.module.css |  2 +-
 .../drawer/demos/non-modal/tailwind/index.tsx    |  4 ++--
 .../demos/position/css-modules/index.module.css  |  2 +-
 .../drawer/demos/position/tailwind/index.tsx     |  4 ++--
 .../snap-points/css-modules/index.module.css     |  2 +-
 .../drawer/demos/snap-points/tailwind/index.tsx  |  4 ++--
 .../swipe-area/css-modules/index.module.css      |  2 +-
 .../drawer/demos/swipe-area/tailwind/index.tsx   |  2 +-
 .../uncontained/css-modules/index.module.css     |  2 +-
 .../drawer/demos/uncontained/tailwind/index.tsx  |  2 +-
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../field/demos/hero/tailwind/index.tsx          |  2 +-
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../fieldset/demos/hero/tailwind/index.tsx       |  4 ++--
 .../form-action/css-modules/index.module.css     |  4 ++--
 .../form/demos/form-action/tailwind/index.tsx    |  4 ++--
 .../form/demos/hero/css-modules/index.module.css |  4 ++--
 .../form/demos/hero/tailwind/index.tsx           |  4 ++--
 .../form/demos/zod/css-modules/index.module.css  |  4 ++--
 .../components/form/demos/zod/tailwind/index.tsx |  6 +++---
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../input/demos/hero/tailwind/index.tsx          |  2 +-
 .../components/menu/demos/_index.module.css      |  4 ++--
 .../demos/arrow/css-modules/index.module.css     |  2 +-
 .../menu/demos/arrow/tailwind/index.tsx          |  2 +-
 .../checkbox-items/css-modules/index.module.css  |  2 +-
 .../menu/demos/checkbox-items/tailwind/index.tsx |  2 +-
 .../tailwind/index.tsx                           |  2 +-
 .../detached-triggers-full/tailwind/index.tsx    |  2 +-
 .../detached-triggers-simple/tailwind/index.tsx  |  2 +-
 .../group-labels/css-modules/index.module.css    |  2 +-
 .../menu/demos/group-labels/tailwind/index.tsx   |  2 +-
 .../menu/demos/hero/css-modules/index.module.css |  2 +-
 .../menu/demos/hero/tailwind/index.tsx           |  2 +-
 .../open-on-hover/css-modules/index.module.css   |  2 +-
 .../menu/demos/open-on-hover/tailwind/index.tsx  |  2 +-
 .../radio-items/css-modules/index.module.css     |  2 +-
 .../menu/demos/radio-items/tailwind/index.tsx    |  2 +-
 .../demos/submenu/css-modules/index.module.css   |  2 +-
 .../menu/demos/submenu/tailwind/index.tsx        |  2 +-
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../menubar/demos/hero/tailwind/index.tsx        |  8 ++++----
 .../demos/hero/css-modules/index.module.css      |  4 ++--
 .../demos/hero/tailwind/index.tsx                |  4 ++--
 .../nested-inline/css-modules/index.module.css   |  6 +++---
 .../demos/nested-inline/tailwind/index.tsx       |  6 +++---
 .../demos/nested/css-modules/index.module.css    |  4 ++--
 .../demos/nested/tailwind/index.tsx              |  4 ++--
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../number-field/demos/hero/tailwind/index.tsx   |  4 ++--
 .../alphanumeric/css-modules/index.module.css    |  2 +-
 .../demos/alphanumeric/tailwind/index.tsx        |  2 +-
 .../custom-sanitize/css-modules/index.module.css |  2 +-
 .../css-modules/index.module.css                 |  2 +-
 .../demos/focused-placeholder/tailwind/index.tsx |  2 +-
 .../demos/grouped/css-modules/index.module.css   |  2 +-
 .../otp-field/demos/grouped/tailwind/index.tsx   |  4 ++--
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../otp-field/demos/hero/tailwind/index.tsx      |  2 +-
 .../demos/password/css-modules/index.module.css  |  2 +-
 .../otp-field/demos/password/tailwind/index.tsx  |  2 +-
 .../components/popover/demos/_index.module.css   |  2 +-
 .../tailwind/index.tsx                           |  4 ++--
 .../css-modules/index.module.css                 |  2 +-
 .../detached-triggers-full/tailwind/index.tsx    |  6 +++---
 .../detached-triggers-simple/tailwind/index.tsx  |  2 +-
 .../popover/demos/hero/tailwind/index.tsx        |  2 +-
 .../demos/open-on-hover/tailwind/index.tsx       |  2 +-
 .../tailwind/index.tsx                           |  8 ++++----
 .../css-modules/index.module.css                 |  2 +-
 .../detached-triggers-full/tailwind/index.tsx    |  6 +++---
 .../detached-triggers-simple/tailwind/index.tsx  |  2 +-
 .../preview-card/demos/hero/tailwind/index.tsx   |  2 +-
 .../preview-card/demos/index.module.css          |  4 ++--
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../radio/demos/hero/tailwind/index.tsx          |  6 +++---
 .../demos/both/css-modules/index.module.css      |  2 +-
 .../scroll-area/demos/both/tailwind/index.tsx    |  2 +-
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../scroll-area/demos/hero/tailwind/index.tsx    |  2 +-
 .../scroll-fade/css-modules/index.module.css     |  2 +-
 .../demos/scroll-fade/tailwind/index.tsx         |  2 +-
 .../demos/grouped/css-modules/index.module.css   |  2 +-
 .../select/demos/grouped/tailwind/index.tsx      |  2 +-
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../select/demos/hero/tailwind/index.tsx         |  2 +-
 .../demos/multiple/css-modules/index.module.css  |  2 +-
 .../select/demos/multiple/tailwind/index.tsx     |  2 +-
 .../object-values/css-modules/index.module.css   |  2 +-
 .../demos/object-values/tailwind/index.tsx       |  2 +-
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../separator/demos/hero/tailwind/index.tsx      | 12 ++++++------
 .../edge-alignment/css-modules/index.module.css  |  2 +-
 .../demos/edge-alignment/tailwind/index.tsx      |  2 +-
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../slider/demos/hero/tailwind/index.tsx         |  2 +-
 .../range-slider/css-modules/index.module.css    |  2 +-
 .../slider/demos/range-slider/tailwind/index.tsx |  4 ++--
 .../demos/vertical/css-modules/index.module.css  |  2 +-
 .../slider/demos/vertical/tailwind/index.tsx     |  2 +-
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../switch/demos/hero/tailwind/index.tsx         |  2 +-
 .../tabs/demos/hero/css-modules/index.module.css |  4 ++--
 .../tabs/demos/hero/tailwind/index.tsx           |  4 ++--
 .../demos/anchored/css-modules/index.module.css  |  8 ++++----
 .../toast/demos/anchored/tailwind/index.tsx      |  8 ++++----
 .../demos/custom/css-modules/index.module.css    |  4 ++--
 .../deduplicate/css-modules/index.module.css     |  4 ++--
 .../demos/hero/css-modules/index.module.css      |  4 ++--
 .../toast/demos/hero/tailwind/index.tsx          |  4 ++--
 .../demos/position/css-modules/index.module.css  |  4 ++--
 .../toast/demos/position/tailwind/index.tsx      |  4 ++--
 .../demos/promise/css-modules/index.module.css   |  4 ++--
 .../demos/undo/css-modules/index.module.css      |  4 ++--
 .../varying-heights/css-modules/index.module.css |  4 ++--
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../toggle-group/demos/hero/tailwind/index.tsx   |  6 +++---
 .../demos/multiple/css-modules/index.module.css  |  2 +-
 .../demos/multiple/tailwind/index.tsx            |  6 +++---
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../toggle/demos/hero/tailwind/index.tsx         |  2 +-
 .../demos/hero/css-modules/index.module.css      |  4 ++--
 .../toolbar/demos/hero/tailwind/index.tsx        | 12 ++++++------
 .../tailwind/index.tsx                           |  4 ++--
 .../css-modules/index.module.css                 |  2 +-
 .../detached-triggers-full/tailwind/index.tsx    |  2 +-
 .../detached-triggers-simple/tailwind/index.tsx  |  2 +-
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../tooltip/demos/hero/tailwind/index.tsx        |  2 +-
 .../components/tooltip/demos/index.module.css    |  4 ++--
 .../css-modules/index.module.css                 |  2 +-
 .../css-modules/index.module.css                 |  2 +-
 .../css-modules/index.module.css                 |  2 +-
 .../forms/demos/components/autocomplete.tsx      |  2 +-
 .../handbook/forms/demos/components/button.tsx   |  2 +-
 .../handbook/forms/demos/components/checkbox.tsx |  2 +-
 .../handbook/forms/demos/components/combobox.tsx |  2 +-
 .../handbook/forms/demos/components/field.tsx    |  2 +-
 .../forms/demos/components/number-field.tsx      |  6 +++---
 .../handbook/forms/demos/components/radio.tsx    |  2 +-
 .../handbook/forms/demos/components/select.tsx   |  2 +-
 .../handbook/forms/demos/components/slider.tsx   |  2 +-
 .../handbook/forms/demos/components/switch.tsx   |  2 +-
 .../handbook/forms/demos/components/toast.tsx    |  2 +-
 .../app/(docs)/react/handbook/styling/page.mdx   |  2 +-
 .../demos/hero/css-modules/index.module.css      |  2 +-
 .../demos/hero/tailwind/index.tsx                |  2 +-
 .../css-modules/index.module.css                 |  4 ++--
 .../render-callback/css-modules/index.module.css |  2 +-
 232 files changed, 367 insertions(+), 367 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
index 5e71c63b006..52ff2bb9463 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
@@ -49,7 +49,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     z-index: 1;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
index fdb6d852561..a7095d1ff10 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleAccordion() {
     <Accordion.Root className="flex w-80 max-w-full flex-col border border-neutral-950 text-neutral-950 dark:border-white dark:text-white">
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
             What is Base UI?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -21,7 +21,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
             How do I get started?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -36,7 +36,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
             Can I use it for my project?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
index 0f0dbeb13e5..1aad4dd19c1 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleAccordion() {
     >
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
             What is Base UI?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -24,7 +24,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
             How do I get started?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -39,7 +39,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
             Can I use it for my project?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
index 5608b7bc02e..63336f32590 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
@@ -28,7 +28,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 8c7d21f6ba2..96c8b53aefe 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -7,7 +7,7 @@ type AlertPayload = { message: string };
 const demoAlertDialog = AlertDialog.createHandle<AlertPayload>();
 
 const buttonClasses =
-  'flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
+  'flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
index 3909278a8b6..c266aea6ef8 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { AlertDialog } from '@base-ui/react/alert-dialog';
 const demoAlertDialog = AlertDialog.createHandle();
 
 const buttonClasses =
-  'flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
+  'flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
index 20c0a28d46b..c071a153f87 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
@@ -32,7 +32,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
index a1fe47a1c21..c3c60653710 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
@@ -1,7 +1,7 @@
 import { AlertDialog } from '@base-ui/react/alert-dialog';
 
 const buttonClasses =
-  'flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
+  'flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
index ab8ee56cc46..f20af6362d8 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
@@ -13,7 +13,7 @@
   outline: none;
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
index ca291cd8bbe..6efde413fbe 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
@@ -81,7 +81,7 @@ export default function ExampleAsyncAutocomplete() {
         Search movies by name or year
         <Autocomplete.Input
           placeholder="e.g. Pulp Fiction or 1994"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
index 3499f353b3a..f0173d1ccd7 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
@@ -13,7 +13,7 @@
   outline: none;
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
index 4a7361fc289..544f5d287d3 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleAutocompleteAutoHighlight() {
         Auto highlight on type
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
index cfa6b3afc0a..84d4509f77c 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
@@ -30,7 +30,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -112,7 +112,7 @@
   }
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -1px;
   }
 }
@@ -134,7 +134,7 @@
   scroll-padding-block: 0.25rem;
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
index c5de579a4f7..ffa8ab66a2e 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleAutocompleteCommandPalette() {
 
   return (
     <Dialog.Root open={open} onOpenChange={setOpen}>
-      <Dialog.Trigger className="flex h-8 cursor-default items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700">
+      <Dialog.Trigger className="flex h-8 cursor-default items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700">
         Open command palette
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -31,13 +31,13 @@ export default function ExampleAutocompleteCommandPalette() {
               keepHighlight
             >
               <Autocomplete.Input
-                className="h-10 w-full border-0 border-b border-neutral-950 bg-white px-4 text-sm font-normal tracking-[0.016em] text-neutral-950 outline-none placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400"
+                className="h-10 w-full border-0 border-b border-neutral-950 bg-white px-4 text-sm font-normal tracking-[0.016em] text-neutral-950 outline-none placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400"
                 placeholder="Search for apps and commands…"
               />
               <Dialog.Close className="sr-only">Close command palette</Dialog.Close>
 
               <ScrollArea.Root className="relative flex max-h-[min(60dvh,24rem)] min-h-0 flex-[0_1_auto] overflow-hidden">
-                <ScrollArea.Viewport className="min-h-0 flex-1 overscroll-contain [scroll-padding-block:0.25rem] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                <ScrollArea.Viewport className="min-h-0 flex-1 overscroll-contain [scroll-padding-block:0.25rem] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                   <ScrollArea.Content style={{ minWidth: '100%' }}>
                     <Autocomplete.Empty>
                       <div className="flex min-h-32 items-center justify-start py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
index 73c7029b192..cea43c24697 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
@@ -23,7 +23,7 @@
   outline: none;
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
index 70215a3e9cc..0a0622e2aab 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleFuzzyMatchingAutocomplete() {
         Fuzzy search documentation
         <Autocomplete.Input
           placeholder="e.g. React"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
index 3e687f580f0..1eef4faa0e1 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
@@ -25,7 +25,7 @@
 
   &:focus {
     position: relative;
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -57,7 +57,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -94,7 +94,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -125,7 +125,7 @@
   outline: none;
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -1px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
index afa58b26eb4..fd7d04846d5 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
@@ -35,7 +35,7 @@ export default function ExampleEmojiPicker() {
         <input
           ref={textInputRef}
           type="text"
-          className="-mr-px h-8 border border-r-0 border-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none bg-white dark:bg-neutral-950 focus:relative focus:outline-2 focus:-outline-offset-2 focus:outline-solid focus:outline-blue-800 dark:border-white dark:text-white"
+          className="-mr-px h-8 border border-r-0 border-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none bg-white dark:bg-neutral-950 focus:relative focus:outline-2 focus:-outline-offset-2 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
           placeholder="iMessage"
           value={textValue}
           onChange={(event) => setTextValue(event.target.value)}
@@ -55,7 +55,7 @@ export default function ExampleEmojiPicker() {
           }}
         >
           <Autocomplete.Trigger
-            className="flex size-8 items-center justify-center border border-neutral-950 bg-transparent text-xl leading-none text-neutral-950 outline-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-solid focus-visible:outline-blue-800 data-popup-open:bg-neutral-100 dark:border-white dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800"
+            className="flex size-8 items-center justify-center border border-neutral-950 bg-transparent text-xl leading-none text-neutral-950 outline-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-solid focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-popup-open:bg-neutral-100 dark:border-white dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800"
             aria-label="Choose emoji"
           >
             😀
@@ -69,7 +69,7 @@ export default function ExampleEmojiPicker() {
                 <div className="relative z-[2] h-[var(--input-container-height)] w-64 bg-white dark:bg-neutral-950">
                   <Autocomplete.Input
                     placeholder="Search emojis…"
-                    className="h-8 w-full border-0 bg-white px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-blue-800 dark:bg-neutral-950 dark:text-white"
+                    className="h-8 w-full border-0 bg-white px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:bg-neutral-950 dark:text-white"
                   />
                 </div>
                 <Autocomplete.Empty>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
index 6e41e4ebf6c..538028a5580 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
@@ -13,7 +13,7 @@
   outline: none;
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
index f43fffe8829..0b2b30f8d7c 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleGroupAutocomplete() {
         Select a tag
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
index ad50c67c9a8..427498517fc 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
@@ -13,7 +13,7 @@
   outline: none;
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
index 2da15cfc9b7..af37399c38c 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleAutocomplete() {
         Search tags
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
index 1bdf5ad9379..eb6d468b990 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
@@ -19,7 +19,7 @@
   outline: none;
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
index 8548f4eaf7c..82de80d2d6e 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleAutocompleteInline() {
         Search tags
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
index 43abdeb55d7..b90cf3b1fdc 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
@@ -13,7 +13,7 @@
   outline: none;
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
index e06bd086b9b..d55d08d6053 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
@@ -25,7 +25,7 @@ export default function ExampleAutocompleteLimit() {
         Limit results to 8
         <Autocomplete.Input
           placeholder="e.g. component"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
index a3495bbffb9..fe097ca7524 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
@@ -13,7 +13,7 @@
   outline: none;
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
index d552695e061..3a7784bed41 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
@@ -32,7 +32,7 @@ export default function ExampleVirtualizedAutocomplete() {
     >
       <label className="flex flex-col gap-1 text-sm font-bold text-neutral-950 dark:text-white">
         Search 10,000 items
-        <Autocomplete.Input className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white" />
+        <Autocomplete.Input className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white" />
       </label>
 
       <Autocomplete.Portal>
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
index 4427ee821dc..62cc20f03c7 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
@@ -34,7 +34,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
index 3df780c30fc..c7d268b4419 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Button } from '@base-ui/react/button';
 
 export default function ExampleButton() {
   return (
-    <Button className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
+    <Button className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
       Submit
     </Button>
   );
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
index 4427ee821dc..62cc20f03c7 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
@@ -34,7 +34,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
index f8bf7a60ef0..51a7b4cb854 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleButton() {
 
   return (
     <Button
-      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
+      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
       disabled={loading}
       focusableWhenDisabled
       onClick={() => {
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
index 014a31cd28b..5b891c71dc4 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
@@ -43,7 +43,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
index 800239ebe1d..d870247a451 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
@@ -19,7 +19,7 @@ export default function ExampleCheckboxGroup() {
         <Checkbox.Root
           name="apple"
           value="fuji-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
           <Checkbox.Indicator className="flex data-unchecked:hidden">
             <CheckIcon className="size-3" />
@@ -32,7 +32,7 @@ export default function ExampleCheckboxGroup() {
         <Checkbox.Root
           name="apple"
           value="gala-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
           <Checkbox.Indicator className="flex data-unchecked:hidden">
             <CheckIcon className="size-3" />
@@ -45,7 +45,7 @@ export default function ExampleCheckboxGroup() {
         <Checkbox.Root
           name="apple"
           value="granny-smith-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
           <Checkbox.Indicator className="flex data-unchecked:hidden">
             <CheckIcon className="size-3" />
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
index 014a31cd28b..5b891c71dc4 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
@@ -43,7 +43,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
index 014a31cd28b..5b891c71dc4 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
@@ -43,7 +43,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
index 7963ab1ea97..c4c27cd86a1 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
@@ -30,7 +30,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
index 7094b9707e9..f7321378533 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleCheckbox() {
     <label className="flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white">
       <Checkbox.Root
         defaultChecked
-        className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         <Checkbox.Indicator className="flex data-unchecked:hidden">
           <CheckIcon className="size-3" />
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
index 03586e5ff1d..9d270856b2d 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
@@ -44,7 +44,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
index fe2bb806d72..7586cf34a2a 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Collapsible } from '@base-ui/react/collapsible';
 export default function ExampleCollapsible() {
   return (
     <Collapsible.Root className="flex min-h-36 w-48 flex-col justify-center text-neutral-950 dark:text-white">
-      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
+      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
         Recovery keys
         <ChevronIcon className="size-3 transition-transform duration-100 ease-out group-data-panel-open:rotate-90" />
       </Collapsible.Trigger>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
index 242ca31328b..56308c22838 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
@@ -37,7 +37,7 @@
   }
 
   &:focus-within {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index 4b69319f617..d74f099c79e 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -141,7 +141,7 @@ export default function ExampleAsyncMultipleCombobox() {
         >
           Assign reviewers
         </label>
-        <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
+        <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-neutral-950 dark:focus-within:outline-white has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
           <Combobox.Chips className="flex w-full flex-wrap items-center gap-1">
             <Combobox.Value>
               {(value: DirectoryUser[]) => (
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
index 82a868975bb..69ab90a007b 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
@@ -18,7 +18,7 @@
   background-color: light-dark(white, var(--color-neutral-950));
 
   &:focus-within {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index e3f05fc2a5b..f83ad02e948 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -113,7 +113,7 @@ export default function ExampleAsyncSingleCombobox() {
     >
       <div className="relative flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         <label htmlFor={id}>Assign reviewer</label>
-        <Combobox.InputGroup className="relative h-8 w-64 border border-neutral-950 bg-white dark:bg-neutral-950 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 dark:border-white md:w-80 [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
+        <Combobox.InputGroup className="relative h-8 w-64 border border-neutral-950 bg-white dark:bg-neutral-950 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-neutral-950 dark:focus-within:outline-white dark:border-white md:w-80 [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
           <Combobox.Input
             id={id}
             placeholder="e.g. Michael"
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
index e08802a3349..860e7989d7c 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
@@ -37,7 +37,7 @@
   }
 
   &:focus-within {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -333,7 +333,7 @@
   line-height: 1.25rem;
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -376,7 +376,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
index 1884ad1ab0e..705ea622b85 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
@@ -128,7 +128,7 @@ export default function ExampleCreatableCombobox() {
           >
             Labels
           </label>
-          <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
+          <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-neutral-950 dark:focus-within:outline-white has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
             <Combobox.Chips className="flex w-full flex-wrap items-center gap-1">
               <Combobox.Value>
                 {(value: LabelItem[]) => (
@@ -216,17 +216,17 @@ export default function ExampleCreatableCombobox() {
             <form onSubmit={handleCreateSubmit}>
               <input
                 ref={createInputRef}
-                className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm leading-5 font-normal text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:text-white"
+                className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm leading-5 font-normal text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:text-white"
                 placeholder="Label name"
                 defaultValue={pendingQueryRef.current}
               />
               <div className="mt-4 flex justify-end gap-3">
-                <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700">
+                <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700">
                   Cancel
                 </Dialog.Close>
                 <button
                   type="submit"
-                  className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700"
+                  className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700"
                 >
                   Create
                 </button>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
index 840806e789d..101f6389eae 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
@@ -7,7 +7,7 @@
   background-color: light-dark(white, var(--color-neutral-950));
 
   &:focus-within {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index 4134e1aed06..0ed894753d7 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleGroupedCombobox() {
     <Combobox.Root items={groupedProduce}>
       <div className="relative flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         <label htmlFor={id}>Select produce</label>
-        <Combobox.InputGroup className="relative h-8 w-64 border border-neutral-950 bg-white dark:bg-neutral-950 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 dark:border-white [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
+        <Combobox.InputGroup className="relative h-8 w-64 border border-neutral-950 bg-white dark:bg-neutral-950 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-neutral-950 dark:focus-within:outline-white dark:border-white [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
           <Combobox.Input
             placeholder="e.g. Mango"
             id={id}
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
index ec0ba12f1fe..95fa0b119e9 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
@@ -7,7 +7,7 @@
   background-color: light-dark(white, var(--color-neutral-950));
 
   &:focus-within {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
index 8ce50513a52..f5e059f1a8b 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleCombobox() {
     <Combobox.Root items={fruits}>
       <div className="relative flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         <label htmlFor={id}>Choose a fruit</label>
-        <Combobox.InputGroup className="relative h-8 w-56 border border-neutral-950 bg-white dark:bg-neutral-950 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 dark:border-white [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
+        <Combobox.InputGroup className="relative h-8 w-56 border border-neutral-950 bg-white dark:bg-neutral-950 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-neutral-950 dark:focus-within:outline-white dark:border-white [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
           <Combobox.Input
             placeholder="e.g. Apple"
             id={id}
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
index 3cef1d096b6..60c273c9a23 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
@@ -43,7 +43,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -85,7 +85,7 @@
   outline: none;
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -1px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index 45e42569d02..16a9d2bb231 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExamplePopoverCombobox() {
         <Combobox.Label className="cursor-default text-sm leading-5 font-bold text-neutral-950 dark:text-white">
           Country
         </Combobox.Label>
-        <Combobox.Trigger className="flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white pr-2 pl-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800">
+        <Combobox.Trigger className="flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white pr-2 pl-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800">
           <Combobox.Value
             placeholder={
               <span className="text-neutral-600 dark:text-neutral-400">Select country</span>
@@ -28,7 +28,7 @@ export default function ExamplePopoverCombobox() {
               <div className="h-[var(--input-container-height)] w-80 bg-white text-center dark:bg-neutral-950">
                 <Combobox.Input
                   placeholder="e.g. United Kingdom"
-                  className="h-8 w-full min-w-72 border-0 bg-white px-2 dark:bg-neutral-950 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-blue-800 dark:text-white"
+                  className="h-8 w-full min-w-72 border-0 bg-white px-2 dark:bg-neutral-950 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:text-white"
                 />
               </div>
               <Combobox.Empty>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
index 71f074ed185..8556ed187c1 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
@@ -37,7 +37,7 @@
   }
 
   &:focus-within {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
index 3260640d342..a08c17e23ab 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleMultipleCombobox() {
         >
           Programming languages
         </label>
-        <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
+        <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-neutral-950 dark:focus-within:outline-white has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
           <Combobox.Chips className="flex w-full flex-wrap items-center gap-1">
             <Combobox.Value>
               {(value: ProgrammingLanguage[]) => (
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
index 4ebce1b0b8d..83b4418d7b0 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
@@ -13,7 +13,7 @@
   outline: none;
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
index f5486e611ba..7b9dde647bd 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
@@ -34,7 +34,7 @@ export default function ExampleVirtualizedCombobox() {
     >
       <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         Search 10,000 items
-        <Combobox.Input className="h-8 w-64 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white" />
+        <Combobox.Input className="h-8 w-64 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white" />
       </label>
 
       <Combobox.Portal>
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
index 68ed29c7dd5..48f92e428a3 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
@@ -14,7 +14,7 @@
   user-select: none;
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
index c56f59acaf9..89d0eb6294e 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ const itemClass =
 export default function ExampleMenu() {
   return (
     <ContextMenu.Root>
-      <ContextMenu.Trigger className="flex h-[12rem] w-[15rem] items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white">
+      <ContextMenu.Trigger className="flex h-[12rem] w-[15rem] items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white">
         Right click here
       </ContextMenu.Trigger>
       <ContextMenu.Portal>
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
index 8fe343dbe33..779c3ef877a 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
@@ -14,7 +14,7 @@
   user-select: none;
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
index 1fa5a350c3c..fb373115df4 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
@@ -11,7 +11,7 @@ const submenuTriggerClass =
 export default function ExampleContextMenu() {
   return (
     <ContextMenu.Root>
-      <ContextMenu.Trigger className="flex h-[12rem] w-[15rem] items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white">
+      <ContextMenu.Trigger className="flex h-[12rem] w-[15rem] items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white">
         Right click here
       </ContextMenu.Trigger>
       <ContextMenu.Portal>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
index d0cae5a5bb4..70030987557 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
@@ -33,7 +33,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
index 771a8a394e6..9c9f78df3d0 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
@@ -33,7 +33,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -163,7 +163,7 @@
   }
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
index 61c0079bc75..1b49ad3fe7a 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleDialog() {
         }
       }}
     >
-      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Tweet
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -44,18 +44,18 @@ export default function ExampleDialog() {
             <textarea
               aria-labelledby={titleId}
               required
-              className="min-h-32 w-full border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-2 py-2 text-sm font-normal text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800"
+              className="min-h-32 w-full border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-2 py-2 text-sm font-normal text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white"
               placeholder="What’s on your mind?"
               value={textareaValue}
               onChange={(event) => setTextareaValue(event.target.value)}
             />
             <div className="flex justify-end gap-3">
-              <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                 Cancel
               </Dialog.Close>
               <button
                 type="submit"
-                className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+                className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
               >
                 Tweet
               </button>
@@ -75,12 +75,12 @@ export default function ExampleDialog() {
               </AlertDialog.Description>
             </div>
             <div className="flex justify-end gap-3">
-              <AlertDialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <AlertDialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                 Go back
               </AlertDialog.Close>
               <button
                 type="button"
-                className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+                className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                 onClick={() => {
                   setConfirmationOpen(false);
                   setDialogOpen(false);
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 6fe30663030..e551ed340a1 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -17,7 +17,7 @@ export default function DialogDetachedTriggersControlledDemo() {
     <React.Fragment>
       <div className="flex flex-wrap gap-2 justify-center">
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           handle={demoDialog}
           id="trigger-1"
           payload={1}
@@ -26,7 +26,7 @@ export default function DialogDetachedTriggersControlledDemo() {
         </Dialog.Trigger>
 
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           handle={demoDialog}
           id="trigger-2"
           payload={2}
@@ -35,7 +35,7 @@ export default function DialogDetachedTriggersControlledDemo() {
         </Dialog.Trigger>
 
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           handle={demoDialog}
           id="trigger-3"
           payload={3}
@@ -45,7 +45,7 @@ export default function DialogDetachedTriggersControlledDemo() {
 
         <button
           type="button"
-          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
@@ -70,7 +70,7 @@ export default function DialogDetachedTriggersControlledDemo() {
               )}
 
               <div className="flex justify-end gap-3">
-                <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                   Close
                 </Dialog.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
index 97979aedf1d..abd5fbe99e1 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function DialogDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
       <Dialog.Trigger
-        className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         handle={demoDialog}
       >
         View notifications
@@ -25,7 +25,7 @@ export default function DialogDetachedTriggersSimpleDemo() {
               </Dialog.Description>
             </div>
             <div className="flex justify-end gap-3">
-              <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                 Close
               </Dialog.Close>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
index f05e36a0604..ab8bbcc2cb5 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
@@ -33,7 +33,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
index 5cfb7ec4650..740f859612a 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -16,7 +16,7 @@ export default function ExampleDialog() {
             </Dialog.Description>
           </div>
           <div className="flex justify-end gap-3">
-            <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+            <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
               Close
             </Dialog.Close>
           </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
index 5e5ba155e2b..957c500cc7a 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
@@ -33,7 +33,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -184,7 +184,7 @@
   overscroll-behavior: contain;
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
index 872d7102a60..5541d3c0a2e 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function InsideScrollDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -19,7 +19,7 @@ export default function InsideScrollDialog() {
               </Dialog.Description>
             </div>
             <ScrollArea.Root className="relative flex min-h-0 flex-auto overflow-hidden border-y border-neutral-950 dark:border-white">
-              <ScrollArea.Viewport className="flex-auto min-h-0 overflow-y-auto overscroll-contain focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <ScrollArea.Viewport className="flex-auto min-h-0 overflow-y-auto overscroll-contain focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                 <ScrollArea.Content className="flex flex-col">
                   {CONTENT_SECTIONS.map((item) => (
                     <section className="flex flex-col gap-1 p-4" key={item.title}>
@@ -34,7 +34,7 @@ export default function InsideScrollDialog() {
               </ScrollArea.Scrollbar>
             </ScrollArea.Root>
             <div className="flex justify-end gap-3 p-4">
-              <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                 Close
               </Dialog.Close>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
index 0ab2f77652b..ebaa9c23229 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
@@ -33,7 +33,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -63,7 +63,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
index 12e485a9e8e..4bf81e8b984 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -17,7 +17,7 @@ export default function ExampleDialog() {
           </div>
           <div className="flex items-center gap-3">
             <Dialog.Root>
-              <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                 Customize
               </Dialog.Trigger>
               <Dialog.Portal>
@@ -31,7 +31,7 @@ export default function ExampleDialog() {
                     </Dialog.Description>
                   </div>
                   <div className="flex items-center justify-end gap-3">
-                    <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                    <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                       Close
                     </Dialog.Close>
                   </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
index 4e9a2a2ac6e..cc604bac4d1 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
@@ -33,7 +33,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -195,7 +195,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -252,7 +252,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index 54807f99aa5..c838de33691 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function OutsideScrollDialog() {
   const popupRef = React.useRef<HTMLDivElement>(null);
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -32,7 +32,7 @@ export default function OutsideScrollDialog() {
                     </Dialog.Description>
                     <Dialog.Close
                       aria-label="Close"
-                      className="absolute -top-1 -right-1 inline-flex items-center justify-center w-8 h-8 border-none bg-transparent p-0 text-neutral-950 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+                      className="absolute -top-1 -right-1 inline-flex items-center justify-center w-8 h-8 border-none bg-transparent p-0 text-neutral-950 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                     >
                       <XIcon className="h-5 w-5" />
                     </Dialog.Close>
@@ -55,7 +55,7 @@ export default function OutsideScrollDialog() {
                       <React.Fragment key={item.href}>
                         {index > 0 ? ', ' : null}
                         <a
-                          className="text-neutral-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:outline-offset-2"
+                          className="text-neutral-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white focus-visible:outline-offset-2"
                           href={item.href}
                         >
                           {item.label}
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
index 77c3cee8dd0..27463b6a1be 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
@@ -33,7 +33,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -148,7 +148,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
index 8abe2dde80e..36f59b72d1f 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleUncontainedDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -11,7 +11,7 @@ export default function ExampleUncontainedDialog() {
         <Dialog.Viewport className="fixed inset-0 grid place-items-center px-4 py-12 xl:py-6">
           <Dialog.Popup className="group/popup relative flex h-full w-full max-w-[70rem] xl:max-w-none justify-center pointer-events-none transition-opacity duration-150 data-starting-style:opacity-0 data-ending-style:opacity-0">
             <Dialog.Close
-              className="absolute right-0 -top-10 flex h-8 w-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 xl:top-0 xl:h-10 xl:w-10 pointer-events-auto focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+              className="absolute right-0 -top-10 flex h-8 w-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 xl:top-0 xl:h-10 xl:w-10 pointer-events-auto focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
               aria-label="Close"
             >
               <XIcon className="h-5 w-5" />
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
index 6c9b7ae11b9..e4889c6ab00 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
@@ -33,7 +33,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
index de7f6e63790..e08de0b962a 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawer() {
   return (
     <Drawer.Root swipeDirection="right">
-      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open drawer
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -16,7 +16,7 @@ export default function ExampleDrawer() {
                 This is a drawer that slides in from the side. You can swipe to dismiss it.
               </Drawer.Description>
               <div className="flex justify-end gap-3">
-                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
index dc090faa462..c99c7424230 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
@@ -83,7 +83,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
index c7863e84427..ec33bfa8e0e 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleDrawer() {
         <Drawer.Indent className="[--indent-radius:calc(1rem*(1-var(--drawer-swipe-progress)))] [--indent-transition:calc(1-clamp(0,calc(var(--drawer-swipe-progress)*100000),1))] relative min-h-80 border border-neutral-950 bg-white p-4 text-neutral-950 [transition:transform_0.4s_cubic-bezier(0.32,0.72,0,1),border-radius_0.25s_cubic-bezier(0.32,0.72,0,1)] origin-[center_top] will-change-transform [transform:scale(1)_translateY(0)] [transition-duration:calc(400ms*var(--indent-transition)),calc(250ms*var(--indent-transition))] data-active:transform-[scale(calc(0.98+(0.02*var(--drawer-swipe-progress))))_translateY(calc(0.5rem*(1-var(--drawer-swipe-progress))))] data-active:rounded-tl-(--indent-radius) data-active:rounded-tr-(--indent-radius) dark:border-white dark:bg-neutral-950 dark:text-white">
           <div className="flex min-h-80 items-center justify-center">
             <Drawer.Root modal={false}>
-              <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                 Open drawer
               </Drawer.Trigger>
               <Drawer.Portal container={portalContainer}>
@@ -28,7 +28,7 @@ export default function ExampleDrawer() {
                         You are all caught up. Good job!
                       </Drawer.Description>
                       <div className="flex justify-center gap-3">
-                        <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                        <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                           Close
                         </Drawer.Close>
                       </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
index 110116bf22e..27fd7ca76e7 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
@@ -33,7 +33,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -206,7 +206,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -279,7 +279,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
index e8766b8c097..79f7d9eb032 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
@@ -53,7 +53,7 @@ const LONG_LIST = [
 export default function ExampleDrawerMobileNav() {
   return (
     <Drawer.Root>
-      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open mobile menu
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -75,7 +75,7 @@ export default function ExampleDrawerMobileNav() {
                       <div className="h-1 w-12 justify-self-center bg-neutral-300 dark:bg-neutral-700" />
                       <Drawer.Close
                         aria-label="Close menu"
-                        className="flex h-9 w-9 items-center justify-center justify-self-end border-0 bg-transparent text-neutral-950 hover:bg-neutral-100 active:bg-neutral-200 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+                        className="flex h-9 w-9 items-center justify-center justify-self-end border-0 bg-transparent text-neutral-950 hover:bg-neutral-100 active:bg-neutral-200 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                       >
                         <XIcon className="size-5" />
                       </Drawer.Close>
@@ -92,7 +92,7 @@ export default function ExampleDrawerMobileNav() {
                           {ITEMS.map((item) => (
                             <li key={item.label} className="flex">
                               <a
-                                className="flex h-12 w-full items-center border border-neutral-950 bg-white px-4 text-sm text-neutral-950 no-underline hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+                                className="flex h-12 w-full items-center border border-neutral-950 bg-white px-4 text-sm text-neutral-950 no-underline hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                                 href={item.href}
                               >
                                 {item.label}
@@ -108,7 +108,7 @@ export default function ExampleDrawerMobileNav() {
                           {LONG_LIST.map((item) => (
                             <li key={item.label} className="flex">
                               <a
-                                className="flex h-12 w-full items-center border border-neutral-950 bg-white px-4 text-sm text-neutral-950 no-underline hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+                                className="flex h-12 w-full items-center border border-neutral-950 bg-white px-4 text-sm text-neutral-950 no-underline hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                                 href={item.href}
                               >
                                 {item.label}
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
index 8d203bb33ad..fdd7a432cf3 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
@@ -33,7 +33,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -263,6 +263,6 @@
 
 .Input:focus-visible,
 .Textarea:focus-visible {
-  outline: 2px solid var(--color-blue-800);
+  outline: 2px solid light-dark(var(--color-neutral-950), white);
   outline-offset: -2px;
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
index bc829b5a1ca..626d3ea8777 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawerNested() {
   return (
     <Drawer.Root>
-      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open drawer stack
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -22,7 +22,7 @@ export default function ExampleDrawerNested() {
               <div className="flex items-center justify-end gap-4">
                 <div className="mr-auto">
                   <Drawer.Root>
-                    <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                    <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                       Security settings
                     </Drawer.Trigger>
                     <Drawer.Portal>
@@ -46,7 +46,7 @@ export default function ExampleDrawerNested() {
                             <div className="flex items-center justify-end gap-4">
                               <div className="mr-auto">
                                 <Drawer.Root>
-                                  <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                                  <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                                     Advanced options
                                   </Drawer.Trigger>
                                   <Drawer.Portal>
@@ -71,7 +71,7 @@ export default function ExampleDrawerNested() {
                                             </label>
                                             <input
                                               id="device-name-tw"
-                                              className="w-full border border-neutral-950 bg-white px-2.5 py-2 font-normal text-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+                                              className="w-full border border-neutral-950 bg-white px-2.5 py-2 font-normal text-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                                               defaultValue="Personal laptop"
                                             />
                                           </div>
@@ -85,14 +85,14 @@ export default function ExampleDrawerNested() {
                                             </label>
                                             <textarea
                                               id="notes-tw"
-                                              className="w-full resize-y border border-neutral-950 bg-white px-2.5 py-2 font-normal text-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+                                              className="w-full resize-y border border-neutral-950 bg-white px-2.5 py-2 font-normal text-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                                               defaultValue="Rotate recovery codes and revoke older sessions."
                                               rows={3}
                                             />
                                           </div>
 
                                           <div className="flex justify-end">
-                                            <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                                            <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                                               Done
                                             </Drawer.Close>
                                           </div>
@@ -103,7 +103,7 @@ export default function ExampleDrawerNested() {
                                 </Drawer.Root>
                               </div>
 
-                              <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                              <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                                 Close
                               </Drawer.Close>
                             </div>
@@ -114,7 +114,7 @@ export default function ExampleDrawerNested() {
                   </Drawer.Root>
                 </div>
 
-                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
index 355f42210e2..0811a32b9b3 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
@@ -33,7 +33,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
index a7b787ffd2f..f2d6e7eb02e 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawer() {
   return (
     <Drawer.Root swipeDirection="right" modal={false} disablePointerDismissal>
-      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open non-modal drawer
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -16,7 +16,7 @@ export default function ExampleDrawer() {
                 swipe to dismiss it.
               </Drawer.Description>
               <div className="flex justify-end gap-3">
-                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
index ac6462da191..778e68a2b0e 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
@@ -33,7 +33,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
index 76995a5b251..f267e603634 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawer() {
   return (
     <Drawer.Root>
-      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open bottom drawer
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -19,7 +19,7 @@ export default function ExampleDrawer() {
                 You are all caught up. Good job!
               </Drawer.Description>
               <div className="flex justify-center gap-3">
-                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
index 72782ace27c..f0560da3653 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
@@ -33,7 +33,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
index cc3cd0b5f4b..79c039fe852 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
@@ -14,7 +14,7 @@ const snapPoints = [...VISIBLE_SNAP_POINTS_REM.map(toViewportSnapPoint), 1];
 export default function ExampleDrawerSnapPoints() {
   return (
     <Drawer.Root snapPoints={snapPoints}>
-      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open snap drawer
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -41,7 +41,7 @@ export default function ExampleDrawerSnapPoints() {
                   ))}
                 </div>
                 <div className="flex items-center justify-end gap-3">
-                  <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                  <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                     Close
                   </Drawer.Close>
                 </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
index 007d33172e5..7ec6facaa9a 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
@@ -97,7 +97,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
index 45a94b134ed..ccaa3240d1b 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
@@ -31,7 +31,7 @@ export default function ExampleDrawerSwipeArea() {
                   Swipe from the edge whenever you want to jump back into your playlists.
                 </Drawer.Description>
                 <div className="flex justify-end gap-3">
-                  <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+                  <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                     Close
                   </Drawer.Close>
                 </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
index 135ab0119ba..e536339542c 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
@@ -33,7 +33,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
index 1f452bf20a2..4cd16350af0 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleDrawerUncontained() {
 
   return (
     <Drawer.Root open={open} onOpenChange={setOpen}>
-      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open action sheet
       </Drawer.Trigger>
       <Drawer.Portal>
diff --git a/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
index 52df9e2047a..e4017d04de3 100644
--- a/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
@@ -32,7 +32,7 @@
   }
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
index 8d200747e42..1da8cc48317 100644
--- a/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleField() {
       <Field.Control
         required
         placeholder="Required"
-        className="h-8 self-stretch border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+        className="h-8 self-stretch border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
       />
       <Field.Error className="text-sm text-red-700 dark:text-red-400" match="valueMissing">
         Please enter your name
diff --git a/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
index 2f7e666c776..ecaa2e07e7f 100644
--- a/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
@@ -49,7 +49,7 @@
   }
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx
index 5c4da40a21f..f0c8d431a44 100644
--- a/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleField() {
         </Field.Label>
         <Field.Control
           placeholder="Enter company name"
-          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
       </Field.Root>
 
@@ -24,7 +24,7 @@ export default function ExampleField() {
         </Field.Label>
         <Field.Control
           placeholder="Enter fiscal number"
-          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
       </Field.Root>
     </Fieldset.Root>
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
index 4d4c2e16a05..d1766b42bd3 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
@@ -38,7 +38,7 @@
   }
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -86,7 +86,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
index d1a2d846179..7ee86b109a2 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
@@ -26,7 +26,7 @@ export default function ActionStateForm() {
           required
           defaultValue="admin"
           placeholder="e.g. alice132"
-          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
@@ -34,7 +34,7 @@ export default function ActionStateForm() {
         type="submit"
         disabled={loading}
         focusableWhenDisabled
-        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
index 4d4c2e16a05..d1766b42bd3 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
@@ -38,7 +38,7 @@
   }
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -86,7 +86,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
index f3c03be15d5..52242b7617c 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
@@ -37,7 +37,7 @@ export default function ExampleForm() {
           defaultValue="https://example.com"
           placeholder="https://example.com"
           pattern="https?://.*"
-          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
@@ -45,7 +45,7 @@ export default function ExampleForm() {
         disabled={loading}
         focusableWhenDisabled
         type="submit"
-        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
index 4d4c2e16a05..d1766b42bd3 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
@@ -38,7 +38,7 @@
   }
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -86,7 +86,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
index e8a89c592d3..95257eab2c7 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
@@ -42,7 +42,7 @@ export default function Page() {
         </Field.Label>
         <Field.Control
           placeholder="Enter name"
-          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
@@ -52,13 +52,13 @@ export default function Page() {
         </Field.Label>
         <Field.Control
           placeholder="Enter age"
-          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
       <Button
         type="submit"
-        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
index 5e8923a4821..9f5b8ef79cf 100644
--- a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
@@ -27,7 +27,7 @@
   }
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
index e3ff5f0affb..8c355af1e01 100644
--- a/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleInput() {
       Name
       <Input
         placeholder="e.g. Colm Tuite"
-        className="h-8 w-40 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800"
+        className="h-8 w-40 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white"
       />
     </label>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
index af04d73d228..89ba4962c75 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
@@ -34,7 +34,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -92,7 +92,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
index 0288e38184a..da90f84dc8f 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
@@ -39,7 +39,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
index 09e0c544281..587f33f262d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
@@ -8,7 +8,7 @@ const itemClass =
 export default function MenuArrowDemo() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Song <ChevronDownIcon className="size-3 -mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
index d0203cd47cb..d950484273f 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
@@ -39,7 +39,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index d55902f8f19..c9b0c5c85b2 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleMenu() {
 
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Workspace <ChevronDownIcon className="size-3 -mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
index 3fb52685803..17b0f46e20f 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { Menu } from '@base-ui/react/menu';
 const itemClass =
   "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
 const triggerClass =
-  'flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 active:bg-neutral-100 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
+  'flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white active:bg-neutral-100 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 const popupClass =
   'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
index 7a5dcad566b..b6263185dc7 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
@@ -44,7 +44,7 @@ const triggerClass = `
   dark:border-white dark:bg-neutral-950 dark:text-white
   dark:hover:bg-neutral-900 dark:active:bg-neutral-800 dark:data-popup-open:bg-neutral-800
   focus-visible:outline focus-visible:outline-2
-  focus-visible:-outline-offset-2 focus-visible:outline-blue-800
+  focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white
 `;
 
 const itemClass = `
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
index bdd7ae415d4..5b93ab55d63 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function MenuDetachedTriggersSimpleDemo() {
       <Menu.Trigger
         handle={demoMenu}
         aria-label="Project actions"
-        className="flex size-8 items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         <DotsIcon />
       </Menu.Trigger>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
index 89bd9a8ea8e..a2e3e7d21e1 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
@@ -39,7 +39,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index 410ec500854..dd9976d24a5 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleMenu() {
 
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         View <ChevronDownIcon className="size-3 -mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
index 4a114f858e1..0e0ae0217e8 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
@@ -39,7 +39,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
index 157adbb5bc1..afce8173dd8 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
@@ -7,7 +7,7 @@ const itemClass =
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Song <ChevronDownIcon className="size-3 -mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
index 4a114f858e1..0e0ae0217e8 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
@@ -39,7 +39,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
index f2151225c39..99a469547ff 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleMenu() {
     <Menu.Root>
       <Menu.Trigger
         openOnHover
-        className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         Add to playlist <ChevronDownIcon className="size-3 -mr-1" />
       </Menu.Trigger>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
index c6f60b2fdea..4af152dca19 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
@@ -39,7 +39,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index 0662ad6660f..7e68d2f6e02 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleMenu() {
   const [value, setValue] = React.useState('date');
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Sort <ChevronDownIcon className="size-3 -mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
index 346d3209b19..aafe81f4ddb 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
@@ -39,7 +39,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
index 9e91c6bce4f..def324051f1 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
@@ -12,7 +12,7 @@ const submenuTriggerClass =
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Song <ChevronDownIcon className="size-3 -mr-1" />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
index ddf12792a68..8c9f3475ed5 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
@@ -38,7 +38,7 @@
 
   &:focus-visible {
     background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
index 576744c030a..f97828218e5 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleMenubar() {
   return (
     <Menubar className="flex items-center">
       <Menu.Root>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           File
         </Menu.Trigger>
         <Menu.Portal>
@@ -76,7 +76,7 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           Edit
         </Menu.Trigger>
         <Menu.Portal>
@@ -106,7 +106,7 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           View
         </Menu.Trigger>
         <Menu.Portal>
@@ -169,7 +169,7 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root disabled>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           Help
         </Menu.Trigger>
       </Menu.Root>
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
index 1f62befa100..07a90cbbff9 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
@@ -48,7 +48,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -243,7 +243,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
index 12842e7b93a..a24e00b8a92 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
@@ -104,7 +104,7 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 }
 
 const triggerClassName =
-  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
+  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const contentClassName =
   'h-full p-2 min-[500px]:w-max min-[500px]:max-w-[400px] ' +
@@ -116,7 +116,7 @@ const contentClassName =
   'data-ending-style:data-[activation-direction=right]:translate-x-[-50%]';
 
 const linkCardClassName =
-  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
+  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const overviewLinks = [
   {
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
index 08ee53208f5..37fc8036488 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
@@ -48,7 +48,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -279,7 +279,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -421,7 +421,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
index 7fc88d1b58f..0114964689d 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
@@ -154,7 +154,7 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 }
 
 const triggerClassName =
-  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
+  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const sharedContentClassName =
   'h-full w-[calc(100vw_-_40px)] ' +
@@ -171,7 +171,7 @@ const productContentClassName = `${sharedContentClassName} p-0 min-[700px]:[widt
 const guidesContentClassName = `${sharedContentClassName} p-0 min-[700px]:[width:min(500px,calc(100vw-40px))]`;
 
 const submenuTriggerClassName =
-  'm-0 flex w-full min-w-[10rem] flex-col items-start gap-1 border-0 bg-transparent p-2 text-left text-inherit hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
+  'm-0 flex w-full min-w-[10rem] flex-col items-start gap-1 border-0 bg-transparent p-2 text-left text-inherit hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const submenuContentClassName =
   'flex h-full translate-x-0 flex-col gap-4 p-4 transition-[opacity,translate,filter] duration-[var(--duration)] ease-[var(--easing)] min-[700px]:duration-[calc(var(--duration)*1.35)] min-[700px]:ease-[cubic-bezier(0.16,1,0.3,1)] ' +
@@ -181,4 +181,4 @@ const submenuContentClassName =
   'min-[700px]:data-ending-style:data-[activation-direction=up]:translate-y-[72px] min-[700px]:data-ending-style:data-[activation-direction=down]:translate-y-[-72px]';
 
 const linkCardClassName =
-  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
+  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
index edd36208be3..1c6058c2eff 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
@@ -48,7 +48,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -244,7 +244,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
index c354b0c65a3..09462ad7c69 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
@@ -130,7 +130,7 @@ function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
 }
 
 const triggerClassName =
-  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
+  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const contentTransitionClassName =
   'transition-[opacity,transform,translate] duration-[var(--duration)] ease-[var(--easing)] ' +
@@ -143,7 +143,7 @@ const contentTransitionClassName =
 const contentClassName = `h-full w-[calc(100vw_-_40px)] p-2 min-[500px]:w-max min-[500px]:min-w-[400px] ${contentTransitionClassName}`;
 
 const linkCardClassName =
-  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
+  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const overviewLinks = [
   {
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
index d24aa98f7a7..6929c327eff 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
@@ -47,7 +47,7 @@
 
   &:focus {
     z-index: 1;
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -1px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
index ee1eab1604d..0aa822494d9 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { NumberField } from '@base-ui/react/number-field';
 
 const stepperClasses =
-  'flex h-full w-8 items-center justify-center border border-neutral-950 rounded-none bg-white bg-clip-padding text-neutral-950 outline-0 select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
+  'flex h-full w-8 items-center justify-center border border-neutral-950 rounded-none bg-white bg-clip-padding text-neutral-950 outline-0 select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
 
 export default function ExampleNumberField() {
   const id = React.useId();
@@ -24,7 +24,7 @@ export default function ExampleNumberField() {
         <NumberField.Decrement className={stepperClasses}>
           <MinusIcon className="size-3" />
         </NumberField.Decrement>
-        <NumberField.Input className="h-full w-[7ch] border-y border-neutral-950 rounded-none bg-white px-2 text-left text-sm font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white" />
+        <NumberField.Input className="h-full w-[7ch] border-y border-neutral-950 rounded-none bg-white px-2 text-left text-sm font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:bg-neutral-950 dark:text-white" />
         <NumberField.Increment className={stepperClasses}>
           <PlusIcon className="size-3" />
         </NumberField.Increment>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
index ab50b162bb4..fabb7b194ea 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
@@ -35,7 +35,7 @@
   color: light-dark(var(--color-neutral-950), white);
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
index de97f95090c..330d07adb70 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
@@ -22,7 +22,7 @@ export default function OTPFieldAlphanumericDemo() {
         {Array.from({ length: CODE_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
             aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
           />
         ))}
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
index 8c659d671f8..7bb5fb5d721 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
@@ -35,7 +35,7 @@
   color: light-dark(var(--color-neutral-950), white);
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
index 7d0d11f4563..b8c2fee9aa0 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
@@ -39,7 +39,7 @@
   }
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
index 57e61298df4..4072fd1e992 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
@@ -21,7 +21,7 @@ export default function OTPFieldFocusedPlaceholderDemo() {
         {Array.from({ length: CODE_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 focus:placeholder:text-transparent dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white focus:placeholder:text-transparent dark:border-white dark:text-white dark:placeholder:text-neutral-400"
             placeholder="•"
             aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
           />
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
index 22539771b6a..8a620f0cc9f 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
@@ -41,7 +41,7 @@
   color: light-dark(var(--color-neutral-950), white);
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
index 7d3ca7dfec6..9c974f655d2 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function OTPFieldGroupedDemo() {
           {Array.from({ length: 3 }, (_, index) => (
             <OTPField.Input
               key={index}
-              className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+              className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
               aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}
             />
           ))}
@@ -26,7 +26,7 @@ export default function OTPFieldGroupedDemo() {
           {Array.from({ length: 3 }, (_, index) => (
             <OTPField.Input
               key={index + 3}
-              className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+              className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
               aria-label={`Character ${index + 4} of ${OTP_LENGTH}`}
             />
           ))}
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
index 4bdd7c92266..c485f8de819 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
@@ -35,7 +35,7 @@
   color: light-dark(var(--color-neutral-950), white);
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
index d22c9f578ba..3418c0b16e4 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
@@ -21,7 +21,7 @@ export default function ExampleOTPField() {
         {Array.from({ length: OTP_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
             aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}
           />
         ))}
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
index ab50b162bb4..fabb7b194ea 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
@@ -35,7 +35,7 @@
   color: light-dark(var(--color-neutral-950), white);
 
   &:focus {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
index 7daea7ad7ce..084bace60cf 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
@@ -22,7 +22,7 @@ export default function OTPFieldPasswordDemo() {
         {Array.from({ length: CODE_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:text-white"
+            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
             aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
           />
         ))}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
index 6c692e30c52..2b9ebbd3c4c 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
@@ -138,7 +138,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
index d620982bd44..0d749c8bdac 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { Popover } from '@base-ui/react/popover';
 const demoPopover = Popover.createHandle();
 
 const triggerClassName =
-  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
 
 export default function PopoverDetachedTriggersControlledDemo() {
   const [open, setOpen] = React.useState(false);
@@ -33,7 +33,7 @@ export default function PopoverDetachedTriggersControlledDemo() {
 
         <button
           type="button"
-          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
index 7bb0f45cd95..c8ee245deaa 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
@@ -232,7 +232,7 @@
       }
 
       &:focus-visible {
-        outline: 2px solid var(--color-blue-800);
+        outline: 2px solid light-dark(var(--color-neutral-950), white);
         outline-offset: 2px;
       }
     }
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
index 30a6789ee0b..12a22b4f98a 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
@@ -6,7 +6,7 @@ import { Avatar } from '@base-ui/react/avatar';
 const demoPopover = Popover.createHandle<React.ComponentType>();
 
 const triggerClassName =
-  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
 
 export default function PopoverDetachedTriggersFullDemo() {
   return (
@@ -103,13 +103,13 @@ function ProfilePanel() {
       <div className="col-start-1 col-end-3 row-start-3 row-end-4 flex flex-col gap-2 pt-2 text-sm">
         <a
           href="#"
-          className="text-neutral-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="text-neutral-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
           Profile settings
         </a>
         <a
           href="#"
-          className="text-neutral-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="text-neutral-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
           Log out
         </a>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
index 225ea103306..ef26346ea26 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { Popover } from '@base-ui/react/popover';
 const demoPopover = Popover.createHandle();
 
 const triggerClassName =
-  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
 
 export default function PopoverDetachedTriggersSimpleDemo() {
   return (
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
index d563473d70f..40bd3ec2fde 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
@@ -1,7 +1,7 @@
 import { Popover } from '@base-ui/react/popover';
 
 const triggerClassName =
-  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
 
 export default function ExamplePopover() {
   return (
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
index 535055b8727..b1b53f8a84c 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
@@ -1,7 +1,7 @@
 import { Popover } from '@base-ui/react/popover';
 
 const triggerClassName =
-  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800';
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
 
 export default function ExamplePopover() {
   return (
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
index 0ae60bed7b2..a8b57628ae5 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -67,7 +67,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
         <p className="m-0 text-base text-neutral-950 text-balance dark:text-white">
           Discover{' '}
           <PreviewCard.Trigger
-            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
             handle={demoPreviewCard}
             href="https://en.wikipedia.org/wiki/Typography"
             id="trigger-1"
@@ -77,7 +77,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
           </PreviewCard.Trigger>
           ,{' '}
           <PreviewCard.Trigger
-            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
             handle={demoPreviewCard}
             href="https://en.wikipedia.org/wiki/Industrial_design"
             id="trigger-2"
@@ -87,7 +87,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
           </PreviewCard.Trigger>
           , or{' '}
           <PreviewCard.Trigger
-            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
             handle={demoPreviewCard}
             href="https://en.wikipedia.org/wiki/Art"
             id="trigger-3"
@@ -99,7 +99,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
         </p>
         <button
           type="button"
-          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
index a1bbea1c863..ef591b71d40 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
@@ -174,7 +174,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
     text-decoration-line: none;
   }
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
index 9a8612aeb7e..a10dca29097 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
@@ -58,7 +58,7 @@ export default function PreviewCardDetachedTriggersFullDemo() {
       <p className="m-0 text-base text-neutral-950 text-balance dark:text-white">
         Discover{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
           handle={demoPreviewCard}
           href="https://en.wikipedia.org/wiki/Typography"
           payload={cardContents.typography}
@@ -67,7 +67,7 @@ export default function PreviewCardDetachedTriggersFullDemo() {
         </PreviewCard.Trigger>
         ,{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
           handle={demoPreviewCard}
           href="https://en.wikipedia.org/wiki/Design"
           payload={cardContents.design}
@@ -76,7 +76,7 @@ export default function PreviewCardDetachedTriggersFullDemo() {
         </PreviewCard.Trigger>
         , or{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
           handle={demoPreviewCard}
           href="https://en.wikipedia.org/wiki/Art"
           payload={cardContents.art}
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
index a69181959f5..9526e59d732 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function PreviewCardDetachedTriggersSimpleDemo() {
       <p className="m-0 text-base text-neutral-950 text-balance dark:text-white">
         The principles of good{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
           handle={demoPreviewCard}
           href="https://en.wikipedia.org/wiki/Typography"
         >
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
index 39541eed01f..808ffec446e 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExamplePreviewCard() {
       <p className="m-0 text-base text-neutral-950 text-balance dark:text-white">
         The principles of good{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
           href="https://en.wikipedia.org/wiki/Typography"
         >
           typography
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
index c3b5e4784b0..41f40fe6e72 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
@@ -130,7 +130,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
     text-decoration-line: none;
   }
@@ -173,7 +173,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
index cb50de11e44..ad4b8128aad 100644
--- a/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
@@ -42,7 +42,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
index 9571546c739..60ab9ef79ff 100644
--- a/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/radio/demos/hero/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function ExampleRadioGroup() {
       <label className="flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white">
         <Radio.Root
           value="fuji-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
           <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>
@@ -28,7 +28,7 @@ export default function ExampleRadioGroup() {
       <label className="flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white">
         <Radio.Root
           value="gala-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
           <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>
@@ -38,7 +38,7 @@ export default function ExampleRadioGroup() {
       <label className="flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white">
         <Radio.Root
           value="granny-smith-apple"
-          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+          className="flex size-4 shrink-0 items-center justify-center border rounded-full p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
           <Radio.Indicator className="flex items-center justify-center data-unchecked:hidden before:size-2 before:rounded-full before:bg-current" />
         </Radio.Root>
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
index dee4693ce97..6fcfe00aef4 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
@@ -11,7 +11,7 @@
   border: 1px solid light-dark(var(--color-neutral-950), white);
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
index 9ff3f40a14d..5d9d8480880 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function ExampleScrollAreaBoth() {
   return (
     <ScrollArea.Root className="h-80 w-80 max-w-[calc(100vw-8rem)]">
-      <ScrollArea.Viewport className="h-full border border-neutral-950 dark:border-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <ScrollArea.Viewport className="h-full border border-neutral-950 dark:border-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         <ScrollArea.Content className="pt-3 pr-6 pb-6 pl-3">
           <ul className="m-0 grid list-none grid-cols-[repeat(10,6.25rem)] grid-rows-[repeat(10,6.25rem)] gap-3 p-0">
             {Array.from({ length: 100 }, (_, i) => (
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
index f70e5605550..bf1c32f6118 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
@@ -12,7 +12,7 @@
   border: 1px solid light-dark(var(--color-neutral-950), white);
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
index aebc85f917a..a6b2e795895 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function ExampleScrollArea() {
   return (
     <ScrollArea.Root className="h-[8.5rem] w-96 max-w-[calc(100vw-8rem)] bg-white dark:bg-neutral-950">
-      <ScrollArea.Viewport className="h-full border border-neutral-950 dark:border-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <ScrollArea.Viewport className="h-full border border-neutral-950 dark:border-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         <ScrollArea.Content className="flex flex-col gap-4 py-2 pr-5 pl-3 text-sm leading-[1.375rem] text-neutral-950 dark:text-white">
           <p>
             Vernacular architecture is building done outside any academic tradition, and without
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
index b2eb59247c5..af3883a7fe7 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
@@ -20,7 +20,7 @@
   mask-repeat: no-repeat;
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
index 7be8bbce965..e11393a63eb 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function ExampleScrollAreaScrollFade() {
   return (
     <ScrollArea.Root className="h-48 w-96 max-w-[calc(100vw-8rem)] bg-neutral-100 dark:bg-neutral-800">
-      <ScrollArea.Viewport className="h-full bg-neutral-100 dark:bg-neutral-800 mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] mask-no-repeat focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+      <ScrollArea.Viewport className="h-full bg-neutral-100 dark:bg-neutral-800 mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] mask-no-repeat focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         <ScrollArea.Content className="flex flex-col gap-4 py-2 pr-5 pl-3 text-sm leading-[1.375rem] text-neutral-950 dark:text-white">
           <p>
             Vernacular architecture is building done outside any academic tradition, and without
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index 97cb6afcec8..8a580a584a3 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -59,7 +59,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index 2082c3f2d60..7936c1462b4 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleSelectGrouped() {
         Produce
       </Field.Label>
       <Select.Root items={groupedProduce}>
-        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-2 pr-2 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-2 pr-2 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           <Select.Value
             className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400"
             placeholder="Select produce"
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
index 9c01c461adc..697d678b32b 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
@@ -59,7 +59,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index fce08b921fe..20f4c315156 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function ExampleSelect() {
         <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Apple
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-2 pr-2 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-2 pr-2 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           <Select.Value
             className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400"
             placeholder="Select apple"
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
index a741dd73fdf..0c6e6eec134 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
@@ -59,7 +59,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index eda5496edc7..dc63b4c2a45 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -36,7 +36,7 @@ export default function MultiSelectExample() {
         <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Languages
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-2 pr-2 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-2 pr-2 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           <Select.Value className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400">
             {renderValue}
           </Select.Value>
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
index 28557a8d134..41b9d1a9991 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
@@ -56,7 +56,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index fc16e33d9b3..b427fe8ef1c 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ObjectValueSelect() {
         <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Shipping method
         </Select.Label>
-        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-start justify-between gap-3 pl-2 pr-2 py-1.5 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-start justify-between gap-3 pl-2 pr-2 py-1.5 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           <Select.Value>
             {(method: ShippingMethod) => (
               <span className="flex flex-col items-start gap-0.5">
diff --git a/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css
index 67245cd31b9..7c30f3d9cbc 100644
--- a/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css
@@ -25,7 +25,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: 2px;
     text-decoration-line: none;
   }
diff --git a/docs/src/app/(docs)/react/components/separator/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/separator/demos/hero/tailwind/index.tsx
index bc29b2d06a1..7b68dbaf468 100644
--- a/docs/src/app/(docs)/react/components/separator/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/separator/demos/hero/tailwind/index.tsx
@@ -5,25 +5,25 @@ export default function ExampleSeparator() {
     <div className="flex gap-4 text-nowrap">
       <a
         href="#"
-        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-neutral-700"
+        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:decoration-neutral-700"
       >
         Home
       </a>
       <a
         href="#"
-        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-neutral-700"
+        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:decoration-neutral-700"
       >
         Pricing
       </a>
       <a
         href="#"
-        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-neutral-700"
+        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:decoration-neutral-700"
       >
         Blog
       </a>
       <a
         href="#"
-        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-neutral-700"
+        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:decoration-neutral-700"
       >
         Support
       </a>
@@ -32,13 +32,13 @@ export default function ExampleSeparator() {
 
       <a
         href="#"
-        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-neutral-700"
+        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:decoration-neutral-700"
       >
         Log in
       </a>
       <a
         href="#"
-        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:decoration-neutral-700"
+        className="text-sm text-neutral-950 decoration-neutral-300 decoration-1 underline-offset-2 hover:underline focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:decoration-neutral-700"
       >
         Sign up
       </a>
diff --git a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css
index 02b56d09b77..4c173969a4f 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css
@@ -29,7 +29,7 @@
   user-select: none;
 
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx
index a71ebd023e8..19dc17339c3 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function EdgeAlignedThumb() {
       <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
         <Slider.Track className="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800">
           <Slider.Indicator className="bg-neutral-950 select-none dark:bg-white" />
-          <Slider.Thumb className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950" />
+          <Slider.Thumb className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950" />
         </Slider.Track>
       </Slider.Control>
     </Slider.Root>
diff --git a/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css
index 02b56d09b77..4c173969a4f 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css
@@ -29,7 +29,7 @@
   user-select: none;
 
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx
index 837c2a234e0..fe597859db3 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/hero/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleSlider() {
           <Slider.Indicator className="bg-neutral-950 select-none dark:bg-white" />
           <Slider.Thumb
             aria-label="Volume"
-            className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950"
+            className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950"
           />
         </Slider.Track>
       </Slider.Control>
diff --git a/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css
index 02b56d09b77..4c173969a4f 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css
@@ -29,7 +29,7 @@
   user-select: none;
 
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx
index 6e0158d0896..1b684376880 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/range-slider/tailwind/index.tsx
@@ -9,12 +9,12 @@ export default function RangeSlider() {
           <Slider.Thumb
             index={0}
             aria-label="Minimum value"
-            className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950"
+            className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950"
           />
           <Slider.Thumb
             index={1}
             aria-label="Maximum value"
-            className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950"
+            className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950"
           />
         </Slider.Track>
       </Slider.Control>
diff --git a/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css
index 6f91917db3d..91386b8f60a 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css
@@ -34,7 +34,7 @@
   user-select: none;
 
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx b/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx
index f599f735618..3c6125064b6 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/slider/demos/vertical/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function VerticalSlider() {
           <Slider.Indicator className="bg-neutral-950 select-none dark:bg-white" />
           <Slider.Thumb
             aria-label="Volume"
-            className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950"
+            className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950"
           />
         </Slider.Track>
       </Slider.Control>
diff --git a/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
index 470df7ca8f6..1eebdec5cd4 100644
--- a/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
@@ -23,7 +23,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
index f871469dc4d..25f11a7b406 100644
--- a/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
@@ -5,7 +5,7 @@ export default function ExampleSwitch() {
     <label className="flex items-center gap-2 text-sm font-normal text-neutral-900 dark:text-neutral-50">
       <Switch.Root
         defaultChecked
-        className="flex h-5 w-9 shrink-0 border border-neutral-900 bg-neutral-50 p-0.5 dark:border-neutral-50 dark:bg-neutral-900 data-checked:bg-neutral-900 dark:data-checked:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-5 w-9 shrink-0 border border-neutral-900 bg-neutral-50 p-0.5 dark:border-neutral-50 dark:bg-neutral-900 data-checked:bg-neutral-900 dark:data-checked:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         <Switch.Thumb className="size-3.5 bg-neutral-900 transition-transform duration-150 data-checked:translate-x-4 data-checked:bg-neutral-50 dark:bg-neutral-50 dark:data-checked:bg-neutral-900" />
       </Switch.Root>
diff --git a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
index 54a933510b6..579ff4f40b6 100644
--- a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
@@ -44,7 +44,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -93,7 +93,7 @@
   background-color: light-dark(white, var(--color-neutral-950));
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
     z-index: 1;
   }
diff --git a/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
index f739dc7c28c..31e77ddfc70 100644
--- a/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
@@ -1,10 +1,10 @@
 import { Tabs } from '@base-ui/react/tabs';
 
 const tabClassName =
-  'flex h-[calc(2rem+1px)] items-center justify-center bg-transparent px-2 py-0 font-inherit text-sm font-normal leading-5 break-keep whitespace-nowrap text-neutral-600 outline-none select-none hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 data-active:text-neutral-950 dark:text-neutral-300 dark:hover:text-white dark:data-active:text-white';
+  'flex h-[calc(2rem+1px)] items-center justify-center bg-transparent px-2 py-0 font-inherit text-sm font-normal leading-5 break-keep whitespace-nowrap text-neutral-600 outline-none select-none hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-active:text-neutral-950 dark:text-neutral-300 dark:hover:text-white dark:data-active:text-white';
 
 const panelClassName =
-  'col-start-1 row-start-1 flex w-full items-center justify-center bg-white p-4 text-center text-sm text-neutral-950 outline-none focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:bg-neutral-950 dark:text-white [[hidden]]:hidden';
+  'col-start-1 row-start-1 flex w-full items-center justify-center bg-white p-4 text-center text-sm text-neutral-950 outline-none focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:bg-neutral-950 dark:text-white [[hidden]]:hidden';
 
 export default function ExampleTabs() {
   return (
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
index b3a9e0da252..5147f78a2a3 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
@@ -34,7 +34,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -213,7 +213,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -327,7 +327,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -364,7 +364,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index 9ace4a584b4..4e8bab8df62 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -35,7 +35,7 @@ function StackedToastButton() {
   return (
     <button
       type="button"
-      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       onClick={createToast}
     >
       Stacked toast
@@ -68,7 +68,7 @@ function CopyButton() {
       <Tooltip.Trigger
         ref={buttonRef}
         closeOnClick={false}
-        className="flex h-8 w-8 items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex h-8 w-8 items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         onClick={handleCopy}
         aria-label="Copy to clipboard"
         render={<Button disabled={copied} focusableWhenDisabled />}
@@ -100,7 +100,7 @@ function AnchoredToasts() {
           >
             <Toast.Root
               toast={toast}
-              className="flex w-max origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+              className="flex w-max origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
             >
               <Toast.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
               <Toast.Content>
@@ -130,7 +130,7 @@ function StackedToasts() {
                 <Toast.Title className="text-sm font-bold" />
                 <Toast.Description className="text-sm" />
               </div>
-              <Toast.Close className="flex h-8 shrink-0 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+              <Toast.Close className="flex h-8 shrink-0 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                 Dismiss
               </Toast.Close>
             </Toast.Content>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
index 8ba4e7e4d9d..34b60eb54b0 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
@@ -172,7 +172,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -208,7 +208,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
index 077e6e8c58b..da656d9f068 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
@@ -184,7 +184,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -220,7 +220,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
index 8ba4e7e4d9d..34b60eb54b0 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
@@ -172,7 +172,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -208,7 +208,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
index ac874358a0e..97bd810f86a 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
@@ -30,7 +30,7 @@ function ToastButton() {
   return (
     <button
       type="button"
-      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       onClick={createToast}
     >
       Create toast
@@ -51,7 +51,7 @@ function ToastList() {
           <Toast.Title className="text-sm font-bold" />
           <Toast.Description className="text-sm" />
         </div>
-        <Toast.Close className="flex h-8 shrink-0 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Toast.Close className="flex h-8 shrink-0 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           Dismiss
         </Toast.Close>
       </Toast.Content>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
index bf258d72d1b..e393a123a7c 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
@@ -167,7 +167,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -203,7 +203,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
index 873dedda7a3..c5fe910806d 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
@@ -30,7 +30,7 @@ function ToastButton() {
   return (
     <button
       type="button"
-      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       onClick={createToast}
     >
       Create toast
@@ -52,7 +52,7 @@ function ToastList() {
           <Toast.Title className="text-sm font-bold" />
           <Toast.Description className="text-sm" />
         </div>
-        <Toast.Close className="flex h-8 shrink-0 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800">
+        <Toast.Close className="flex h-8 shrink-0 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           Dismiss
         </Toast.Close>
       </Toast.Content>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
index e379474d682..96f1b6a391b 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
@@ -180,7 +180,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -216,7 +216,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
index b51fb906f44..091648e8227 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
@@ -178,7 +178,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -214,7 +214,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
index 992aa3d9c9c..e87fc822295 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
@@ -172,7 +172,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -208,7 +208,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
index 90b13e6244b..b610a1fb093 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
@@ -43,7 +43,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
index 69396c7cbc2..ecb4c9d2661 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/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 border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         <AlignLeftIcon className="size-4" />
       </Toggle>
       <Toggle
         aria-label="Align center"
         value="center"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         <AlignCenterIcon className="size-4" />
       </Toggle>
       <Toggle
         aria-label="Align right"
         value="right"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         <AlignRightIcon className="size-4" />
       </Toggle>
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
index 90b13e6244b..b610a1fb093 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
@@ -43,7 +43,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
index 44e4c1c5a1a..82fc2390500 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
@@ -12,21 +12,21 @@ export default function ExampleToggleGroupMultiple() {
       <Toggle
         aria-label="Bold"
         value="bold"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         <BoldIcon className="size-4" />
       </Toggle>
       <Toggle
         aria-label="Italic"
         value="italic"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         <ItalicIcon className="size-4" />
       </Toggle>
       <Toggle
         aria-label="Underline"
         value="underline"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         <UnderlineIcon className="size-4" />
       </Toggle>
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
index 6e12b5cf8f9..e1c84008872 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
@@ -28,7 +28,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
index abcf6f36b27..ab067df3a5a 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleToggle() {
   return (
     <Toggle
       aria-label="Favorite"
-      className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-50 dark:hover:not-data-disabled:bg-neutral-900 active:not-data-disabled:bg-neutral-100 dark:active:not-data-disabled:bg-neutral-800 data-pressed:text-neutral-950 dark:data-pressed:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+      className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-50 dark:hover:not-data-disabled:bg-neutral-900 active:not-data-disabled:bg-neutral-100 dark:active:not-data-disabled:bg-neutral-800 data-pressed:text-neutral-950 dark:data-pressed:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       render={(props, state) => {
         if (state.pressed) {
           return (
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
index 0f3b7ca95e3..58542c2f5b7 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
@@ -71,7 +71,7 @@
 
   &:focus-visible {
     background-color: transparent;
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -100,7 +100,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
index 2c2180c789d..ab2332afa3e 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleToolbar() {
           render={<Toggle />}
           aria-label="Align left"
           value="align-left"
-          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent px-3 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent px-3 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
           Align Left
         </Toolbar.Button>
@@ -20,7 +20,7 @@ export default function ExampleToolbar() {
           render={<Toggle />}
           aria-label="Align right"
           value="align-right"
-          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent px-3 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent px-3 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
           Align Right
         </Toolbar.Button>
@@ -28,13 +28,13 @@ export default function ExampleToolbar() {
       <Toolbar.Separator className="m-1 h-4 w-px bg-neutral-950 dark:bg-white" />
       <Toolbar.Group className="flex" aria-label="Numerical format">
         <Toolbar.Button
-          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           aria-label="Format as currency"
         >
           $
         </Toolbar.Button>
         <Toolbar.Button
-          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-8 items-center justify-center gap-2 border-0 bg-transparent font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           aria-label="Format as percent"
         >
           %
@@ -44,7 +44,7 @@ export default function ExampleToolbar() {
       <Select.Root defaultValue="Helvetica">
         <Toolbar.Button
           render={<Select.Trigger />}
-          className="flex h-8 min-w-32 cursor-default items-center justify-between gap-2 border-0 bg-transparent px-2 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+          className="flex h-8 min-w-32 cursor-default items-center justify-between gap-2 border-0 bg-transparent px-2 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
           <Select.Value />
           <Select.Icon className="flex">
@@ -78,7 +78,7 @@ export default function ExampleToolbar() {
       </Select.Root>
       <Toolbar.Separator className="m-1 h-4 w-px bg-neutral-950 dark:bg-white" />
       <Toolbar.Link
-        className="mr-[0.875rem] ml-auto flex-none self-center font-[inherit] text-sm text-neutral-500 no-underline hover:text-blue-700 dark:text-neutral-400 dark:hover:text-blue-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800"
+        className="mr-[0.875rem] ml-auto flex-none self-center font-[inherit] text-sm text-neutral-500 no-underline hover:text-blue-700 dark:text-neutral-400 dark:hover:text-blue-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         href="#"
       >
         Edited 51m ago
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
index fe723799e66..eebc45f4306 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -6,10 +6,10 @@ import { InfoIcon } from '../../icons-tw';
 const demoTooltip = Tooltip.createHandle();
 
 const iconButtonClass =
-  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
+  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const buttonClass =
-  'flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
+  'flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
   'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
index 45bbb8c8119..5d0d3ba6fb1 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
@@ -44,7 +44,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
index 76fb3528df9..c226da67830 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
@@ -6,7 +6,7 @@ import { InfoIcon, HelpIcon, AlertIcon } from '../../icons-tw';
 const demoTooltip = Tooltip.createHandle<React.ComponentType>();
 
 const triggerClass =
-  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
+  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const arrowClass =
   "relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
index e9dce4748d0..b58718208a7 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
@@ -6,7 +6,7 @@ import { InfoIcon } from '../../icons-tw';
 const demoTooltip = Tooltip.createHandle();
 
 const triggerClass =
-  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
+  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
   'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
index c2647a21fea..f7d1a79e648 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
@@ -34,7 +34,7 @@
 
   &:focus-visible {
     background-color: transparent;
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
index 51da5436b0e..9ba4b66a076 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Tooltip } from '@base-ui/react/tooltip';
 
 const triggerClass =
-  'flex size-8 items-center justify-center border-0 bg-transparent text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 hover:bg-neutral-50 active:bg-neutral-100 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
+  'flex size-8 items-center justify-center border-0 bg-transparent text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-50 active:bg-neutral-100 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
   'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
index 967f717ceef..84ef8c260fd 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
@@ -47,7 +47,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -170,7 +170,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css
index 756c6600aef..2a10772d60f 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css
@@ -31,7 +31,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css
index 756c6600aef..2a10772d60f 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css
@@ -31,7 +31,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
index fe482a30a08..7189e94556a 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
@@ -34,7 +34,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
index 143025a8be4..1d7fa72c08d 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
@@ -14,7 +14,7 @@ export const Input = React.forwardRef<HTMLInputElement, Autocomplete.Input.Props
     <Autocomplete.Input
       ref={forwardedRef}
       className={clsx(
-        'h-8 w-[16rem] border border-neutral-950 bg-white px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 md:w-[20rem] dark:border-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400',
+        'h-8 w-[16rem] border border-neutral-950 bg-white px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white md:w-[20rem] dark:border-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx
index a0690a40afa..f8434d435d1 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx
@@ -7,7 +7,7 @@ export function Button({ className, ...props }: React.ComponentPropsWithoutRef<'
     <BaseButton
       type="button"
       className={clsx(
-        'flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:disabled:border-neutral-400 dark:disabled:text-neutral-400',
+        'flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:disabled:border-neutral-400 dark:disabled:text-neutral-400',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox.tsx
index 1033d11f240..cca60b9ae34 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/checkbox.tsx
@@ -6,7 +6,7 @@ export function Root({ className, ...props }: Checkbox.Root.Props) {
   return (
     <Checkbox.Root
       className={clsx(
-        'flex size-4 shrink-0 items-center justify-center rounded-none border border-neutral-950 bg-white p-0 text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-checked:bg-neutral-950 data-checked:text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 dark:data-checked:bg-white dark:data-checked:text-neutral-950',
+        'flex size-4 shrink-0 items-center justify-center rounded-none border border-neutral-950 bg-white p-0 text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-checked:bg-neutral-950 data-checked:text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 dark:data-checked:bg-white dark:data-checked:text-neutral-950',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
index 13db57f4620..b09c5c17400 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
@@ -26,7 +26,7 @@ export function InputGroup({ className, ...props }: Combobox.InputGroup.Props) {
   return (
     <Combobox.InputGroup
       className={clsx(
-        'relative h-8 w-64 border border-neutral-950 bg-white focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-800 dark:border-white dark:bg-neutral-950 [&>input]:pr-[2.5rem] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]',
+        'relative h-8 w-64 border border-neutral-950 bg-white focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-neutral-950 dark:focus-within:outline-white dark:border-white dark:bg-neutral-950 [&>input]:pr-[2.5rem] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx
index 4a11f297f16..f8df1fad00c 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx
@@ -36,7 +36,7 @@ export const Control = React.forwardRef<HTMLInputElement, Field.Control.Props>(
       <Field.Control
         ref={forwardedRef}
         className={clsx(
-          'h-8 w-full max-w-xs border border-neutral-950 bg-white px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400',
+          'h-8 w-full max-w-xs border border-neutral-950 bg-white px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400',
           className,
         )}
         {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
index bcf9ccfe7c4..56e91d3b289 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
@@ -16,7 +16,7 @@ export function Decrement({ className, ...props }: NumberField.Decrement.Props)
   return (
     <NumberField.Decrement
       className={clsx(
-        'flex h-full w-8 items-center justify-center rounded-none border border-neutral-950 bg-white bg-clip-padding text-neutral-950 outline-0 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400',
+        'flex h-full w-8 items-center justify-center rounded-none border border-neutral-950 bg-white bg-clip-padding text-neutral-950 outline-0 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400',
         className,
       )}
       {...props}
@@ -32,7 +32,7 @@ export const Input = React.forwardRef<HTMLInputElement, NumberField.Input.Props>
     <NumberField.Input
       ref={forwardedRef}
       className={clsx(
-        'h-full w-16 rounded-none border-y border-neutral-950 bg-white px-2 text-sm font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white',
+        'h-full w-16 rounded-none border-y border-neutral-950 bg-white px-2 text-sm font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:bg-neutral-950 dark:text-white',
         className,
       )}
       {...props}
@@ -44,7 +44,7 @@ export function Increment({ className, ...props }: NumberField.Increment.Props)
   return (
     <NumberField.Increment
       className={clsx(
-        'flex h-full w-8 items-center justify-center rounded-none border border-neutral-950 bg-white bg-clip-padding text-neutral-950 outline-0 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400',
+        'flex h-full w-8 items-center justify-center rounded-none border border-neutral-950 bg-white bg-clip-padding text-neutral-950 outline-0 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/radio.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/radio.tsx
index 501b0dcdd84..a0f5ef8a952 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/radio.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/radio.tsx
@@ -6,7 +6,7 @@ export function Root({ className, ...props }: Radio.Root.Props) {
   return (
     <Radio.Root
       className={clsx(
-        'flex size-4 shrink-0 items-center justify-center rounded-full border border-neutral-950 bg-white p-0 text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-checked:bg-neutral-950 data-checked:text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 dark:data-checked:bg-white dark:data-checked:text-neutral-950',
+        'flex size-4 shrink-0 items-center justify-center rounded-full border border-neutral-950 bg-white p-0 text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-checked:bg-neutral-950 data-checked:text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 dark:data-checked:bg-white dark:data-checked:text-neutral-950',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
index e1f3ba80cd1..3ee1c16a2eb 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
@@ -22,7 +22,7 @@ export function Trigger({ className, ...props }: Select.Trigger.Props) {
   return (
     <Select.Trigger
       className={clsx(
-        'flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white px-2 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800',
+        'flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white px-2 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/slider.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/slider.tsx
index 983be928f21..0f5965b1927 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/slider.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/slider.tsx
@@ -46,7 +46,7 @@ export function Thumb({ className, ...props }: Slider.Thumb.Props) {
   return (
     <Slider.Thumb
       className={clsx(
-        'size-4 border border-neutral-950 bg-white select-none has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-blue-800 dark:border-white dark:bg-neutral-950',
+        'size-4 border border-neutral-950 bg-white select-none has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx
index c4ce36e69ba..a975b966bf8 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx
@@ -6,7 +6,7 @@ export function Root({ className, ...props }: Switch.Root.Props) {
   return (
     <Switch.Root
       className={clsx(
-        'flex h-5 w-9 shrink-0 border border-neutral-900 bg-neutral-50 p-0.5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800 data-checked:bg-neutral-900 dark:border-neutral-50 dark:bg-neutral-900 dark:data-checked:bg-neutral-50',
+        'flex h-5 w-9 shrink-0 border border-neutral-900 bg-neutral-50 p-0.5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-checked:bg-neutral-900 dark:border-neutral-50 dark:bg-neutral-900 dark:data-checked:bg-neutral-50',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
index a54ff3c5b8e..97df3e6db42 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
@@ -20,7 +20,7 @@ function Toasts() {
           <pre className="whitespace-pre-wrap">{JSON.stringify(toast.data, null, 2)}</pre>
         </div>
         <Toast.Close
-          className="absolute top-2 right-2 flex size-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-800 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700"
+          className="absolute top-2 right-2 flex size-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700"
           aria-label="Close"
         >
           <XIcon className="size-5" />
diff --git a/docs/src/app/(docs)/react/handbook/styling/page.mdx b/docs/src/app/(docs)/react/handbook/styling/page.mdx
index 45f0d4dad57..ad9173d34ef 100644
--- a/docs/src/app/(docs)/react/handbook/styling/page.mdx
+++ b/docs/src/app/(docs)/react/handbook/styling/page.mdx
@@ -71,7 +71,7 @@ import { Menu } from '@base-ui/react/menu';
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-10 items-center justify-center gap-2 rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base leading-none whitespace-nowrap font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-neutral-100 data-popup-open:bg-neutral-100">
+      <Menu.Trigger className="flex h-10 items-center justify-center gap-2 rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base leading-none whitespace-nowrap font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white active:bg-neutral-100 data-popup-open:bg-neutral-100">
         Song
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css
index 02b56d09b77..4c173969a4f 100644
--- a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css
@@ -29,7 +29,7 @@
   user-select: none;
 
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: 2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/tailwind/index.tsx
index a4cccc195e1..ba3175820a0 100644
--- a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleDirectionProvider() {
           <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
             <Slider.Track className="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800">
               <Slider.Indicator className="bg-neutral-950 select-none dark:bg-white" />
-              <Slider.Thumb className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950" />
+              <Slider.Thumb className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950" />
             </Slider.Track>
           </Slider.Control>
         </Slider.Root>
diff --git a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
index 6ec74de4e40..55f064a52a8 100644
--- a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
@@ -38,7 +38,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
@@ -72,7 +72,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }
diff --git a/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
index 5ece4a60a9a..c660dd7a7c7 100644
--- a/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
@@ -29,7 +29,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
 }

From 5d06f3157fc96ba10361ad7a7e29c7512f795162 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 11 May 2026 09:34:21 +0200
Subject: [PATCH 163/257] Remove unused CSS

---
 .../demos/fuzzy-matching/css-modules/index.module.css         | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
index cea43c24697..b689e6ffdc4 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
@@ -122,7 +122,3 @@
   color: light-dark(var(--color-blue-800), var(--color-blue-500));
   font-weight: 700;
 }
-
-.ItemCategory mark {
-  color: var(--color-blue-800);
-}

From 40b0235a7473a1269184bef4e53a419bc826e243 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 11 May 2026 11:26:54 +0200
Subject: [PATCH 164/257] ScrollArea: make scrollbar thinner

---
 .../css-modules/index.module.css              |  9 +------
 .../demos/command-palette/tailwind/index.tsx  |  2 +-
 .../css-modules/index.module.css              |  9 +------
 .../demos/inside-scroll/tailwind/index.tsx    |  2 +-
 .../css-modules/index.module.css              |  2 +-
 .../demos/outside-scroll/tailwind/index.tsx   |  2 +-
 .../mobile-nav/css-modules/index.module.css   | 10 --------
 .../demos/mobile-nav/tailwind/index.tsx       |  2 +-
 .../demos/both/css-modules/index.module.css   | 24 ++-----------------
 .../scroll-area/demos/both/tailwind/index.tsx |  4 ++--
 .../demos/hero/css-modules/index.module.css   |  9 +------
 .../scroll-area/demos/hero/tailwind/index.tsx |  2 +-
 .../scroll-fade/css-modules/index.module.css  |  9 +------
 .../demos/scroll-fade/tailwind/index.tsx      |  2 +-
 14 files changed, 15 insertions(+), 73 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
index 84d4509f77c..c7722625f2e 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
@@ -226,7 +226,7 @@
   display: flex;
   justify-content: center;
   background-color: light-dark(rgb(0 0 0 / 12%), rgb(255 255 255 / 12%));
-  width: 1rem;
+  width: 0.5rem;
   opacity: 0;
   transition: opacity 150ms;
   pointer-events: none;
@@ -240,13 +240,6 @@
     opacity: 1;
     pointer-events: auto;
   }
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: 1.25rem;
-    height: 100%;
-  }
 }
 
 .ScrollbarThumb {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
index ffa8ab66a2e..e5d1d7c1e27 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
@@ -75,7 +75,7 @@ export default function ExampleAutocompleteCommandPalette() {
                     </Autocomplete.List>
                   </ScrollArea.Content>
                 </ScrollArea.Viewport>
-                <ScrollArea.Scrollbar className="flex w-4 justify-center bg-black/12 opacity-0 transition-opacity pointer-events-none before:absolute before:h-full before:w-5 before:content-[''] data-hovering:opacity-100 data-hovering:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-scrolling:pointer-events-auto dark:bg-white/12">
+                <ScrollArea.Scrollbar className="flex w-2 justify-center bg-black/12 opacity-0 transition-opacity pointer-events-none data-hovering:opacity-100 data-hovering:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-scrolling:pointer-events-auto dark:bg-white/12">
                   <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
                 </ScrollArea.Scrollbar>
               </ScrollArea.Root>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
index 957c500cc7a..50639fe938c 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
@@ -90,7 +90,7 @@
   display: flex;
   justify-content: center;
   background-color: light-dark(rgb(0 0 0 / 12%), rgb(255 255 255 / 12%));
-  width: 0.75rem;
+  width: 0.5rem;
   opacity: 0;
   transition: opacity 150ms;
   pointer-events: none;
@@ -104,13 +104,6 @@
     opacity: 1;
     pointer-events: auto;
   }
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: 1rem;
-    height: 100%;
-  }
 }
 
 .ScrollbarThumb {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
index 5541d3c0a2e..73a602b8e2c 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
@@ -29,7 +29,7 @@ export default function InsideScrollDialog() {
                   ))}
                 </ScrollArea.Content>
               </ScrollArea.Viewport>
-              <ScrollArea.Scrollbar className="pointer-events-none flex w-3 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity duration-150 before:absolute before:h-full before:w-4 before:content-[''] data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0">
+              <ScrollArea.Scrollbar className="pointer-events-none flex w-2 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity duration-150 data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0">
                 <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
               </ScrollArea.Scrollbar>
             </ScrollArea.Root>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
index cc604bac4d1..fe7eddcd894 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
@@ -88,7 +88,7 @@
   display: flex;
   justify-content: center;
   background-color: light-dark(rgb(0 0 0 / 12%), rgb(255 255 255 / 12%));
-  width: 0.75rem;
+  width: 0.5rem;
   opacity: 0;
   transition: opacity 250ms;
   pointer-events: none;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index c838de33691..c5687579679 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -67,7 +67,7 @@ export default function OutsideScrollDialog() {
                 </Dialog.Popup>
               </ScrollArea.Content>
             </ScrollArea.Viewport>
-            <ScrollArea.Scrollbar className="pointer-events-none flex w-3 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity duration-[250ms] data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-[75ms] data-scrolling:delay-[0ms] hover:pointer-events-auto hover:opacity-100 hover:duration-[75ms] hover:delay-[0ms] group-data-ending-style/dialog:opacity-0 group-data-ending-style/dialog:duration-[250ms]">
+            <ScrollArea.Scrollbar className="pointer-events-none flex w-2 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity duration-[250ms] data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-[75ms] data-scrolling:delay-[0ms] hover:pointer-events-auto hover:opacity-100 hover:duration-[75ms] hover:delay-[0ms] group-data-ending-style/dialog:opacity-0 group-data-ending-style/dialog:duration-[250ms]">
               <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
             </ScrollArea.Scrollbar>
           </ScrollArea.Root>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
index 27fd7ca76e7..b3dd24fb766 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
@@ -317,14 +317,4 @@
   width: 100%;
   border-radius: inherit;
   background-color: var(--color-neutral-500);
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: calc(100% + 1rem);
-    height: calc(100% + 1rem);
-  }
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
index 79f7d9eb032..585eb8d8fca 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
@@ -123,7 +123,7 @@ export default function ExampleDrawerMobileNav() {
               </ScrollArea.Content>
             </ScrollArea.Viewport>
             <ScrollArea.Scrollbar className="pointer-events-none absolute m-[0.4rem] flex w-[0.25rem] justify-center rounded-[1rem] opacity-0 transition-opacity duration-250 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-75 data-scrolling:delay-[0ms] hover:pointer-events-auto hover:opacity-100 hover:duration-75 hover:delay-[0ms] data-ending-style:opacity-0 data-ending-style:duration-250 min-[42rem]:w-[0.4375rem]">
-              <ScrollArea.Thumb className="w-full rounded-[inherit] bg-neutral-500 before:absolute before:content-[''] before:top-1/2 before:left-1/2 before:h-[calc(100%+1rem)] before:w-[calc(100%+1rem)] before:-translate-x-1/2 before:-translate-y-1/2" />
+              <ScrollArea.Thumb className="w-full rounded-[inherit] bg-neutral-500" />
             </ScrollArea.Scrollbar>
           </ScrollArea.Root>
         </Drawer.Viewport>
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
index 6fcfe00aef4..f57b3c88a69 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
@@ -49,11 +49,6 @@
   transition: opacity 150ms;
   pointer-events: none;
 
-  &::before {
-    content: '';
-    position: absolute;
-  }
-
   &[data-scrolling] {
     transition-duration: 0ms;
   }
@@ -65,26 +60,11 @@
   }
 
   &[data-orientation='vertical'] {
-    width: 1rem;
-
-    &::before {
-      width: 1.25rem;
-      height: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-    }
+    width: 0.5rem;
   }
 
   &[data-orientation='horizontal'] {
-    height: 1rem;
-
-    &::before {
-      width: 100%;
-      height: 1.25rem;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
+    height: 0.5rem;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
index 5d9d8480880..c713f6d90e7 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
@@ -17,11 +17,11 @@ export default function ExampleScrollAreaBoth() {
           </ul>
         </ScrollArea.Content>
       </ScrollArea.Viewport>
-      <ScrollArea.Scrollbar className="relative m-px flex bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:content-[''] data-[orientation=vertical]:w-4 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:bottom-0 data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0">
+      <ScrollArea.Scrollbar className="relative m-px flex bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none data-[orientation=vertical]:w-2 data-[orientation=horizontal]:h-2 data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0">
         <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
       </ScrollArea.Scrollbar>
       <ScrollArea.Scrollbar
-        className="relative m-px flex bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:content-[''] data-[orientation=vertical]:w-4 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:bottom-0 data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0"
+        className="relative m-px flex bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none data-[orientation=vertical]:w-2 data-[orientation=horizontal]:h-2 data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0"
         orientation="horizontal"
       >
         <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
index bf1c32f6118..b4a7531d517 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
@@ -37,7 +37,7 @@
   display: flex;
   justify-content: center;
   background-color: light-dark(rgb(0 0 0 / 12%), rgb(255 255 255 / 12%));
-  width: 1rem;
+  width: 0.5rem;
   margin: 1px;
   opacity: 0;
   transition: opacity 150ms;
@@ -52,13 +52,6 @@
     opacity: 1;
     pointer-events: auto;
   }
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: 1.25rem;
-    height: 100%;
-  }
 }
 
 .Thumb {
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
index a6b2e795895..1f3eea1aa13 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
@@ -26,7 +26,7 @@ export default function ExampleScrollArea() {
           </p>
         </ScrollArea.Content>
       </ScrollArea.Viewport>
-      <ScrollArea.Scrollbar className="m-px flex w-4 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:h-full before:w-5 before:content-[''] data-hovering:opacity-100 data-hovering:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-scrolling:pointer-events-auto">
+      <ScrollArea.Scrollbar className="m-px flex w-2 justify-center bg-black/12 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none data-hovering:opacity-100 data-hovering:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-scrolling:pointer-events-auto">
         <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
       </ScrollArea.Scrollbar>
     </ScrollArea.Root>
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
index af3883a7fe7..38d1993155d 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
@@ -45,7 +45,7 @@
   display: flex;
   justify-content: center;
   background-color: light-dark(rgb(0 0 0 / 8%), rgb(255 255 255 / 12%));
-  width: 1rem;
+  width: 0.5rem;
   margin: 1px;
   opacity: 0;
   transition: opacity 150ms;
@@ -60,13 +60,6 @@
     opacity: 1;
     pointer-events: auto;
   }
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: 1.25rem;
-    height: 100%;
-  }
 }
 
 .Thumb {
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
index e11393a63eb..2abb151d580 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
@@ -26,7 +26,7 @@ export default function ExampleScrollAreaScrollFade() {
           </p>
         </ScrollArea.Content>
       </ScrollArea.Viewport>
-      <ScrollArea.Scrollbar className="m-px flex w-4 justify-center bg-black/8 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none before:absolute before:h-full before:w-5 before:content-[''] data-hovering:opacity-100 data-hovering:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-scrolling:pointer-events-auto">
+      <ScrollArea.Scrollbar className="m-px flex w-2 justify-center bg-black/8 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none data-hovering:opacity-100 data-hovering:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-scrolling:pointer-events-auto">
         <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
       </ScrollArea.Scrollbar>
     </ScrollArea.Root>

From c7fcc95b2157aad5e646843354d96cea98ee5726 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 11 May 2026 12:22:18 +0200
Subject: [PATCH 165/257] Accordion: remove active state

---
 .../react/components/accordion/demos/_index.module.css      | 4 ----
 .../components/accordion/demos/hero/tailwind/index.tsx      | 6 +++---
 .../components/accordion/demos/multiple/tailwind/index.tsx  | 6 +++---
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
index 52ff2bb9463..4f4864a5f25 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
@@ -44,10 +44,6 @@
     }
   }
 
-  &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
-  }
-
   &:focus-visible {
     outline: 2px solid light-dark(var(--color-neutral-950), white);
     z-index: 1;
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
index a7095d1ff10..80eae65297f 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleAccordion() {
     <Accordion.Root className="flex w-80 max-w-full flex-col border border-neutral-950 text-neutral-950 dark:border-white dark:text-white">
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             What is Base UI?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -21,7 +21,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             How do I get started?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -36,7 +36,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             Can I use it for my project?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
index 1aad4dd19c1..0233c367c13 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleAccordion() {
     >
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             What is Base UI?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -24,7 +24,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             How do I get started?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -39,7 +39,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             Can I use it for my project?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>

From b0d1eeef6150a553b3dfabc0560f712f10096585 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 11 May 2026 12:51:45 +0200
Subject: [PATCH 166/257] Autocomplete / Combobox / Select: reduce block
 padding

---
 .../autocomplete/demos/async/css-modules/index.module.css    | 4 ++--
 .../components/autocomplete/demos/async/tailwind/index.tsx   | 2 +-
 .../demos/auto-highlight/css-modules/index.module.css        | 4 ++--
 .../autocomplete/demos/auto-highlight/tailwind/index.tsx     | 2 +-
 .../demos/command-palette/css-modules/index.module.css       | 2 +-
 .../autocomplete/demos/command-palette/tailwind/index.tsx    | 2 +-
 .../demos/fuzzy-matching/css-modules/index.module.css        | 4 ++--
 .../autocomplete/demos/fuzzy-matching/tailwind/index.tsx     | 2 +-
 .../autocomplete/demos/grid/css-modules/index.module.css     | 2 +-
 .../components/autocomplete/demos/grid/tailwind/index.tsx    | 2 +-
 .../autocomplete/demos/grouped/css-modules/index.module.css  | 5 +++--
 .../components/autocomplete/demos/grouped/tailwind/index.tsx | 2 +-
 .../autocomplete/demos/hero/css-modules/index.module.css     | 4 ++--
 .../components/autocomplete/demos/hero/tailwind/index.tsx    | 2 +-
 .../autocomplete/demos/inline/css-modules/index.module.css   | 4 ++--
 .../components/autocomplete/demos/inline/tailwind/index.tsx  | 2 +-
 .../autocomplete/demos/limit/css-modules/index.module.css    | 4 ++--
 .../components/autocomplete/demos/limit/tailwind/index.tsx   | 2 +-
 .../demos/virtualized/css-modules/index.module.css           | 2 +-
 .../autocomplete/demos/virtualized/tailwind/index.tsx        | 2 +-
 .../demos/async-multiple/css-modules/index.module.css        | 4 ++--
 .../combobox/demos/async-multiple/tailwind/index.tsx         | 2 +-
 .../combobox/demos/async-single/css-modules/index.module.css | 4 ++--
 .../combobox/demos/async-single/tailwind/index.tsx           | 2 +-
 .../combobox/demos/creatable/css-modules/index.module.css    | 4 ++--
 .../components/combobox/demos/creatable/tailwind/index.tsx   | 2 +-
 .../combobox/demos/grouped/css-modules/index.module.css      | 5 +++--
 .../components/combobox/demos/grouped/tailwind/index.tsx     | 2 +-
 .../combobox/demos/hero/css-modules/index.module.css         | 4 ++--
 .../react/components/combobox/demos/hero/tailwind/index.tsx  | 2 +-
 .../demos/input-inside-popup/css-modules/index.module.css    | 4 ++--
 .../combobox/demos/input-inside-popup/tailwind/index.tsx     | 2 +-
 .../combobox/demos/multiple/css-modules/index.module.css     | 4 ++--
 .../components/combobox/demos/multiple/tailwind/index.tsx    | 2 +-
 .../combobox/demos/virtualized/css-modules/index.module.css  | 2 +-
 .../components/combobox/demos/virtualized/tailwind/index.tsx | 2 +-
 .../react/handbook/forms/demos/components/autocomplete.tsx   | 2 +-
 .../react/handbook/forms/demos/components/combobox.tsx       | 2 +-
 38 files changed, 54 insertions(+), 52 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
index f20af6362d8..55056a17745 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
@@ -34,14 +34,14 @@
 
 .Popup {
   box-sizing: border-box;
-  padding-block: 0.5rem;
+  padding-block: 0.25rem;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
   max-height: min(var(--available-height), 23rem);
   max-width: var(--available-width);
   overflow-y: auto;
-  scroll-padding-block: 0.5rem;
+  scroll-padding-block: 0.25rem;
   overscroll-behavior: contain;
 
   border: 1px solid light-dark(var(--color-neutral-950), white);
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
index 6efde413fbe..ab0571bd916 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
@@ -88,7 +88,7 @@ export default function ExampleAsyncAutocomplete() {
       <Autocomplete.Portal hidden={!status}>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4} align="start">
           <Autocomplete.Popup
-            className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain border border-neutral-950 bg-white py-2 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+            className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-1 scroll-pb-1 overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-busy={isPending || undefined}
           >
             <Autocomplete.Status>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
index f0173d1ccd7..bb36f88ae4d 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
@@ -52,8 +52,8 @@
   box-sizing: border-box;
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding-block: 0.5rem;
-  scroll-padding-block: 0.5rem;
+  padding-block: 0.25rem;
+  scroll-padding-block: 0.25rem;
   outline: 0;
   max-height: min(23rem, var(--available-height));
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
index 544f5d287d3..f4343641fb8 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
@@ -20,7 +20,7 @@ export default function ExampleAutocompleteAutoHighlight() {
                 No tags found.
               </div>
             </Autocomplete.Empty>
-            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-empty:p-0">
+            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.25rem] py-1 overscroll-contain max-h-[min(23rem,var(--available-height))] data-empty:p-0">
               {(tag: Tag) => (
                 <Autocomplete.Item
                   key={tag.id}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
index c7722625f2e..4f12e6d4347 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
@@ -141,7 +141,7 @@
 
 .List {
   box-sizing: border-box;
-  padding: 0.5rem 0;
+  padding: 0.25rem 0;
 
   &:empty {
     padding: 0;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
index e5d1d7c1e27..ae44e7ea210 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
@@ -45,7 +45,7 @@ export default function ExampleAutocompleteCommandPalette() {
                       </div>
                     </Autocomplete.Empty>
 
-                    <Autocomplete.List className="py-2">
+                    <Autocomplete.List className="py-1">
                       {(group: Group) => (
                         <Autocomplete.Group
                           key={group.value}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
index b689e6ffdc4..ffc69e10504 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
@@ -34,14 +34,14 @@
 
 .Popup {
   box-sizing: border-box;
-  padding-block: 0.5rem;
+  padding-block: 0.25rem;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
   max-height: min(var(--available-height), 28rem);
   max-width: var(--available-width);
   overflow-y: auto;
-  scroll-padding-block: 0.5rem;
+  scroll-padding-block: 0.25rem;
   overscroll-behavior: contain;
 
   border: 1px solid light-dark(var(--color-neutral-950), white);
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
index 0a0622e2aab..5c9124aeffe 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
@@ -20,7 +20,7 @@ export default function ExampleFuzzyMatchingAutocomplete() {
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),28rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain border border-neutral-950 bg-white py-2 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),28rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-1 scroll-pb-1 overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
               <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No results found for "{<Autocomplete.Value />}"
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
index 1eef4faa0e1..ebdee29fe6e 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
@@ -162,7 +162,7 @@
 
 .List {
   overflow: auto;
-  scroll-padding-top: 0.5rem;
+  scroll-padding-top: 0.25rem;
   scroll-padding-bottom: 0.35rem;
   overscroll-behavior: contain;
   max-height: min(
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
index fd7d04846d5..d8778be1cf6 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
@@ -77,7 +77,7 @@ export default function ExampleEmojiPicker() {
                     No emojis found
                   </div>
                 </Autocomplete.Empty>
-                <Autocomplete.List className="max-h-[min(calc(20.5rem-var(--input-container-height)-2px),calc(var(--available-height)-var(--input-container-height)-2px))] overflow-auto scroll-pt-2 scroll-pb-[0.35rem] overscroll-contain empty:p-0">
+                <Autocomplete.List className="max-h-[min(calc(20.5rem-var(--input-container-height)-2px),calc(var(--available-height)-var(--input-container-height)-2px))] overflow-auto scroll-pt-1 scroll-pb-[0.35rem] overscroll-contain empty:p-0">
                   {(group: EmojiGroup) => (
                     <Autocomplete.Group
                       key={group.value}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
index 538028a5580..74901fd8174 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
@@ -52,8 +52,9 @@
 .List {
   box-sizing: border-box;
   overflow-y: auto;
-  scroll-padding-top: 0.5rem;
-  scroll-padding-bottom: 0.5rem;
+  padding-block: 0.25rem;
+  scroll-padding-top: 0.25rem;
+  scroll-padding-bottom: 0.25rem;
   overscroll-behavior: contain;
   max-height: min(22.5rem, var(--available-height));
   outline: 0;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
index 0b2b30f8d7c..374c462b0ff 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
@@ -20,7 +20,7 @@ export default function ExampleGroupAutocomplete() {
                 No tags found.
               </div>
             </Autocomplete.Empty>
-            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-2 overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-empty:p-0">
+            <Autocomplete.List className="outline-0 overflow-y-auto py-1 scroll-py-1 overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-empty:p-0">
               {(group: TagGroup) => (
                 <Autocomplete.Group key={group.value} items={group.items} className="block pb-2">
                   <Autocomplete.GroupLabel className="p-2 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
index 427498517fc..da77fe7a064 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
@@ -53,8 +53,8 @@
   box-sizing: border-box;
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding-block: 0.5rem;
-  scroll-padding-block: 0.5rem;
+  padding-block: 0.25rem;
+  scroll-padding-block: 0.25rem;
   outline: 0;
   max-height: min(23rem, var(--available-height));
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
index af37399c38c..b97571df8b0 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
@@ -20,7 +20,7 @@ export default function ExampleAutocomplete() {
                 No tags found.
               </div>
             </Autocomplete.Empty>
-            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-empty:p-0">
+            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.25rem] py-1 overscroll-contain max-h-[min(23rem,var(--available-height))] data-empty:p-0">
               {(tag: Tag) => (
                 <Autocomplete.Item
                   key={tag.id}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
index eb6d468b990..40b1993c123 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
@@ -63,8 +63,8 @@
   box-sizing: border-box;
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding-block: 0.5rem;
-  scroll-padding-block: 0.5rem;
+  padding-block: 0.25rem;
+  scroll-padding-block: 0.25rem;
   outline: 0;
   max-height: min(23rem, var(--available-height));
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
index 82de80d2d6e..f86d6dd41a7 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
@@ -15,7 +15,7 @@ export default function ExampleAutocompleteInline() {
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden data-empty:hidden" sideOffset={4}>
           <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
-            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-empty:p-0">
+            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.25rem] py-1 overscroll-contain max-h-[min(23rem,var(--available-height))] data-empty:p-0">
               {(tag: Tag) => (
                 <Autocomplete.Item
                   key={tag.id}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
index b90cf3b1fdc..d93bf73db92 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
@@ -34,14 +34,14 @@
 
 .Popup {
   box-sizing: border-box;
-  padding-block: 0.5rem;
+  padding-block: 0.25rem;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
   max-height: min(var(--available-height), 23rem);
   max-width: var(--available-width);
   overflow-y: auto;
-  scroll-padding-block: 0.5rem;
+  scroll-padding-block: 0.25rem;
   overscroll-behavior: contain;
 
   border: 1px solid light-dark(var(--color-neutral-950), white);
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
index d55d08d6053..a56d99d2977 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
@@ -31,7 +31,7 @@ export default function ExampleAutocompleteLimit() {
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain border border-neutral-950 bg-white py-2 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-1 scroll-pb-1 overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
               <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No results found for "{value}"
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
index fe097ca7524..3e3739eade9 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
@@ -55,7 +55,7 @@
   max-height: var(--available-height);
   overflow: auto;
   overscroll-behavior: contain;
-  scroll-padding-block: 0.5rem;
+  scroll-padding-block: 0.25rem;
 }
 
 .VirtualizedPlaceholder {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
index 3a7784bed41..0be7edd38dd 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
@@ -95,7 +95,7 @@ function VirtualizedList({
     <div
       role="presentation"
       ref={handleScrollElementRef}
-      className="h-[min(22rem,var(--total-size))] max-h-[var(--available-height)] overflow-auto overscroll-contain scroll-p-2"
+      className="h-[min(22rem,var(--total-size))] max-h-[var(--available-height)] overflow-auto overscroll-contain scroll-py-1"
       style={{ '--total-size': `${totalSize}px` } as React.CSSProperties}
     >
       <div role="presentation" className="relative w-full" style={{ height: totalSize }}>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
index 56308c22838..2d3becad633 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
@@ -137,14 +137,14 @@
 
 .Popup {
   box-sizing: border-box;
-  padding-block: 0.5rem;
+  padding-block: 0.25rem;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
   max-width: var(--available-width);
   max-height: min(var(--available-height), 24rem);
   overflow-y: auto;
-  scroll-padding-block: 0.5rem;
+  scroll-padding-block: 0.25rem;
   overscroll-behavior: contain;
   transition:
     opacity 0.1s,
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index d74f099c79e..1e7f451941f 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -176,7 +176,7 @@ export default function ExampleAsyncMultipleCombobox() {
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
           <Combobox.Popup
-            className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-2 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+            className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-busy={isPending || undefined}
           >
             <Combobox.Status>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
index 69ab90a007b..5f447e154e3 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
@@ -94,14 +94,14 @@
 
 .Popup {
   box-sizing: border-box;
-  padding-block: 0.5rem;
+  padding-block: 0.25rem;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
   max-height: min(var(--available-height), 23rem);
   max-width: var(--available-width);
   overflow-y: auto;
-  scroll-padding-block: 0.5rem;
+  scroll-padding-block: 0.25rem;
   overscroll-behavior: contain;
   transition:
     opacity 0.1s,
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index f83ad02e948..d4d2648a21b 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -139,7 +139,7 @@ export default function ExampleAsyncSingleCombobox() {
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
           <Combobox.Popup
-            className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-2 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:transition-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+            className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:transition-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-busy={isPending || undefined}
           >
             <Combobox.Status>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
index 860e7989d7c..2d5793bd3c4 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
@@ -137,14 +137,14 @@
 
 .Popup {
   box-sizing: border-box;
-  padding-block: 0.5rem;
+  padding-block: 0.25rem;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
   max-width: var(--available-width);
   max-height: min(var(--available-height), 24rem);
   overflow-y: auto;
-  scroll-padding-block: 0.5rem;
+  scroll-padding-block: 0.25rem;
   overscroll-behavior: contain;
   transition:
     opacity 0.1s,
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
index 705ea622b85..818707bb6e5 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
@@ -164,7 +164,7 @@ export default function ExampleCreatableCombobox() {
 
         <Combobox.Portal>
           <Combobox.Positioner className="z-50 outline-none" sideOffset={4}>
-            <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-2 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Combobox.Empty>
                 <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                   No labels found.
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
index 101f6389eae..92794e92ea5 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
@@ -120,8 +120,9 @@
   box-sizing: border-box;
   overflow: auto;
   overscroll-behavior: contain;
-  scroll-padding-top: 0.5rem;
-  scroll-padding-bottom: 0.5rem;
+  padding-block: 0.25rem;
+  scroll-padding-top: 0.25rem;
+  scroll-padding-bottom: 0.25rem;
   max-height: min(23rem, var(--available-height));
   outline: 0;
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index 0ed894753d7..191b12465ab 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -39,7 +39,7 @@ export default function ExampleGroupedCombobox() {
                 No produce found.
               </div>
             </Combobox.Empty>
-            <Combobox.List className="max-h-[min(23rem,var(--available-height))] overflow-auto overscroll-contain scroll-py-2 outline-0">
+            <Combobox.List className="max-h-[min(23rem,var(--available-height))] overflow-auto overscroll-contain py-1 scroll-py-1 outline-0">
               {(group: ProduceGroup) => (
                 <Combobox.Group key={group.value} items={group.items} className="block pb-2">
                   <Combobox.GroupLabel className="py-2 pr-2 pl-7 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
index 95fa0b119e9..7ecef587fab 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
@@ -119,8 +119,8 @@
   box-sizing: border-box;
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding-block: 0.5rem;
-  scroll-padding-block: 0.5rem;
+  padding-block: 0.25rem;
+  scroll-padding-block: 0.25rem;
   outline: 0;
   max-height: min(23rem, var(--available-height));
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
index f5e059f1a8b..b00987d974b 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
@@ -39,7 +39,7 @@ export default function ExampleCombobox() {
                 No fruits found.
               </div>
             </Combobox.Empty>
-            <Combobox.List className="max-h-[min(23rem,var(--available-height))] overflow-y-auto overscroll-contain py-2 scroll-py-2 outline-0 data-empty:p-0">
+            <Combobox.List className="max-h-[min(23rem,var(--available-height))] overflow-y-auto overscroll-contain py-1 scroll-py-1 outline-0 data-empty:p-0">
               {(item: Fruit) => (
                 <Combobox.Item
                   key={item.value}
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
index 60c273c9a23..a7070f98148 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
@@ -131,8 +131,8 @@
 .List {
   box-sizing: border-box;
   overflow: auto;
-  scroll-padding-block: 0.5rem;
-  padding-block: 0.5rem;
+  scroll-padding-block: 0.25rem;
+  padding-block: 0.25rem;
   overscroll-behavior: contain;
   max-height: min(
     calc(24rem - var(--input-container-height) - 2px),
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index 16a9d2bb231..33d0c1dd59c 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -36,7 +36,7 @@ export default function ExamplePopoverCombobox() {
                   No countries found.
                 </div>
               </Combobox.Empty>
-              <Combobox.List className="max-h-[min(calc(24rem-var(--input-container-height)-2px),calc(var(--available-height)-var(--input-container-height)-2px))] overflow-auto overscroll-contain py-2 scroll-py-2 empty:p-0">
+              <Combobox.List className="max-h-[min(calc(24rem-var(--input-container-height)-2px),calc(var(--available-height)-var(--input-container-height)-2px))] overflow-auto overscroll-contain py-1 scroll-py-1 empty:p-0">
                 {(country: Country) => (
                   <Combobox.Item
                     key={country.code}
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
index 8556ed187c1..f46a756b508 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
@@ -150,14 +150,14 @@
 
 .Popup {
   box-sizing: border-box;
-  padding-block: 0.5rem;
+  padding-block: 0.25rem;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
   max-width: var(--available-width);
   max-height: min(var(--available-height), 24rem);
   overflow-y: auto;
-  scroll-padding-block: 0.5rem;
+  scroll-padding-block: 0.25rem;
   overscroll-behavior: contain;
   transition:
     opacity 0.1s,
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
index a08c17e23ab..8aa32b53090 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
@@ -48,7 +48,7 @@ export default function ExampleMultipleCombobox() {
 
       <Combobox.Portal>
         <Combobox.Positioner className="z-50 outline-none" sideOffset={4}>
-          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-2 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Combobox.Empty>
               <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No languages found.
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
index 83b4418d7b0..aced64f7457 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
@@ -55,7 +55,7 @@
   max-height: var(--available-height);
   overflow: auto;
   overscroll-behavior: contain;
-  scroll-padding-block: 0.5rem;
+  scroll-padding-block: 0.25rem;
 }
 
 .VirtualizedPlaceholder {
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
index 7b9dde647bd..4965e44cf19 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
@@ -100,7 +100,7 @@ function VirtualizedList({
     <div
       role="presentation"
       ref={handleScrollElementRef}
-      className="h-[min(22rem,var(--total-size))] max-h-[var(--available-height)] overflow-auto overscroll-contain scroll-py-2"
+      className="h-[min(22rem,var(--total-size))] max-h-[var(--available-height)] overflow-auto overscroll-contain scroll-py-1"
       style={{ '--total-size': `${totalSize}px` } as React.CSSProperties}
     >
       <div role="presentation" className="relative w-full" style={{ height: totalSize }}>
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
index 1d7fa72c08d..70a30aa0bf6 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
@@ -52,7 +52,7 @@ export function List({ className, ...props }: Autocomplete.List.Props) {
   return (
     <Autocomplete.List
       className={clsx(
-        'max-h-[min(23rem,var(--available-height))] overflow-y-auto overscroll-contain py-2 scroll-py-2 outline-0 data-empty:p-0',
+        'max-h-[min(23rem,var(--available-height))] overflow-y-auto overscroll-contain py-1 scroll-py-1 outline-0 data-empty:p-0',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
index b09c5c17400..ca7d6eb0b45 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
@@ -103,7 +103,7 @@ export function List({ className, ...props }: Combobox.List.Props) {
   return (
     <Combobox.List
       className={clsx(
-        'outline-0 overflow-y-auto scroll-py-[0.5rem] py-2 overscroll-contain max-h-[min(23rem,var(--available-height))] data-empty:p-0',
+        'outline-0 overflow-y-auto scroll-py-[0.25rem] py-1 overscroll-contain max-h-[min(23rem,var(--available-height))] data-empty:p-0',
         className,
       )}
       {...props}

From ccb39b95c7326e73a14b6df25a577e7adc7a151d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 11 May 2026 15:41:58 +0200
Subject: [PATCH 167/257] Autocomplete / Combobox: fix popup bg when
 overscrolling

---
 .../demos/async/css-modules/index.module.css  | 15 ++--
 .../demos/async/css-modules/index.tsx         | 28 ++++----
 .../demos/async/tailwind/index.tsx            | 48 +++++++------
 .../css-modules/index.module.css              | 11 +--
 .../demos/fuzzy-matching/tailwind/index.tsx   |  4 +-
 .../css-modules/index.module.css              | 15 ++--
 .../async-multiple/css-modules/index.tsx      | 46 ++++++------
 .../demos/async-multiple/tailwind/index.tsx   | 72 ++++++++++---------
 .../async-single/css-modules/index.module.css | 15 ++--
 .../demos/async-single/css-modules/index.tsx  | 46 ++++++------
 .../demos/async-single/tailwind/index.tsx     | 72 ++++++++++---------
 11 files changed, 200 insertions(+), 172 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
index 55056a17745..d7f6bd888f4 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
@@ -34,15 +34,11 @@
 
 .Popup {
   box-sizing: border-box;
-  padding-block: 0.25rem;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
-  max-height: min(var(--available-height), 23rem);
   max-width: var(--available-width);
-  overflow-y: auto;
-  scroll-padding-block: 0.25rem;
-  overscroll-behavior: contain;
+  overflow: clip;
 
   border: 1px solid light-dark(var(--color-neutral-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
@@ -52,6 +48,15 @@
   }
 }
 
+.Viewport {
+  box-sizing: border-box;
+  max-height: min(var(--available-height), 23rem);
+  padding-block: 0.25rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-padding-block: 0.25rem;
+}
+
 .Item {
   box-sizing: border-box;
   outline: 0;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.tsx
index fbc3e82674c..4211e585e13 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.tsx
@@ -83,19 +83,21 @@ export default function ExampleAsyncAutocomplete() {
       <Autocomplete.Portal hidden={!status}>
         <Autocomplete.Positioner className={styles.Positioner} sideOffset={4} align="start">
           <Autocomplete.Popup className={styles.Popup} aria-busy={isPending || undefined}>
-            <Autocomplete.Status>
-              {status && <div className={styles.Status}>{status}</div>}
-            </Autocomplete.Status>
-            <Autocomplete.List>
-              {(movie: Movie) => (
-                <Autocomplete.Item key={movie.id} className={styles.Item} value={movie}>
-                  <span className={styles.MovieItem}>
-                    <span className={styles.MovieName}>{movie.title}</span>
-                    <span className={styles.MovieYear}>{movie.year}</span>
-                  </span>
-                </Autocomplete.Item>
-              )}
-            </Autocomplete.List>
+            <div className={styles.Viewport}>
+              <Autocomplete.Status>
+                {status && <div className={styles.Status}>{status}</div>}
+              </Autocomplete.Status>
+              <Autocomplete.List>
+                {(movie: Movie) => (
+                  <Autocomplete.Item key={movie.id} className={styles.Item} value={movie}>
+                    <span className={styles.MovieItem}>
+                      <span className={styles.MovieName}>{movie.title}</span>
+                      <span className={styles.MovieYear}>{movie.year}</span>
+                    </span>
+                  </Autocomplete.Item>
+                )}
+              </Autocomplete.List>
+            </div>
           </Autocomplete.Popup>
         </Autocomplete.Positioner>
       </Autocomplete.Portal>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
index ab0571bd916..c24fd2f97e0 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
@@ -88,32 +88,34 @@ export default function ExampleAsyncAutocomplete() {
       <Autocomplete.Portal hidden={!status}>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4} align="start">
           <Autocomplete.Popup
-            className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-1 scroll-pb-1 overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+            className="w-[var(--anchor-width)] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-busy={isPending || undefined}
           >
-            <Autocomplete.Status>
-              {status && (
-                <div className="flex items-center gap-2 py-1 pr-8 pl-2 text-sm text-neutral-500 dark:text-neutral-400">
-                  {status}
-                </div>
-              )}
-            </Autocomplete.Status>
-            <Autocomplete.List>
-              {(movie: Movie) => (
-                <Autocomplete.Item
-                  key={movie.id}
-                  className="flex cursor-default py-2 pr-2 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
-                  value={movie}
-                >
-                  <span className="flex w-full flex-col gap-1">
-                    <span className="font-bold leading-5">{movie.title}</span>
-                    <span className="text-sm leading-4 text-neutral-500 dark:text-neutral-400">
-                      {movie.year}
+            <div className="max-h-[min(var(--available-height),23rem)] overflow-y-auto overscroll-contain py-1 scroll-pt-1 scroll-pb-1">
+              <Autocomplete.Status>
+                {status && (
+                  <div className="flex items-center gap-2 py-1 pr-8 pl-2 text-sm text-neutral-500 dark:text-neutral-400">
+                    {status}
+                  </div>
+                )}
+              </Autocomplete.Status>
+              <Autocomplete.List>
+                {(movie: Movie) => (
+                  <Autocomplete.Item
+                    key={movie.id}
+                    className="flex cursor-default py-2 pr-2 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
+                    value={movie}
+                  >
+                    <span className="flex w-full flex-col gap-1">
+                      <span className="font-bold leading-5">{movie.title}</span>
+                      <span className="text-sm leading-4 text-neutral-500 dark:text-neutral-400">
+                        {movie.year}
+                      </span>
                     </span>
-                  </span>
-                </Autocomplete.Item>
-              )}
-            </Autocomplete.List>
+                  </Autocomplete.Item>
+                )}
+              </Autocomplete.List>
+            </div>
           </Autocomplete.Popup>
         </Autocomplete.Positioner>
       </Autocomplete.Portal>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
index ffc69e10504..5f83161f069 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
@@ -34,15 +34,11 @@
 
 .Popup {
   box-sizing: border-box;
-  padding-block: 0.25rem;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
-  max-height: min(var(--available-height), 28rem);
   max-width: var(--available-width);
-  overflow-y: auto;
-  scroll-padding-block: 0.25rem;
-  overscroll-behavior: contain;
+  overflow: clip;
 
   border: 1px solid light-dark(var(--color-neutral-950), white);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
@@ -56,6 +52,11 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  padding-block: 0.25rem;
+  max-height: min(var(--available-height), 28rem);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-padding-block: 0.25rem;
 }
 
 .Item {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
index 5c9124aeffe..95c1d920e1c 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
@@ -20,14 +20,14 @@ export default function ExampleFuzzyMatchingAutocomplete() {
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),28rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-1 scroll-pb-1 overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Autocomplete.Popup className="w-(--anchor-width) max-w-(--available-width) overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
               <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No results found for "{<Autocomplete.Value />}"
               </div>
             </Autocomplete.Empty>
 
-            <Autocomplete.List className="flex flex-col">
+            <Autocomplete.List className="flex max-h-[min(var(--available-height),28rem)] flex-col overflow-y-auto overscroll-contain py-1 scroll-pt-1 scroll-pb-1">
               {(item: FuzzyItem) => (
                 <Autocomplete.Item
                   key={item.title}
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
index 2d3becad633..f8691fc406e 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
@@ -137,15 +137,11 @@
 
 .Popup {
   box-sizing: border-box;
-  padding-block: 0.25rem;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
   max-width: var(--available-width);
-  max-height: min(var(--available-height), 24rem);
-  overflow-y: auto;
-  scroll-padding-block: 0.25rem;
-  overscroll-behavior: contain;
+  overflow: clip;
   transition:
     opacity 0.1s,
     transform 0.1s;
@@ -164,6 +160,15 @@
   }
 }
 
+.Viewport {
+  box-sizing: border-box;
+  max-height: min(var(--available-height), 24rem);
+  padding-block: 0.25rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-padding-block: 0.25rem;
+}
+
 .Status {
   display: flex;
   align-items: center;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
index a0637896920..676c3f8bbef 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
@@ -167,29 +167,31 @@ export default function ExampleAsyncMultipleCombobox() {
       <Combobox.Portal>
         <Combobox.Positioner className={styles.Positioner} sideOffset={4}>
           <Combobox.Popup className={styles.Popup} aria-busy={isPending || undefined}>
-            <Combobox.Status>
-              {status ? <div className={styles.Status}>{status}</div> : null}
-            </Combobox.Status>
-            <Combobox.Empty>
-              {emptyMessage ? <div className={styles.Empty}>{emptyMessage}</div> : null}
-            </Combobox.Empty>
-            <Combobox.List>
-              {(user: DirectoryUser) => (
-                <Combobox.Item key={user.id} className={styles.Item} value={user}>
-                  <Combobox.ItemIndicator className={styles.ItemIndicator}>
-                    <CheckIcon className={styles.ItemIndicatorIcon} />
-                  </Combobox.ItemIndicator>
-                  <span className={styles.ItemText}>
-                    <span className={styles.ItemTitle}>{user.name}</span>
-                    <span className={styles.ItemEmail}>{user.email}</span>
-                    <span className={styles.ItemSubtitle}>
-                      <span>@{user.username}</span>
-                      <span>{user.title}</span>
+            <div className={styles.Viewport}>
+              <Combobox.Status>
+                {status ? <div className={styles.Status}>{status}</div> : null}
+              </Combobox.Status>
+              <Combobox.Empty>
+                {emptyMessage ? <div className={styles.Empty}>{emptyMessage}</div> : null}
+              </Combobox.Empty>
+              <Combobox.List>
+                {(user: DirectoryUser) => (
+                  <Combobox.Item key={user.id} className={styles.Item} value={user}>
+                    <Combobox.ItemIndicator className={styles.ItemIndicator}>
+                      <CheckIcon className={styles.ItemIndicatorIcon} />
+                    </Combobox.ItemIndicator>
+                    <span className={styles.ItemText}>
+                      <span className={styles.ItemTitle}>{user.name}</span>
+                      <span className={styles.ItemEmail}>{user.email}</span>
+                      <span className={styles.ItemSubtitle}>
+                        <span>@{user.username}</span>
+                        <span>{user.title}</span>
+                      </span>
                     </span>
-                  </span>
-                </Combobox.Item>
-              )}
-            </Combobox.List>
+                  </Combobox.Item>
+                )}
+              </Combobox.List>
+            </div>
           </Combobox.Popup>
         </Combobox.Positioner>
       </Combobox.Portal>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index 1e7f451941f..37040a56cae 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -176,44 +176,46 @@ export default function ExampleAsyncMultipleCombobox() {
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
           <Combobox.Popup
-            className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+            className="w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-busy={isPending || undefined}
           >
-            <Combobox.Status>
-              {status ? (
-                <div className="flex items-center gap-2 py-1 pr-5 pl-2 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
-                  {status}
-                </div>
-              ) : null}
-            </Combobox.Status>
-            <Combobox.Empty>
-              {emptyMessage ? (
-                <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
-                  {emptyMessage}
-                </div>
-              ) : null}
-            </Combobox.Empty>
-            <Combobox.List>
-              {(user: DirectoryUser) => (
-                <Combobox.Item
-                  key={user.id}
-                  value={user}
-                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-start gap-2 px-2 py-2 text-sm leading-[1.2rem] outline-none select-none [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-neutral-950 [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-100 dark:[@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:before:bg-neutral-800"
-                >
-                  <Combobox.ItemIndicator className="col-start-1 mt-1">
-                    <CheckIcon className="size-3" />
-                  </Combobox.ItemIndicator>
-                  <span className="col-start-2 flex flex-col gap-1">
-                    <span className="text-sm leading-5 font-bold">{user.name}</span>
-                    <span className="text-xs">{user.email}</span>
-                    <span className="flex flex-wrap gap-2 text-xs text-neutral-500 dark:text-neutral-400">
-                      <span>@{user.username}</span>
-                      <span>{user.title}</span>
+            <div className="max-h-[min(var(--available-height),24rem)] overflow-y-auto overscroll-contain py-1 scroll-pt-1 scroll-pb-1">
+              <Combobox.Status>
+                {status ? (
+                  <div className="flex items-center gap-2 py-1 pr-5 pl-2 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
+                    {status}
+                  </div>
+                ) : null}
+              </Combobox.Status>
+              <Combobox.Empty>
+                {emptyMessage ? (
+                  <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
+                    {emptyMessage}
+                  </div>
+                ) : null}
+              </Combobox.Empty>
+              <Combobox.List>
+                {(user: DirectoryUser) => (
+                  <Combobox.Item
+                    key={user.id}
+                    value={user}
+                    className="grid cursor-default grid-cols-[0.75rem_1fr] items-start gap-2 px-2 py-2 text-sm leading-[1.2rem] outline-none select-none [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-neutral-950 [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-100 dark:[@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:before:bg-neutral-800"
+                  >
+                    <Combobox.ItemIndicator className="col-start-1 mt-1">
+                      <CheckIcon className="size-3" />
+                    </Combobox.ItemIndicator>
+                    <span className="col-start-2 flex flex-col gap-1">
+                      <span className="text-sm leading-5 font-bold">{user.name}</span>
+                      <span className="text-xs">{user.email}</span>
+                      <span className="flex flex-wrap gap-2 text-xs text-neutral-500 dark:text-neutral-400">
+                        <span>@{user.username}</span>
+                        <span>{user.title}</span>
+                      </span>
                     </span>
-                  </span>
-                </Combobox.Item>
-              )}
-            </Combobox.List>
+                  </Combobox.Item>
+                )}
+              </Combobox.List>
+            </div>
           </Combobox.Popup>
         </Combobox.Positioner>
       </Combobox.Portal>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
index 5f447e154e3..c2062ab27cf 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
@@ -94,15 +94,11 @@
 
 .Popup {
   box-sizing: border-box;
-  padding-block: 0.25rem;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   width: var(--anchor-width);
-  max-height: min(var(--available-height), 23rem);
   max-width: var(--available-width);
-  overflow-y: auto;
-  scroll-padding-block: 0.25rem;
-  overscroll-behavior: contain;
+  overflow: clip;
   transition:
     opacity 0.1s,
     transform 0.1s;
@@ -125,6 +121,15 @@
   }
 }
 
+.Viewport {
+  box-sizing: border-box;
+  max-height: min(var(--available-height), 23rem);
+  padding-block: 0.25rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-padding-block: 0.25rem;
+}
+
 .Status {
   display: flex;
   align-items: center;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
index 4a2a06dde1c..0ddaf339842 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
@@ -128,29 +128,31 @@ export default function ExampleAsyncSingleCombobox() {
       <Combobox.Portal>
         <Combobox.Positioner className={styles.Positioner} sideOffset={4}>
           <Combobox.Popup className={styles.Popup} aria-busy={isPending || undefined}>
-            <Combobox.Status>
-              {status ? <div className={styles.Status}>{status}</div> : null}
-            </Combobox.Status>
-            <Combobox.Empty>
-              {emptyMessage ? <div className={styles.Empty}>{emptyMessage}</div> : null}
-            </Combobox.Empty>
-            <Combobox.List>
-              {(user: DirectoryUser) => (
-                <Combobox.Item key={user.id} className={styles.Item} value={user}>
-                  <Combobox.ItemIndicator className={styles.ItemIndicator}>
-                    <CheckIcon className={styles.ItemIndicatorIcon} />
-                  </Combobox.ItemIndicator>
-                  <span className={styles.ItemText}>
-                    <span className={styles.ItemTitle}>{user.name}</span>
-                    <span className={styles.ItemEmail}>{user.email}</span>
-                    <span className={styles.ItemSubtitle}>
-                      <span>@{user.username}</span>
-                      <span>{user.title}</span>
+            <div className={styles.Viewport}>
+              <Combobox.Status>
+                {status ? <div className={styles.Status}>{status}</div> : null}
+              </Combobox.Status>
+              <Combobox.Empty>
+                {emptyMessage ? <div className={styles.Empty}>{emptyMessage}</div> : null}
+              </Combobox.Empty>
+              <Combobox.List>
+                {(user: DirectoryUser) => (
+                  <Combobox.Item key={user.id} className={styles.Item} value={user}>
+                    <Combobox.ItemIndicator className={styles.ItemIndicator}>
+                      <CheckIcon className={styles.ItemIndicatorIcon} />
+                    </Combobox.ItemIndicator>
+                    <span className={styles.ItemText}>
+                      <span className={styles.ItemTitle}>{user.name}</span>
+                      <span className={styles.ItemEmail}>{user.email}</span>
+                      <span className={styles.ItemSubtitle}>
+                        <span>@{user.username}</span>
+                        <span>{user.title}</span>
+                      </span>
                     </span>
-                  </span>
-                </Combobox.Item>
-              )}
-            </Combobox.List>
+                  </Combobox.Item>
+                )}
+              </Combobox.List>
+            </div>
           </Combobox.Popup>
         </Combobox.Positioner>
       </Combobox.Portal>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index d4d2648a21b..2cb47696b49 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -139,44 +139,46 @@ export default function ExampleAsyncSingleCombobox() {
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
           <Combobox.Popup
-            className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:transition-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+            className="w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:transition-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-busy={isPending || undefined}
           >
-            <Combobox.Status>
-              {status ? (
-                <div className="flex items-center gap-2 py-1 pr-5 pl-2 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
-                  {status}
-                </div>
-              ) : null}
-            </Combobox.Status>
-            <Combobox.Empty>
-              {emptyMessage ? (
-                <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
-                  {emptyMessage}
-                </div>
-              ) : null}
-            </Combobox.Empty>
-            <Combobox.List>
-              {(user: DirectoryUser) => (
-                <Combobox.Item
-                  key={user.id}
-                  value={user}
-                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-start gap-2 px-2 py-2 text-sm leading-[1.2rem] outline-none select-none [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-neutral-950 [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-100 dark:[@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:before:bg-neutral-800"
-                >
-                  <Combobox.ItemIndicator className="col-start-1 mt-1">
-                    <CheckIcon className="size-3" />
-                  </Combobox.ItemIndicator>
-                  <span className="col-start-2 flex flex-col gap-1">
-                    <span className="text-sm leading-5 font-bold">{user.name}</span>
-                    <span className="text-xs">{user.email}</span>
-                    <span className="flex flex-wrap gap-2 text-xs text-neutral-500 dark:text-neutral-400">
-                      <span>@{user.username}</span>
-                      <span>{user.title}</span>
+            <div className="max-h-[min(var(--available-height),23rem)] overflow-y-auto overscroll-contain py-1 scroll-pt-1 scroll-pb-1">
+              <Combobox.Status>
+                {status ? (
+                  <div className="flex items-center gap-2 py-1 pr-5 pl-2 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
+                    {status}
+                  </div>
+                ) : null}
+              </Combobox.Status>
+              <Combobox.Empty>
+                {emptyMessage ? (
+                  <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
+                    {emptyMessage}
+                  </div>
+                ) : null}
+              </Combobox.Empty>
+              <Combobox.List>
+                {(user: DirectoryUser) => (
+                  <Combobox.Item
+                    key={user.id}
+                    value={user}
+                    className="grid cursor-default grid-cols-[0.75rem_1fr] items-start gap-2 px-2 py-2 text-sm leading-[1.2rem] outline-none select-none [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-neutral-950 [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-100 dark:[@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:before:bg-neutral-800"
+                  >
+                    <Combobox.ItemIndicator className="col-start-1 mt-1">
+                      <CheckIcon className="size-3" />
+                    </Combobox.ItemIndicator>
+                    <span className="col-start-2 flex flex-col gap-1">
+                      <span className="text-sm leading-5 font-bold">{user.name}</span>
+                      <span className="text-xs">{user.email}</span>
+                      <span className="flex flex-wrap gap-2 text-xs text-neutral-500 dark:text-neutral-400">
+                        <span>@{user.username}</span>
+                        <span>{user.title}</span>
+                      </span>
                     </span>
-                  </span>
-                </Combobox.Item>
-              )}
-            </Combobox.List>
+                  </Combobox.Item>
+                )}
+              </Combobox.List>
+            </div>
           </Combobox.Popup>
         </Combobox.Positioner>
       </Combobox.Portal>

From 6bfb111df7d4d6958a7ca0f6998d06ba9615314e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 11 May 2026 15:50:00 +0200
Subject: [PATCH 168/257] Menu: use box-shadow instead of filter

---
 .../app/(docs)/react/components/menu/demos/_index.module.css  | 4 ++--
 .../menu/demos/checkbox-items/css-modules/index.module.css    | 4 ++--
 .../components/menu/demos/checkbox-items/tailwind/index.tsx   | 2 +-
 .../demos/detached-triggers-controlled/tailwind/index.tsx     | 2 +-
 .../menu/demos/detached-triggers-full/tailwind/index.tsx      | 4 ++--
 .../menu/demos/detached-triggers-simple/tailwind/index.tsx    | 2 +-
 .../menu/demos/group-labels/css-modules/index.module.css      | 4 ++--
 .../components/menu/demos/group-labels/tailwind/index.tsx     | 2 +-
 .../components/menu/demos/hero/css-modules/index.module.css   | 4 ++--
 .../react/components/menu/demos/hero/tailwind/index.tsx       | 2 +-
 .../menu/demos/open-on-hover/css-modules/index.module.css     | 4 ++--
 .../components/menu/demos/open-on-hover/tailwind/index.tsx    | 2 +-
 .../menu/demos/radio-items/css-modules/index.module.css       | 4 ++--
 .../components/menu/demos/radio-items/tailwind/index.tsx      | 2 +-
 .../menu/demos/submenu/css-modules/index.module.css           | 4 ++--
 .../react/components/menu/demos/submenu/tailwind/index.tsx    | 2 +-
 16 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
index 89ba4962c75..bcc9157247e 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
@@ -110,7 +110,7 @@
   border-radius: 0;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
@@ -123,7 +123,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
index d950484273f..11ce3bc7344 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
@@ -63,7 +63,7 @@
   border-radius: 0;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
@@ -76,7 +76,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index c9b0c5c85b2..12b7023165d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -17,7 +17,7 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Menu.CheckboxItem
               checked={showMinimap}
               onCheckedChange={setShowMinimap}
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
index 17b0f46e20f..5588355b89e 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -7,7 +7,7 @@ const itemClass =
 const triggerClass =
   'flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white active:bg-neutral-100 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 const popupClass =
-  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
+  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
 
 interface MenuItemDefinition {
   label: string;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
index b6263185dc7..1cda7433ca8 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
@@ -87,13 +87,13 @@ export default function MenuDetachedTriggersFullDemo() {
                 className={`
                   relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] py-1
                   origin-[var(--transform-origin)] border border-neutral-950
-                  bg-white text-neutral-950 outline-none drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12
+                  bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none
                   transition-[width,height,opacity,scale]
                   duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]
                   data-starting-style:scale-90 data-starting-style:opacity-0
                   data-ending-style:scale-90 data-ending-style:opacity-0
                   data-instant:transition-none
-                  dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none
+                  dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none
                 `}
               >
                 <Menu.Viewport
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
index 5b93ab55d63..a80c4ecca38 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Menu } from '@base-ui/react/menu';
 
 const demoMenu = Menu.createHandle();
 const popupClass =
-  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
+  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
 const itemClass =
   "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
index a2e3e7d21e1..e0e34f0ba45 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
@@ -63,7 +63,7 @@
   border-radius: 0;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
@@ -76,7 +76,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index dd9976d24a5..0a3d3a5cf05 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Menu.Group>
               <Menu.GroupLabel className="py-2 pr-8 pl-7.5 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
                 Sort
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
index 0e0ae0217e8..15c52134008 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
@@ -63,7 +63,7 @@
   border-radius: 0;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
@@ -76,7 +76,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
index afce8173dd8..8900a3119b8 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Menu.Item className={itemClass}>Add to Library</Menu.Item>
             <Menu.Item className={itemClass}>Add to Playlist</Menu.Item>
             <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
index 0e0ae0217e8..15c52134008 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
@@ -63,7 +63,7 @@
   border-radius: 0;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
@@ -76,7 +76,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
index 99a469547ff..755511d8e8d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
@@ -15,7 +15,7 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Menu.Item className={itemClass}>Get Up!</Menu.Item>
             <Menu.Item className={itemClass}>Inside Out</Menu.Item>
             <Menu.Item className={itemClass}>Night Beats</Menu.Item>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
index 4af152dca19..8a2bb422127 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
@@ -63,7 +63,7 @@
   border-radius: 0;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
@@ -76,7 +76,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index 7e68d2f6e02..bb984296c17 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleMenu() {
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Menu.RadioGroup value={value} onValueChange={setValue}>
               <Menu.RadioItem value="date" className={radioItemClass}>
                 <Menu.RadioItemIndicator className="col-start-1">
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
index aafe81f4ddb..213fa383cf0 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
@@ -63,7 +63,7 @@
   border-radius: 0;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
@@ -76,7 +76,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
index def324051f1..d7bff846008 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const popupClass =
-  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
+  'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
 const itemClass =
   "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 data-disabled:text-neutral-500 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white dark:data-disabled:text-neutral-400";
 const submenuTriggerClass =

From 07d86f9ae96f1a4353766966de527d9be6ee92f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 11 May 2026 23:54:31 +0200
Subject: [PATCH 169/257] All: drop-shadow -> box-shadow

---
 .../menu/demos/arrow/css-modules/index.module.css         | 4 ++--
 .../react/components/menu/demos/arrow/tailwind/index.tsx  | 2 +-
 .../demos/hero/css-modules/index.module.css               | 4 ++--
 .../navigation-menu/demos/hero/tailwind/index.tsx         | 2 +-
 .../demos/nested-inline/css-modules/index.module.css      | 4 ++--
 .../demos/nested-inline/tailwind/index.tsx                | 2 +-
 .../demos/nested/css-modules/index.module.css             | 4 ++--
 .../navigation-menu/demos/nested/tailwind/index.tsx       | 4 ++--
 .../react/components/popover/demos/_index.module.css      | 4 ++--
 .../demos/detached-triggers-controlled/tailwind/index.tsx | 2 +-
 .../detached-triggers-full/css-modules/index.module.css   | 4 ++--
 .../demos/detached-triggers-full/tailwind/index.tsx       | 2 +-
 .../demos/detached-triggers-simple/tailwind/index.tsx     | 2 +-
 .../components/popover/demos/hero/tailwind/index.tsx      | 2 +-
 .../popover/demos/open-on-hover/tailwind/index.tsx        | 2 +-
 .../demos/detached-triggers-controlled/tailwind/index.tsx | 2 +-
 .../detached-triggers-full/css-modules/index.module.css   | 4 ++--
 .../demos/detached-triggers-full/tailwind/index.tsx       | 2 +-
 .../demos/detached-triggers-simple/tailwind/index.tsx     | 2 +-
 .../components/preview-card/demos/hero/tailwind/index.tsx | 2 +-
 .../react/components/preview-card/demos/index.module.css  | 4 ++--
 .../toast/demos/anchored/css-modules/index.module.css     | 8 ++++----
 .../components/toast/demos/anchored/tailwind/index.tsx    | 4 ++--
 .../demos/detached-triggers-controlled/tailwind/index.tsx | 2 +-
 .../detached-triggers-full/css-modules/index.module.css   | 4 ++--
 .../demos/detached-triggers-full/tailwind/index.tsx       | 2 +-
 .../demos/detached-triggers-simple/tailwind/index.tsx     | 2 +-
 .../tooltip/demos/hero/css-modules/index.module.css       | 4 ++--
 .../components/tooltip/demos/hero/tailwind/index.tsx      | 2 +-
 .../react/components/tooltip/demos/index.module.css       | 4 ++--
 30 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
index da90f84dc8f..ceede02f15a 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
@@ -63,7 +63,7 @@
   border-radius: 0;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
@@ -76,7 +76,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
index 587f33f262d..ac9db7fb86c 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function MenuArrowDemo() {
           className="outline-hidden"
           sideOffset={({ side }) => (side === 'top' ? 12 : 8)}
         >
-          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+          <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Menu.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:[transform:translate(-50%,50%)_rotate(45deg)] before:border before:border-neutral-950 before:bg-white before:content-[''] dark:before:border-white dark:before:bg-neutral-950" />
             <Menu.Item className={itemClass}>Add to Library</Menu.Item>
             <Menu.Item className={itemClass}>Add to Playlist</Menu.Item>
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
index 07a90cbbff9..6cfe721d16b 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
@@ -128,7 +128,7 @@
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition-property: opacity, transform, width, height;
   transition-duration: var(--duration);
@@ -147,7 +147,7 @@
     transition-duration: 0.15s;
   }
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
index a24e00b8a92..f079f96d55b 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
@@ -71,7 +71,7 @@ export default function ExampleNavigationMenu() {
             ['--easing' as string]: 'ease-out',
           }}
         >
-          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
index 37fc8036488..36895903fdc 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
@@ -128,7 +128,7 @@
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition-property: opacity, transform, width, height;
   transition-duration: var(--duration);
@@ -147,7 +147,7 @@
     transition-duration: 0.15s;
   }
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
index 0114964689d..7126aaeed8b 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
@@ -121,7 +121,7 @@ export default function ExampleNavigationMenu() {
             ['--easing' as string]: 'ease-out',
           }}
         >
-          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
index 1c6058c2eff..d693098b999 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
@@ -128,7 +128,7 @@
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition-property: opacity, transform, width, height;
   transition-duration: var(--duration);
@@ -147,7 +147,7 @@
     transition-duration: 0.15s;
   }
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
index 09462ad7c69..b2dc6f9184c 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
@@ -67,7 +67,7 @@ export default function ExampleNavigationMenu() {
                         ['--easing' as string]: 'ease-out',
                       }}
                     >
-                      <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+                      <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
                         <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
                       </NavigationMenu.Popup>
                     </NavigationMenu.Positioner>
@@ -89,7 +89,7 @@ export default function ExampleNavigationMenu() {
             ['--easing' as string]: 'ease-out',
           }}
         >
-          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 outline-none drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
diff --git a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
index 2b9ebbd3c4c..18cc4dcad4c 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
@@ -14,7 +14,7 @@
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
@@ -25,7 +25,7 @@
   max-width: 500px;
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 
   &[data-starting-style],
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
index 0d749c8bdac..5fdf3838969 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -54,7 +54,7 @@ export default function PopoverDetachedTriggersControlledDemo() {
             className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)]"
             sideOffset={8}
           >
-            <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+            <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
               <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
               <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
index c8ee245deaa..031e1eb4c25 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
@@ -21,7 +21,7 @@
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   border: 1px solid light-dark(var(--color-neutral-950), white);
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
 
   /* These are required to make the size animations work */
@@ -36,7 +36,7 @@
   transition-duration: var(--animation-duration);
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 
   &[data-starting-style],
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
index 12a22b4f98a..2d4da348e5e 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
@@ -34,7 +34,7 @@ export default function PopoverDetachedTriggersFullDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none"
             >
-              <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[31.25rem] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:scale-90 data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-90 data-starting-style:opacity-0">
+              <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[31.25rem] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:scale-90 data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-90 data-starting-style:opacity-0">
                 <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
 
                 <Popover.Viewport
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
index ef26346ea26..f2604591570 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
@@ -17,7 +17,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
       <Popover.Root handle={demoPopover}>
         <Popover.Portal>
           <Popover.Positioner sideOffset={8}>
-            <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+            <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
               <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
               <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
index 40bd3ec2fde..d8b877db523 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExamplePopover() {
       <Popover.Trigger className={triggerClassName}>Notifications</Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
-          <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+          <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
             <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
             <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
index b1b53f8a84c..b46126b96db 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
@@ -11,7 +11,7 @@ export default function ExamplePopover() {
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
-          <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+          <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
             <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
             <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
index a8b57628ae5..0142ee74de4 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -121,7 +121,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)]"
             >
-              <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+              <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
                 <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
                 {payload}
               </PreviewCard.Popup>
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
index ef591b71d40..87d6213002b 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
@@ -16,7 +16,7 @@
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
 
   /* These are required to make the size animations work */
@@ -35,7 +35,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
index a10dca29097..f55aa7e0116 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
@@ -93,7 +93,7 @@ export default function PreviewCardDetachedTriggersFullDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]"
             >
-              <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[width,height,opacity,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+              <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[width,height,opacity,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
                 <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
 
                 <PreviewCard.Viewport className="relative overflow-clip w-full h-full [&_[data-previous]]:w-[var(--popup-width)] [&_[data-previous]]:translate-x-0 [&_[data-previous]]:opacity-100 [&_[data-previous]]:transition-[translate,opacity] [&_[data-previous]]:duration-[350ms,175ms] [&_[data-previous]]:ease-[cubic-bezier(0.22,1,0.36,1)] [&_[data-current]]:w-[var(--popup-width)] [&_[data-current]]:translate-x-0 [&_[data-current]]:opacity-100 [&_[data-current]]:transition-[translate,opacity] [&_[data-current]]:duration-[350ms,175ms] [&_[data-current]]:ease-[cubic-bezier(0.22,1,0.36,1)] data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:-translate-x-[30%] data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:opacity-0 data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:translate-x-[30%] data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:opacity-0 data-[activation-direction~='left']:[&_[data-previous][data-ending-style]]:translate-x-[30%] data-[activation-direction~='left']:[&_[data-previous][data-ending-style]]:opacity-0 data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:-translate-x-[30%] data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:opacity-0">
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
index 9526e59d732..1c5096e5f8b 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
@@ -21,7 +21,7 @@ export default function PreviewCardDetachedTriggersSimpleDemo() {
       <PreviewCard.Root handle={demoPreviewCard}>
         <PreviewCard.Portal>
           <PreviewCard.Positioner sideOffset={8}>
-            <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+            <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
               <div className="flex w-min flex-col gap-2 p-2">
                 <img
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
index 808ffec446e..ce20325395c 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function ExamplePreviewCard() {
 
       <PreviewCard.Portal>
         <PreviewCard.Positioner sideOffset={8}>
-          <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+          <PreviewCard.Popup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <PreviewCard.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
             <div className="flex w-min flex-col gap-2 p-2">
               <img
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
index 41f40fe6e72..ec2ae750b40 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
@@ -12,7 +12,7 @@
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
@@ -25,7 +25,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
index 5147f78a2a3..53e61a3c5b3 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
@@ -17,7 +17,7 @@
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
@@ -30,7 +30,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 
   &:focus-visible {
@@ -228,7 +228,7 @@
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
@@ -245,7 +245,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index 4e8bab8df62..d65ae0deb5b 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -77,7 +77,7 @@ function CopyButton() {
       </Tooltip.Trigger>
       <Tooltip.Portal>
         <Tooltip.Positioner sideOffset={10}>
-          <Tooltip.Popup className="flex origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-instant:duration-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none">
+          <Tooltip.Popup className="flex origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-instant:duration-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Tooltip.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
             Copy
           </Tooltip.Popup>
@@ -100,7 +100,7 @@ function AnchoredToasts() {
           >
             <Toast.Root
               toast={toast}
-              className="flex w-max origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+              className="flex w-max origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
             >
               <Toast.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
               <Toast.Content>
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
index eebc45f4306..cefb9169f93 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -12,7 +12,7 @@ const buttonClass =
   'flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
-  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
+  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
 
 const arrowClass =
   "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
index 5d0d3ba6fb1..48c0080de14 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
@@ -79,7 +79,7 @@
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -100,7 +100,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
index c226da67830..9df24a4b93e 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
@@ -58,7 +58,7 @@ export default function TooltipDetachedTriggersFullDemo() {
                   bg-white dark:bg-neutral-950
                   text-sm text-neutral-950 dark:text-white
                   origin-[var(--transform-origin)]
-                  drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 dark:drop-shadow-none
+                  shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none
                   transition-[width,height,opacity,scale]
                   duration-[0.35s]
                   ease-[cubic-bezier(0.22,1,0.36,1)]
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
index b58718208a7..257e00366f1 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
@@ -9,7 +9,7 @@ const triggerClass =
   'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
-  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
+  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
 
 const arrowClass =
   "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
index f7d1a79e648..96500952890 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
@@ -55,7 +55,7 @@
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
@@ -72,7 +72,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
index 9ba4b66a076..2f4ce62862a 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
@@ -5,7 +5,7 @@ const triggerClass =
   'flex size-8 items-center justify-center border-0 bg-transparent text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-50 active:bg-neutral-100 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
 
 const popupClass =
-  'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] drop-shadow-[0.25rem_0.25rem_0] drop-shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:drop-shadow-none';
+  'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
 
 const arrowClass =
   "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
index 84ef8c260fd..9226f843ec6 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
@@ -72,7 +72,7 @@
   border: 1px solid light-dark(var(--color-neutral-950), white);
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  filter: drop-shadow(0.25rem 0.25rem 0 rgb(0 0 0 / 12%));
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
@@ -89,7 +89,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    filter: none;
+    box-shadow: none;
   }
 }
 

From 4c7831fc04381632b1b6e9f8a7941ce6f22b9cb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 12 May 2026 08:58:52 +0200
Subject: [PATCH 170/257] All: fix colors

---
 .../form/demos/form-action/tailwind/index.tsx        |  2 +-
 .../components/form/demos/hero/tailwind/index.tsx    |  2 +-
 .../components/form/demos/zod/tailwind/index.tsx     |  2 +-
 .../detached-triggers-controlled/tailwind/index.tsx  |  2 +-
 .../demos/detached-triggers-full/tailwind/index.tsx  |  4 ++--
 .../switch/demos/hero/css-modules/index.module.css   | 12 ++++++------
 .../components/switch/demos/hero/tailwind/index.tsx  |  6 +++---
 .../components/toggle/demos/hero/tailwind/index.tsx  |  2 +-
 .../detached-triggers-controlled/tailwind/index.tsx  |  4 ++--
 .../demos/detached-triggers-full/tailwind/index.tsx  |  2 +-
 .../detached-triggers-simple/tailwind/index.tsx      |  2 +-
 .../components/tooltip/demos/hero/tailwind/index.tsx |  2 +-
 .../react/handbook/forms/demos/components/switch.tsx |  4 ++--
 .../react/handbook/forms/demos/components/toast.tsx  |  2 +-
 .../render-callback/css-modules/index.module.css     |  4 ++--
 .../demos/render/css-modules/index.module.css        |  2 +-
 16 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
index 7ee86b109a2..a6e154c70b3 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
@@ -34,7 +34,7 @@ export default function ActionStateForm() {
         type="submit"
         disabled={loading}
         focusableWhenDisabled
-        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
index 52242b7617c..5db98c6ed13 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
@@ -45,7 +45,7 @@ export default function ExampleForm() {
         disabled={loading}
         focusableWhenDisabled
         type="submit"
-        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
index 95257eab2c7..0e1d03dd911 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
@@ -58,7 +58,7 @@ export default function Page() {
       </Field.Root>
       <Button
         type="submit"
-        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-50 active:not-data-disabled:bg-neutral-100 data-disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-900 dark:active:not-data-disabled:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
index 5588355b89e..7ce5f6e28ae 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { Menu } from '@base-ui/react/menu';
 const itemClass =
   "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
 const triggerClass =
-  'flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white active:bg-neutral-100 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
+  'flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white active:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800';
 const popupClass =
   'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
index 1cda7433ca8..eb1f52a3350 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
@@ -40,9 +40,9 @@ const triggerClass = `
   rounded-none border border-neutral-950 bg-white
   px-3 text-sm font-normal text-neutral-950
   select-none
-  hover:bg-neutral-50 active:bg-neutral-100 data-popup-open:bg-neutral-100
+  hover:bg-neutral-100 active:bg-neutral-200 data-popup-open:bg-neutral-100
   dark:border-white dark:bg-neutral-950 dark:text-white
-  dark:hover:bg-neutral-900 dark:active:bg-neutral-800 dark:data-popup-open:bg-neutral-800
+  dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800
   focus-visible:outline focus-visible:outline-2
   focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white
 `;
diff --git a/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
index 1eebdec5cd4..a316b7a5371 100644
--- a/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
@@ -5,21 +5,21 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: light-dark(var(--color-neutral-900), var(--color-neutral-50));
+  color: light-dark(var(--color-neutral-950), white);
 }
 
 .Switch {
   box-sizing: border-box;
   display: flex;
   flex-shrink: 0;
-  border: 1px solid light-dark(var(--color-neutral-900), var(--color-neutral-50));
+  border: 1px solid light-dark(var(--color-neutral-950), white);
   padding: 0.125rem;
   width: 2.25rem;
   height: 1.25rem;
-  background-color: light-dark(var(--color-neutral-50), var(--color-neutral-900));
+  background-color: light-dark(white, var(--color-neutral-950));
 
   &[data-checked] {
-    background-color: light-dark(var(--color-neutral-900), var(--color-neutral-50));
+    background-color: light-dark(var(--color-neutral-950), white);
   }
 
   &:focus-visible {
@@ -31,11 +31,11 @@
 .Thumb {
   width: 0.875rem;
   height: 0.875rem;
-  background-color: light-dark(var(--color-neutral-900), var(--color-neutral-50));
+  background-color: light-dark(var(--color-neutral-950), white);
   transition: translate 150ms ease;
 
   &[data-checked] {
     translate: 1rem 0;
-    background-color: light-dark(var(--color-neutral-50), var(--color-neutral-900));
+    background-color: light-dark(white, var(--color-neutral-950));
   }
 }
diff --git a/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
index 25f11a7b406..df0e0473afa 100644
--- a/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
@@ -2,12 +2,12 @@ import { Switch } from '@base-ui/react/switch';
 
 export default function ExampleSwitch() {
   return (
-    <label className="flex items-center gap-2 text-sm font-normal text-neutral-900 dark:text-neutral-50">
+    <label className="flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white">
       <Switch.Root
         defaultChecked
-        className="flex h-5 w-9 shrink-0 border border-neutral-900 bg-neutral-50 p-0.5 dark:border-neutral-50 dark:bg-neutral-900 data-checked:bg-neutral-900 dark:data-checked:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+        className="flex h-5 w-9 shrink-0 border border-neutral-950 bg-white p-0.5 dark:border-white dark:bg-neutral-950 data-checked:bg-neutral-950 dark:data-checked:bg-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
-        <Switch.Thumb className="size-3.5 bg-neutral-900 transition-transform duration-150 data-checked:translate-x-4 data-checked:bg-neutral-50 dark:bg-neutral-50 dark:data-checked:bg-neutral-900" />
+        <Switch.Thumb className="size-3.5 bg-neutral-950 transition-transform duration-150 data-checked:translate-x-4 data-checked:bg-white dark:bg-white dark:data-checked:bg-neutral-950" />
       </Switch.Root>
       Notifications
     </label>
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
index ab067df3a5a..f3c66986ce0 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleToggle() {
   return (
     <Toggle
       aria-label="Favorite"
-      className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-50 dark:hover:not-data-disabled:bg-neutral-900 active:not-data-disabled:bg-neutral-100 dark:active:not-data-disabled:bg-neutral-800 data-pressed:text-neutral-950 dark:data-pressed:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+      className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-pressed:text-neutral-950 dark:data-pressed:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       render={(props, state) => {
         if (state.pressed) {
           return (
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
index cefb9169f93..009cf53afb4 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -6,10 +6,10 @@ import { InfoIcon } from '../../icons-tw';
 const demoTooltip = Tooltip.createHandle();
 
 const iconButtonClass =
-  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
+  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
 
 const buttonClass =
-  'flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
+  'flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
 
 const popupClass =
   'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
index 9df24a4b93e..603cbdd13c3 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
@@ -6,7 +6,7 @@ import { InfoIcon, HelpIcon, AlertIcon } from '../../icons-tw';
 const demoTooltip = Tooltip.createHandle<React.ComponentType>();
 
 const triggerClass =
-  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
+  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
 
 const arrowClass =
   "relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
index 257e00366f1..852df57d684 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
@@ -6,7 +6,7 @@ import { InfoIcon } from '../../icons-tw';
 const demoTooltip = Tooltip.createHandle();
 
 const triggerClass =
-  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-50 active:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
+  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
 
 const popupClass =
   'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
index 2f4ce62862a..6a18548410c 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Tooltip } from '@base-ui/react/tooltip';
 
 const triggerClass =
-  'flex size-8 items-center justify-center border-0 bg-transparent text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-50 active:bg-neutral-100 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-900 dark:active:bg-neutral-800';
+  'flex size-8 items-center justify-center border-0 bg-transparent text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-100 active:bg-neutral-200 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
 
 const popupClass =
   'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx
index a975b966bf8..477a0d8ed5e 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx
@@ -6,7 +6,7 @@ export function Root({ className, ...props }: Switch.Root.Props) {
   return (
     <Switch.Root
       className={clsx(
-        'flex h-5 w-9 shrink-0 border border-neutral-900 bg-neutral-50 p-0.5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-checked:bg-neutral-900 dark:border-neutral-50 dark:bg-neutral-900 dark:data-checked:bg-neutral-50',
+        'flex h-5 w-9 shrink-0 border border-neutral-950 bg-white p-0.5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-checked:bg-neutral-950 dark:border-white dark:bg-neutral-950 dark:data-checked:bg-white',
         className,
       )}
       {...props}
@@ -18,7 +18,7 @@ export function Thumb({ className, ...props }: Switch.Thumb.Props) {
   return (
     <Switch.Thumb
       className={clsx(
-        'size-3.5 bg-neutral-900 transition-transform duration-150 data-checked:translate-x-4 data-checked:bg-neutral-50 dark:bg-neutral-50 dark:data-checked:bg-neutral-900',
+        'size-3.5 bg-neutral-950 transition-transform duration-150 data-checked:translate-x-4 data-checked:bg-white dark:bg-white dark:data-checked:bg-neutral-950',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
index 97df3e6db42..b5010cd37f9 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
@@ -14,7 +14,7 @@ function Toasts() {
         <Toast.Title className="text-sm font-bold" />
         <Toast.Description className="text-sm text-neutral-700 dark:text-neutral-300" />
         <div
-          className="mt-2 border border-neutral-950 bg-neutral-50 p-2 text-xs text-neutral-950 select-text dark:border-white dark:bg-neutral-900 dark:text-white"
+          className="mt-2 border border-neutral-950 p-2 text-xs select-text dark:border-white"
           data-base-ui-swipe-ignore
         >
           <pre className="whitespace-pre-wrap">{JSON.stringify(toast.data, null, 2)}</pre>
diff --git a/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
index c660dd7a7c7..10dc2ac5338 100644
--- a/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
@@ -20,12 +20,12 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-50), var(--color-neutral-900));
+      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   }
 
   &:focus-visible {
diff --git a/docs/src/app/(docs)/react/utils/use-render/demos/render/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/use-render/demos/render/css-modules/index.module.css
index 4465f17b400..a1a576a446f 100644
--- a/docs/src/app/(docs)/react/utils/use-render/demos/render/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/use-render/demos/render/css-modules/index.module.css
@@ -1,7 +1,7 @@
 .Text {
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-900);
+  color: light-dark(var(--color-neutral-950), white);
 
   strong& {
     font-weight: 700;

From a51126ca0d8c43f8e0872b34c4f8a522494b1ef6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 12 May 2026 09:01:51 +0200
Subject: [PATCH 171/257] Handbook: update code snippet

---
 docs/src/app/(docs)/react/handbook/styling/page.mdx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/src/app/(docs)/react/handbook/styling/page.mdx b/docs/src/app/(docs)/react/handbook/styling/page.mdx
index ad9173d34ef..d1f2d7049b3 100644
--- a/docs/src/app/(docs)/react/handbook/styling/page.mdx
+++ b/docs/src/app/(docs)/react/handbook/styling/page.mdx
@@ -71,16 +71,16 @@ import { Menu } from '@base-ui/react/menu';
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-10 items-center justify-center gap-2 rounded-md border border-neutral-200 bg-neutral-50 px-3.5 text-base leading-none whitespace-nowrap font-normal text-neutral-900 select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white active:bg-neutral-100 data-popup-open:bg-neutral-100">
+      <Menu.Trigger className="flex h-8 items-center justify-center rounded-md border border-neutral-950 bg-white px-3 text-sm text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800 dark:focus-visible:outline-white">
         Song
       </Menu.Trigger>
       <Menu.Portal>
-        <Menu.Positioner className="outline-none" sideOffset={8}>
-          <Menu.Popup className="origin-[var(--transform-origin)] rounded-md bg-[canvas] py-1 text-neutral-900 shadow-lg shadow-neutral-200 outline-1 outline-neutral-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-neutral-300">
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-neutral-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-neutral-900">
+        <Menu.Positioner className="outline-hidden" sideOffset={8}>
+          <Menu.Popup className="origin-(--transform-origin) border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden transition data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:bg-neutral-950 data-highlighted:text-white dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950">
               Add to Library
             </Menu.Item>
-            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-neutral-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-neutral-900">
+            <Menu.Item className="flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:bg-neutral-950 data-highlighted:text-white dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950">
               Add to Playlist
             </Menu.Item>
           </Menu.Popup>

From 6ce66f046f71a11c9d88b5a57a2b7d8d4fe3db00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 12 May 2026 12:50:57 +0200
Subject: [PATCH 172/257] All: 16px font-size for inputs on devices with coarse
 pointer

---
 .../demos/async/css-modules/index.module.css  |  9 ++-
 .../demos/async/tailwind/index.tsx            |  2 +-
 .../css-modules/index.module.css              |  9 ++-
 .../demos/auto-highlight/tailwind/index.tsx   |  2 +-
 .../css-modules/index.module.css              |  6 ++
 .../demos/command-palette/tailwind/index.tsx  |  2 +-
 .../css-modules/index.module.css              |  9 ++-
 .../demos/fuzzy-matching/tailwind/index.tsx   |  2 +-
 .../demos/grid/css-modules/index.module.css   | 18 +++++-
 .../demos/grid/tailwind/index.tsx             |  4 +-
 .../grouped/css-modules/index.module.css      |  9 ++-
 .../demos/grouped/tailwind/index.tsx          |  2 +-
 .../demos/hero/css-modules/index.module.css   |  9 ++-
 .../demos/hero/tailwind/index.tsx             |  2 +-
 .../demos/inline/css-modules/index.module.css |  9 ++-
 .../demos/inline/tailwind/index.tsx           |  2 +-
 .../demos/limit/css-modules/index.module.css  |  9 ++-
 .../demos/limit/tailwind/index.tsx            |  2 +-
 .../virtualized/css-modules/index.module.css  |  9 ++-
 .../demos/virtualized/tailwind/index.tsx      |  2 +-
 .../css-modules/index.module.css              |  8 ++-
 .../demos/async-multiple/tailwind/index.tsx   |  2 +-
 .../async-single/css-modules/index.module.css | 12 +++-
 .../demos/async-single/tailwind/index.tsx     |  2 +-
 .../creatable/css-modules/index.module.css    | 16 ++++-
 .../demos/creatable/tailwind/index.tsx        |  8 +--
 .../grouped/css-modules/index.module.css      | 12 +++-
 .../combobox/demos/grouped/tailwind/index.tsx |  2 +-
 .../demos/hero/css-modules/index.module.css   | 12 +++-
 .../combobox/demos/hero/tailwind/index.tsx    |  2 +-
 .../css-modules/index.module.css              |  9 ++-
 .../input-inside-popup/tailwind/index.tsx     |  2 +-
 .../multiple/css-modules/index.module.css     |  8 ++-
 .../demos/multiple/tailwind/index.tsx         |  2 +-
 .../virtualized/css-modules/index.module.css  |  9 ++-
 .../demos/virtualized/tailwind/index.tsx      |  2 +-
 .../css-modules/index.module.css              |  9 ++-
 .../close-confirmation/tailwind/index.tsx     |  2 +-
 .../demos/nested/css-modules/index.module.css | 59 +++++++++++++++----
 .../drawer/demos/nested/tailwind/index.tsx    |  4 +-
 .../demos/hero/css-modules/index.module.css   |  9 ++-
 .../field/demos/hero/tailwind/index.tsx       |  2 +-
 .../demos/hero/css-modules/index.module.css   |  9 ++-
 .../fieldset/demos/hero/tailwind/index.tsx    |  4 +-
 .../form-action/css-modules/index.module.css  |  9 ++-
 .../form/demos/form-action/tailwind/index.tsx |  2 +-
 .../demos/hero/css-modules/index.module.css   |  9 ++-
 .../form/demos/hero/tailwind/index.tsx        |  2 +-
 .../demos/zod/css-modules/index.module.css    |  9 ++-
 .../form/demos/zod/tailwind/index.tsx         |  4 +-
 .../demos/hero/css-modules/index.module.css   |  9 ++-
 .../input/demos/hero/tailwind/index.tsx       |  2 +-
 .../demos/hero/css-modules/index.module.css   |  6 ++
 .../demos/hero/tailwind/index.tsx             |  8 +--
 .../alphanumeric/css-modules/index.module.css |  2 +
 .../css-modules/index.module.css              |  2 +
 .../css-modules/index.module.css              |  2 +
 .../grouped/css-modules/index.module.css      |  2 +
 .../demos/hero/css-modules/index.module.css   |  2 +
 .../password/css-modules/index.module.css     |  2 +
 .../forms/demos/components/autocomplete.tsx   |  2 +-
 .../forms/demos/components/combobox.tsx       |  2 +-
 .../handbook/forms/demos/components/field.tsx |  2 +-
 .../forms/demos/components/number-field.tsx   |  2 +-
 64 files changed, 320 insertions(+), 84 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
index d7f6bd888f4..a34f0eaa6cf 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
@@ -1,12 +1,14 @@
 .Input {
   box-sizing: border-box;
-  padding-inline: 0.5rem;
+  padding: 0 0.5rem;
   margin: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
   width: 16rem;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -16,6 +18,11 @@
     outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Label {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
index c24fd2f97e0..08a9b3141f5 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
@@ -81,7 +81,7 @@ export default function ExampleAsyncAutocomplete() {
         Search movies by name or year
         <Autocomplete.Input
           placeholder="e.g. Pulp Fiction or 1994"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
index bb36f88ae4d..14f970d1f14 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
@@ -1,12 +1,14 @@
 .Input {
   box-sizing: border-box;
-  padding-inline: 0.5rem;
+  padding: 0 0.5rem;
   margin: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
   width: 16rem;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -16,6 +18,11 @@
     outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Label {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
index f4343641fb8..f9098f9cbd8 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleAutocompleteAutoHighlight() {
         Auto highlight on type
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
index 4f12e6d4347..0a11040d37f 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
@@ -101,6 +101,7 @@
   border-radius: 0;
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -115,6 +116,11 @@
     outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -1px;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .ListArea {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
index ae44e7ea210..02b54d09234 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
@@ -31,7 +31,7 @@ export default function ExampleAutocompleteCommandPalette() {
               keepHighlight
             >
               <Autocomplete.Input
-                className="h-10 w-full border-0 border-b border-neutral-950 bg-white px-4 text-sm font-normal tracking-[0.016em] text-neutral-950 outline-none placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400"
+                className="h-10 w-full border-0 border-b border-neutral-950 bg-white px-4 text-sm any-pointer-coarse:text-base font-normal tracking-[0.016em] text-neutral-950 outline-none placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400"
                 placeholder="Search for apps and commands…"
               />
               <Dialog.Close className="sr-only">Close command palette</Dialog.Close>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
index 5f83161f069..64802aeacc7 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
@@ -10,13 +10,15 @@
 
 .Input {
   box-sizing: border-box;
-  padding-inline: 0.5rem;
+  padding: 0 0.5rem;
   margin: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
   width: 16rem;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -26,6 +28,11 @@
     outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Positioner {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
index 95c1d920e1c..2ad922fc2e0 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleFuzzyMatchingAutocomplete() {
         Fuzzy search documentation
         <Autocomplete.Input
           placeholder="e.g. React"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
index ebdee29fe6e..2f3eceed7b8 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
@@ -10,14 +10,16 @@
 
 .TextInput {
   box-sizing: border-box;
-  padding-inline: 0.5rem;
+  padding: 0 0.5rem;
   margin: 0;
   margin-right: -1px;
   border: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
   border-right: 0;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
   color: light-dark(var(--color-neutral-950), white);
   outline: none;
@@ -28,6 +30,11 @@
     outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .EmojiButton {
@@ -114,12 +121,14 @@
 
 .Input {
   box-sizing: border-box;
-  padding-inline: 0.5rem;
+  padding: 0 0.5rem;
+  border-radius: 0;
   margin: 0;
   width: 100%;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
   outline: none;
@@ -128,6 +137,11 @@
     outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -1px;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Positioner {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
index d8778be1cf6..ea61cc93052 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
@@ -35,7 +35,7 @@ export default function ExampleEmojiPicker() {
         <input
           ref={textInputRef}
           type="text"
-          className="-mr-px h-8 border border-r-0 border-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none bg-white dark:bg-neutral-950 focus:relative focus:outline-2 focus:-outline-offset-2 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="-mr-px h-8 border border-r-0 border-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none bg-white dark:bg-neutral-950 focus:relative focus:outline-2 focus:-outline-offset-2 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
           placeholder="iMessage"
           value={textValue}
           onChange={(event) => setTextValue(event.target.value)}
@@ -69,7 +69,7 @@ export default function ExampleEmojiPicker() {
                 <div className="relative z-[2] h-[var(--input-container-height)] w-64 bg-white dark:bg-neutral-950">
                   <Autocomplete.Input
                     placeholder="Search emojis…"
-                    className="h-8 w-full border-0 bg-white px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:bg-neutral-950 dark:text-white"
+                    className="h-8 w-full border-0 bg-white px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:bg-neutral-950 dark:text-white"
                   />
                 </div>
                 <Autocomplete.Empty>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
index 74901fd8174..68985208a36 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
@@ -1,12 +1,14 @@
 .Input {
   box-sizing: border-box;
-  padding-inline: 0.5rem;
+  padding: 0 0.5rem;
   margin: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
   width: 16rem;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -16,6 +18,11 @@
     outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Label {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
index 374c462b0ff..c37ba539ead 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleGroupAutocomplete() {
         Select a tag
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
index da77fe7a064..f3449b9523c 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
@@ -1,12 +1,14 @@
 .Input {
   box-sizing: border-box;
-  padding-inline: 0.5rem;
+  padding: 0 0.5rem;
   margin: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
   width: 16rem;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -16,6 +18,11 @@
     outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Label {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
index b97571df8b0..43a5ef87195 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleAutocomplete() {
         Search tags
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
index 40b1993c123..3ce343c1b99 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
@@ -6,13 +6,15 @@
 
 .Input {
   box-sizing: border-box;
-  padding-inline: 0.5rem;
+  padding: 0 0.5rem;
   margin: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
   width: 16rem;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -22,6 +24,11 @@
     outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Label {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
index f86d6dd41a7..2a04fe5c4b9 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleAutocompleteInline() {
         Search tags
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
index d93bf73db92..f07e9ceb868 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
@@ -1,12 +1,14 @@
 .Input {
   box-sizing: border-box;
-  padding-inline: 0.5rem;
+  padding: 0 0.5rem;
   margin: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
   width: 16rem;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -16,6 +18,11 @@
     outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Label {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
index a56d99d2977..2c70e5a1b39 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
@@ -25,7 +25,7 @@ export default function ExampleAutocompleteLimit() {
         Limit results to 8
         <Autocomplete.Input
           placeholder="e.g. component"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
index 3e3739eade9..250061b103d 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
@@ -1,12 +1,14 @@
 .Input {
   box-sizing: border-box;
-  padding-inline: 0.5rem;
+  padding: 0 0.5rem;
   margin: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
   width: 16rem;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -16,6 +18,11 @@
     outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Label {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
index 0be7edd38dd..d9fe2726444 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
@@ -32,7 +32,7 @@ export default function ExampleVirtualizedAutocomplete() {
     >
       <label className="flex flex-col gap-1 text-sm font-bold text-neutral-950 dark:text-white">
         Search 10,000 items
-        <Autocomplete.Input className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white" />
+        <Autocomplete.Input className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white" />
       </label>
 
       <Autocomplete.Portal>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
index f8691fc406e..f94febf00e1 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
@@ -116,10 +116,11 @@
   padding: 0;
   margin: 0;
   border: none;
+  border-radius: 0;
   height: calc(1.5rem - 2px);
   font-family: inherit;
   font-size: 0.875rem;
-  line-height: 1;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -128,6 +129,11 @@
   &:focus {
     outline: none;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Positioner {
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index 37040a56cae..88a38878d53 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -164,7 +164,7 @@ export default function ExampleAsyncMultipleCombobox() {
                   <Combobox.Input
                     id={id}
                     placeholder={value.length > 0 ? '' : 'e.g. Michael'}
-                    className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-white p-0 text-sm dark:bg-neutral-950 leading-none font-normal text-neutral-950 outline-none dark:text-white"
+                    className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-white p-0 text-sm any-pointer-coarse:text-base dark:bg-neutral-950 font-normal text-neutral-950 outline-none dark:text-white"
                   />
                 </React.Fragment>
               )}
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
index c2062ab27cf..c2c4cc279ce 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
@@ -27,7 +27,7 @@
   }
 
   &:has(.Clear) .Input {
-    padding-right: calc(0.5rem + 2rem * 2);
+    padding: 0 calc(0.5rem + 2rem * 2) 0 0.5rem;
   }
 }
 
@@ -36,11 +36,12 @@
   margin: 0;
   width: 100%;
   height: 100%;
-  padding-left: 0.5rem;
-  padding-right: calc(0.5rem + 2rem);
+  padding: 0 calc(0.5rem + 2rem) 0 0.5rem;
   border: none;
+  border-radius: 0;
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -48,6 +49,11 @@
   &:focus {
     outline: none;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .ActionButtons {
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index 2cb47696b49..8607c935f25 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -117,7 +117,7 @@ export default function ExampleAsyncSingleCombobox() {
           <Combobox.Input
             id={id}
             placeholder="e.g. Michael"
-            className="h-full w-full border-0 bg-white pl-2 dark:bg-neutral-950 text-sm font-normal text-neutral-950 outline-none dark:text-white"
+            className="h-full w-full border-0 bg-white pl-2 dark:bg-neutral-950 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none dark:text-white"
           />
           <div className="absolute right-0 bottom-0 flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
             <Combobox.Clear
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
index 2d5793bd3c4..a7ca5bddb1a 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
@@ -116,10 +116,11 @@
   padding: 0;
   margin: 0;
   border: none;
+  border-radius: 0;
   height: calc(1.5rem - 2px);
   font-family: inherit;
   font-size: 0.875rem;
-  line-height: 1;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -128,6 +129,11 @@
   &:focus {
     outline: none;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Positioner {
@@ -324,9 +330,10 @@
   width: 100%;
   height: 2rem;
   border: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  padding-inline: 0.5rem;
+  padding: 0 0.5rem;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -336,6 +343,11 @@
     outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
index 818707bb6e5..4a4f2f9b29c 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
@@ -152,7 +152,7 @@ export default function ExampleCreatableCombobox() {
                       ref={comboboxInputRef}
                       id={id}
                       placeholder={value.length > 0 ? '' : 'e.g. bug'}
-                      className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-white p-0 text-sm dark:bg-neutral-950 leading-none font-normal text-neutral-950 outline-none dark:text-white"
+                      className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-white p-0 text-sm any-pointer-coarse:text-base dark:bg-neutral-950 font-normal text-neutral-950 outline-none dark:text-white"
                       onKeyDown={handleInputKeyDown}
                     />
                   </React.Fragment>
@@ -216,17 +216,17 @@ export default function ExampleCreatableCombobox() {
             <form onSubmit={handleCreateSubmit}>
               <input
                 ref={createInputRef}
-                className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm leading-5 font-normal text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:text-white"
+                className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:text-white"
                 placeholder="Label name"
                 defaultValue={pendingQueryRef.current}
               />
               <div className="mt-4 flex justify-end gap-3">
-                <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700">
+                <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700">
                   Cancel
                 </Dialog.Close>
                 <button
                   type="submit"
-                  className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700"
+                  className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700"
                 >
                   Create
                 </button>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
index 92794e92ea5..4a8b53b9293 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
@@ -13,19 +13,20 @@
 }
 
 .InputGroup:has(.Clear) .Input {
-  padding-right: calc(0.5rem + 2rem * 2);
+  padding: 0 calc(0.5rem + 2rem * 2) 0 0.5rem;
 }
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.5rem;
-  padding-right: calc(0.5rem + 2rem);
+  padding: 0 calc(0.5rem + 2rem) 0 0.5rem;
   margin: 0;
   border: none;
+  border-radius: 0;
   width: 100%;
   height: 100%;
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -34,6 +35,11 @@
   &:focus {
     outline: none;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Label {
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index 191b12465ab..d79ff029c5b 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleGroupedCombobox() {
           <Combobox.Input
             placeholder="e.g. Mango"
             id={id}
-            className="h-full w-full border-0 bg-white pl-2 dark:bg-neutral-950 text-sm font-normal text-neutral-950 outline-none dark:text-white"
+            className="h-full w-full border-0 bg-white pl-2 dark:bg-neutral-950 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none dark:text-white"
           />
           <div className="absolute right-0 bottom-0 flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
             <Combobox.Clear
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
index 7ecef587fab..42313b94130 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
@@ -12,20 +12,21 @@
   }
 
   &:has(.Clear) .Input {
-    padding-right: calc(0.5rem + 2rem * 2);
+    padding: 0 calc(0.5rem + 2rem * 2) 0 0.5rem;
   }
 }
 
 .Input {
   box-sizing: border-box;
-  padding-left: 0.5rem;
-  padding-right: calc(0.5rem + 2rem);
+  padding: 0 calc(0.5rem + 2rem) 0 0.5rem;
   margin: 0;
   border: none;
+  border-radius: 0;
   width: 100%;
   height: 100%;
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -33,6 +34,11 @@
   &:focus {
     outline: none;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Label {
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
index b00987d974b..2680c4a1a31 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleCombobox() {
           <Combobox.Input
             placeholder="e.g. Apple"
             id={id}
-            className="h-full w-full border-0 bg-white pl-2 dark:bg-neutral-950 text-sm font-normal text-neutral-950 outline-none dark:text-white"
+            className="h-full w-full border-0 bg-white pl-2 dark:bg-neutral-950 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none dark:text-white"
           />
           <div className="absolute right-0 bottom-0 flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
             <Combobox.Clear
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
index a7070f98148..5341a0c40c8 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
@@ -71,14 +71,16 @@
 
 .Input {
   box-sizing: border-box;
-  padding-inline: 0.5rem;
+  padding: 0 0.5rem;
   margin: 0;
   border: none;
+  border-radius: 0;
   min-width: 18rem;
   width: 100%;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -88,6 +90,11 @@
     outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -1px;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Label {
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index 33d0c1dd59c..e157f7bbffa 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -28,7 +28,7 @@ export default function ExamplePopoverCombobox() {
               <div className="h-[var(--input-container-height)] w-80 bg-white text-center dark:bg-neutral-950">
                 <Combobox.Input
                   placeholder="e.g. United Kingdom"
-                  className="h-8 w-full min-w-72 border-0 bg-white px-2 dark:bg-neutral-950 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:text-white"
+                  className="h-8 w-full min-w-72 border-0 bg-white px-2 dark:bg-neutral-950 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:text-white"
                 />
               </div>
               <Combobox.Empty>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
index f46a756b508..d70c6e0186f 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
@@ -129,10 +129,11 @@
   padding: 0;
   margin: 0;
   border: none;
+  border-radius: 0;
   height: calc(1.5rem - 2px);
   font-family: inherit;
   font-size: 0.875rem;
-  line-height: 1;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -141,6 +142,11 @@
   &:focus {
     outline: none;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Positioner {
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
index 8aa32b53090..f1b04ef9b56 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
@@ -37,7 +37,7 @@ export default function ExampleMultipleCombobox() {
                   <Combobox.Input
                     id={id}
                     placeholder={value.length > 0 ? '' : 'e.g. TypeScript'}
-                    className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-white p-0 text-sm dark:bg-neutral-950 leading-none font-normal text-neutral-950 outline-none dark:text-white"
+                    className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-white p-0 text-sm any-pointer-coarse:text-base dark:bg-neutral-950 font-normal text-neutral-950 outline-none dark:text-white"
                   />
                 </React.Fragment>
               )}
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
index aced64f7457..81e8cc22fcb 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
@@ -1,12 +1,14 @@
 .Input {
   box-sizing: border-box;
-  padding-inline: 0.5rem;
+  padding: 0 0.5rem;
   margin: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
   width: 16rem;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -16,6 +18,11 @@
     outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Label {
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
index 4965e44cf19..1576ac00c83 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
@@ -34,7 +34,7 @@ export default function ExampleVirtualizedCombobox() {
     >
       <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         Search 10,000 items
-        <Combobox.Input className="h-8 w-64 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white" />
+        <Combobox.Input className="h-8 w-64 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white" />
       </label>
 
       <Combobox.Portal>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
index 9c9f78df3d0..ad5786c59d6 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
@@ -145,10 +145,10 @@
 
 .Textarea {
   box-sizing: border-box;
-  padding-block: 0.5rem;
-  padding-inline: 0.5rem;
+  padding: 0.5rem;
   margin: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
   width: 100%;
   min-height: 8rem;
   font-family: inherit;
@@ -166,4 +166,9 @@
     outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
index 1b49ad3fe7a..d61453bb1d1 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
@@ -44,7 +44,7 @@ export default function ExampleDialog() {
             <textarea
               aria-labelledby={titleId}
               required
-              className="min-h-32 w-full border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-2 py-2 text-sm font-normal text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white"
+              className="min-h-32 w-full border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 p-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white"
               placeholder="What’s on your mind?"
               value={textareaValue}
               onChange={(event) => setTextareaValue(event.target.value)}
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
index fdd7a432cf3..5af13df0be0 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
@@ -245,24 +245,63 @@
   font-weight: 700;
   color: light-dark(var(--color-neutral-700), var(--color-neutral-300));
 }
-
-.Input,
-.Textarea {
+.Input {
   box-sizing: border-box;
   width: 100%;
+  height: 2rem;
+  padding: 0 0.5rem;
+  margin: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
-  padding: 0.5rem 0.625rem;
-  font: inherit;
+
+  &::placeholder {
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  }
+
+  &:focus {
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline-offset: -2px;
+  }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 8rem;
+  padding: 0.5rem;
+  margin: 0;
+  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  background-color: light-dark(white, var(--color-neutral-950));
+  color: light-dark(var(--color-neutral-950), white);
   resize: vertical;
-}
 
-.Input:focus-visible,
-.Textarea:focus-visible {
-  outline: 2px solid light-dark(var(--color-neutral-950), white);
-  outline-offset: -2px;
+  &::placeholder {
+    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  }
+
+  &:focus {
+    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline-offset: -2px;
+  }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
index 626d3ea8777..6171b3ae97f 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
@@ -71,7 +71,7 @@ export default function ExampleDrawerNested() {
                                             </label>
                                             <input
                                               id="device-name-tw"
-                                              className="w-full border border-neutral-950 bg-white px-2.5 py-2 font-normal text-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+                                              className="h-8 w-full border border-neutral-950 bg-white px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                                               defaultValue="Personal laptop"
                                             />
                                           </div>
@@ -85,7 +85,7 @@ export default function ExampleDrawerNested() {
                                             </label>
                                             <textarea
                                               id="notes-tw"
-                                              className="w-full resize-y border border-neutral-950 bg-white px-2.5 py-2 font-normal text-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+                                              className="min-h-32 w-full resize-y border border-neutral-950 bg-white p-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                                               defaultValue="Rotate recovery codes and revoke older sessions."
                                               rows={3}
                                             />
diff --git a/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
index e4017d04de3..bf7794692a9 100644
--- a/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
@@ -16,13 +16,15 @@
 
 .Input {
   box-sizing: border-box;
-  padding-inline: 0.5rem;
+  padding: 0 0.5rem;
   margin: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
   width: 100%;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -35,6 +37,11 @@
     outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Error {
diff --git a/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
index 1da8cc48317..9a96d4891fb 100644
--- a/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleField() {
       <Field.Control
         required
         placeholder="Required"
-        className="h-8 self-stretch border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+        className="h-8 self-stretch border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
       />
       <Field.Error className="text-sm text-red-700 dark:text-red-400" match="valueMissing">
         Please enter your name
diff --git a/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
index ecaa2e07e7f..b8f1ff7cc56 100644
--- a/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
@@ -33,13 +33,15 @@
 
 .Input {
   box-sizing: border-box;
-  padding-inline: 0.5rem;
+  padding: 0 0.5rem;
   margin: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
   width: 100%;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -52,6 +54,11 @@
     outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Error {
diff --git a/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx
index f0c8d431a44..501bc2eb53d 100644
--- a/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleField() {
         </Field.Label>
         <Field.Control
           placeholder="Enter company name"
-          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
       </Field.Root>
 
@@ -24,7 +24,7 @@ export default function ExampleField() {
         </Field.Label>
         <Field.Control
           placeholder="Enter fiscal number"
-          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
       </Field.Root>
     </Fieldset.Root>
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
index d1766b42bd3..1e5dca74707 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
@@ -22,13 +22,15 @@
 
 .Input {
   box-sizing: border-box;
-  padding-inline: 0.5rem;
+  padding: 0 0.5rem;
   margin: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
   width: 100%;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -41,6 +43,11 @@
     outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Error {
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
index a6e154c70b3..9dfb5695ddf 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
@@ -26,7 +26,7 @@ export default function ActionStateForm() {
           required
           defaultValue="admin"
           placeholder="e.g. alice132"
-          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
index d1766b42bd3..1e5dca74707 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
@@ -22,13 +22,15 @@
 
 .Input {
   box-sizing: border-box;
-  padding-inline: 0.5rem;
+  padding: 0 0.5rem;
   margin: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
   width: 100%;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -41,6 +43,11 @@
     outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Error {
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
index 5db98c6ed13..27029f425b6 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
@@ -37,7 +37,7 @@ export default function ExampleForm() {
           defaultValue="https://example.com"
           placeholder="https://example.com"
           pattern="https?://.*"
-          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
index d1766b42bd3..1e5dca74707 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
@@ -22,13 +22,15 @@
 
 .Input {
   box-sizing: border-box;
-  padding-inline: 0.5rem;
+  padding: 0 0.5rem;
   margin: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
   width: 100%;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -41,6 +43,11 @@
     outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Error {
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
index 0e1d03dd911..08853c3a01c 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
@@ -42,7 +42,7 @@ export default function Page() {
         </Field.Label>
         <Field.Control
           placeholder="Enter name"
-          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
@@ -52,7 +52,7 @@ export default function Page() {
         </Field.Label>
         <Field.Control
           placeholder="Enter age"
-          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
diff --git a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
index 9f5b8ef79cf..681f794a838 100644
--- a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
@@ -11,13 +11,15 @@
 
 .Input {
   box-sizing: border-box;
-  padding-inline: 0.5rem;
+  padding: 0 0.5rem;
   margin: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
+  border-radius: 0;
   width: 10rem;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -30,4 +32,9 @@
     outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -2px;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
index 8c355af1e01..41e6ae9b0c9 100644
--- a/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleInput() {
       Name
       <Input
         placeholder="e.g. Colm Tuite"
-        className="h-8 w-40 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-2 text-sm font-normal text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white"
+        className="h-8 w-40 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white"
       />
     </label>
   );
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
index 6929c327eff..03819d3da96 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
@@ -38,6 +38,7 @@
   height: 100%;
   font-family: inherit;
   font-size: 0.875rem;
+  line-height: 1.25rem;
   font-weight: 400;
   background-color: light-dark(white, var(--color-neutral-950));
   color: light-dark(var(--color-neutral-950), white);
@@ -50,6 +51,11 @@
     outline: 2px solid light-dark(var(--color-neutral-950), white);
     outline-offset: -1px;
   }
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .Decrement,
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
index 0aa822494d9..5dd13f8cc9e 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { NumberField } from '@base-ui/react/number-field';
 
 const stepperClasses =
-  'flex h-full w-8 items-center justify-center border border-neutral-950 rounded-none bg-white bg-clip-padding text-neutral-950 outline-0 select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
+  'flex h-full w-8 items-center justify-center border border-neutral-950 rounded-none bg-white bg-clip-padding text-neutral-950 outline-0 select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
 
 export default function ExampleNumberField() {
   const id = React.useId();
@@ -21,11 +21,11 @@ export default function ExampleNumberField() {
       </NumberField.ScrubArea>
 
       <NumberField.Group className="flex h-8">
-        <NumberField.Decrement className={stepperClasses}>
+        <NumberField.Decrement className={`${stepperClasses} border-r-0`}>
           <MinusIcon className="size-3" />
         </NumberField.Decrement>
-        <NumberField.Input className="h-full w-[7ch] border-y border-neutral-950 rounded-none bg-white px-2 text-left text-sm font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:bg-neutral-950 dark:text-white" />
-        <NumberField.Increment className={stepperClasses}>
+        <NumberField.Input className="h-full w-[7ch] border border-neutral-950 rounded-none bg-white px-2 text-left text-sm any-pointer-coarse:text-base font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:bg-neutral-950 dark:text-white" />
+        <NumberField.Increment className={`${stepperClasses} border-l-0`}>
           <PlusIcon className="size-3" />
         </NumberField.Increment>
       </NumberField.Group>
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
index fabb7b194ea..4665c64717d 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
@@ -23,12 +23,14 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
+  padding: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
   font-family: inherit;
   font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 400;
   text-align: center;
   background-color: light-dark(white, var(--color-neutral-950));
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
index 7bb5fb5d721..db4661e1c31 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
@@ -23,12 +23,14 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
+  padding: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
   font-family: inherit;
   font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 400;
   text-align: center;
   background-color: light-dark(white, var(--color-neutral-950));
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
index b8c2fee9aa0..8108cb3785c 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
@@ -23,12 +23,14 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
+  padding: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
   font-family: inherit;
   font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 400;
   text-align: center;
   background-color: light-dark(white, var(--color-neutral-950));
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
index 8a620f0cc9f..ee4b1d235dc 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
@@ -29,12 +29,14 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
+  padding: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
   font-family: inherit;
   font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 400;
   text-align: center;
   background-color: light-dark(white, var(--color-neutral-950));
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
index c485f8de819..6aaae4380d3 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
@@ -23,12 +23,14 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
+  padding: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
   font-family: inherit;
   font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 400;
   text-align: center;
   background-color: light-dark(white, var(--color-neutral-950));
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
index fabb7b194ea..4665c64717d 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
@@ -23,12 +23,14 @@
 .Input {
   box-sizing: border-box;
   margin: 0;
+  padding: 0;
   border: 1px solid light-dark(var(--color-neutral-950), white);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
   font-family: inherit;
   font-size: 1rem;
+  line-height: 1.5rem;
   font-weight: 400;
   text-align: center;
   background-color: light-dark(white, var(--color-neutral-950));
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
index 70a30aa0bf6..a9af2313876 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
@@ -14,7 +14,7 @@ export const Input = React.forwardRef<HTMLInputElement, Autocomplete.Input.Props
     <Autocomplete.Input
       ref={forwardedRef}
       className={clsx(
-        'h-8 w-[16rem] border border-neutral-950 bg-white px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white md:w-[20rem] dark:border-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400',
+        'h-8 w-[16rem] border border-neutral-950 bg-white px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white md:w-[20rem] dark:border-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
index ca7d6eb0b45..9294b2c55ab 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
@@ -14,7 +14,7 @@ export const Input = React.forwardRef<HTMLInputElement, Combobox.Input.Props>(fu
     <Combobox.Input
       ref={forwardedRef}
       className={clsx(
-        'h-full w-full border-0 bg-white pl-2 text-sm font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400',
+        'h-full w-full border-0 bg-white pl-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx
index f8df1fad00c..aa0a50c3f1d 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx
@@ -36,7 +36,7 @@ export const Control = React.forwardRef<HTMLInputElement, Field.Control.Props>(
       <Field.Control
         ref={forwardedRef}
         className={clsx(
-          'h-8 w-full max-w-xs border border-neutral-950 bg-white px-2 text-sm font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400',
+          'h-8 w-full max-w-xs border border-neutral-950 bg-white px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400',
           className,
         )}
         {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
index 56e91d3b289..f29ccf1df68 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
@@ -32,7 +32,7 @@ export const Input = React.forwardRef<HTMLInputElement, NumberField.Input.Props>
     <NumberField.Input
       ref={forwardedRef}
       className={clsx(
-        'h-full w-16 rounded-none border-y border-neutral-950 bg-white px-2 text-sm font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:bg-neutral-950 dark:text-white',
+        'h-full w-16 rounded-none border-y border-neutral-950 bg-white px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:bg-neutral-950 dark:text-white',
         className,
       )}
       {...props}

From 0ce7cb2f9963a1abf1bf5d8add9f56a47e9c838e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 12 May 2026 13:53:22 +0200
Subject: [PATCH 173/257] Bye light-dark()

---
 .../__snapshots__/mdxToMarkdown.test.mjs.snap | 157 ++++++++++----
 .../accordion/demos/_index.module.css         |  33 ++-
 .../alert-dialog/demos/_index.module.css      |  60 ++++--
 .../demos/hero/css-modules/index.module.css   |  60 ++++--
 .../demos/async/css-modules/index.module.css  |  65 ++++--
 .../css-modules/index.module.css              |  59 ++++--
 .../css-modules/index.module.css              | 155 ++++++++++----
 .../css-modules/index.module.css              |  65 ++++--
 .../demos/grid/css-modules/index.module.css   | 163 +++++++++++----
 .../grouped/css-modules/index.module.css      |  71 +++++--
 .../demos/hero/css-modules/index.module.css   |  65 ++++--
 .../demos/inline/css-modules/index.module.css |  53 +++--
 .../demos/limit/css-modules/index.module.css  |  65 ++++--
 .../virtualized/css-modules/index.module.css  |  59 ++++--
 .../demos/hero/css-modules/index.module.css   |   9 +-
 .../demos/hero/css-modules/index.module.css   |  39 +++-
 .../loading/css-modules/index.module.css      |  39 +++-
 .../demos/hero/css-modules/index.module.css   |  33 ++-
 .../demos/nested/css-modules/index.module.css |  33 ++-
 .../demos/parent/css-modules/index.module.css |  33 ++-
 .../demos/hero/css-modules/index.module.css   |  33 ++-
 .../demos/hero/css-modules/index.module.css   |  45 +++-
 .../css-modules/index.module.css              | 124 ++++++++---
 .../async-single/css-modules/index.module.css | 101 ++++++---
 .../creatable/css-modules/index.module.css    | 196 +++++++++++++-----
 .../grouped/css-modules/index.module.css      |  95 ++++++---
 .../demos/hero/css-modules/index.module.css   |  89 +++++---
 .../css-modules/index.module.css              | 122 ++++++++---
 .../multiple/css-modules/index.module.css     | 118 ++++++++---
 .../virtualized/css-modules/index.module.css  |  59 ++++--
 .../demos/hero/css-modules/index.module.css   |  59 ++++--
 .../submenu/css-modules/index.module.css      |  89 ++++++--
 .../components/dialog/demos/_index.module.css |  54 +++--
 .../css-modules/index.module.css              |  86 ++++++--
 .../demos/hero/css-modules/index.module.css   |  54 +++--
 .../css-modules/index.module.css              |  84 ++++++--
 .../demos/nested/css-modules/index.module.css |  72 +++++--
 .../css-modules/index.module.css              | 128 +++++++++---
 .../uncontained/css-modules/index.module.css  |  89 ++++++--
 .../demos/hero/css-modules/index.module.css   |  68 ++++--
 .../css-modules/index.module.css              |  80 +++++--
 .../mobile-nav/css-modules/index.module.css   | 120 +++++++++--
 .../demos/nested/css-modules/index.module.css | 154 ++++++++++----
 .../non-modal/css-modules/index.module.css    |  68 ++++--
 .../position/css-modules/index.module.css     |  68 ++++--
 .../snap-points/css-modules/index.module.css  |  80 +++++--
 .../swipe-area/css-modules/index.module.css   |  86 ++++++--
 .../uncontained/css-modules/index.module.css  |  96 +++++++--
 .../demos/hero/css-modules/index.module.css   |  50 +++--
 .../demos/hero/css-modules/index.module.css   |  59 ++++--
 .../form-action/css-modules/index.module.css  |  83 ++++++--
 .../demos/hero/css-modules/index.module.css   |  83 ++++++--
 .../demos/zod/css-modules/index.module.css    |  83 ++++++--
 .../demos/hero/css-modules/index.module.css   |  38 +++-
 .../components/menu/demos/_index.module.css   | 137 +++++++++---
 .../demos/arrow/css-modules/index.module.css  |  89 ++++++--
 .../css-modules/index.module.css              |  86 ++++++--
 .../group-labels/css-modules/index.module.css |  92 ++++++--
 .../demos/hero/css-modules/index.module.css   |  86 ++++++--
 .../css-modules/index.module.css              |  86 ++++++--
 .../radio-items/css-modules/index.module.css  |  86 ++++++--
 .../submenu/css-modules/index.module.css      |  98 +++++++--
 .../demos/hero/css-modules/index.module.css   |  86 ++++++--
 .../demos/hero/css-modules/index.module.css   |  24 ++-
 .../demos/hero/css-modules/index.module.css   |  79 +++++--
 .../css-modules/index.module.css              | 133 +++++++++---
 .../demos/nested/css-modules/index.module.css |  79 +++++--
 .../demos/hero/css-modules/index.module.css   |  65 ++++--
 .../alphanumeric/css-modules/index.module.css |  30 ++-
 .../css-modules/index.module.css              |  61 ++++--
 .../css-modules/index.module.css              |  37 +++-
 .../grouped/css-modules/index.module.css      |  31 ++-
 .../demos/hero/css-modules/index.module.css   |  31 ++-
 .../password/css-modules/index.module.css     |  31 ++-
 .../popover/demos/_index.module.css           |  69 ++++--
 .../css-modules/index.module.css              |  51 ++++-
 .../css-modules/index.module.css              |  63 ++++--
 .../preview-card/demos/index.module.css       |  93 ++++++---
 .../demos/hero/css-modules/index.module.css   |  24 ++-
 .../demos/hero/css-modules/index.module.css   |  33 ++-
 .../demos/both/css-modules/index.module.css   |  33 ++-
 .../demos/hero/css-modules/index.module.css   |  36 +++-
 .../scroll-fade/css-modules/index.module.css  |  36 +++-
 .../grouped/css-modules/index.module.css      |  93 +++++++--
 .../demos/hero/css-modules/index.module.css   |  81 ++++++--
 .../multiple/css-modules/index.module.css     |  75 +++++--
 .../css-modules/index.module.css              |  93 +++++++--
 .../demos/hero/css-modules/index.module.css   |  21 +-
 .../css-modules/index.module.css              |  27 ++-
 .../demos/hero/css-modules/index.module.css   |  27 ++-
 .../range-slider/css-modules/index.module.css |  27 ++-
 .../vertical/css-modules/index.module.css     |  27 ++-
 .../demos/hero/css-modules/index.module.css   |  39 +++-
 .../demos/hero/css-modules/index.module.css   |  60 ++++--
 .../anchored/css-modules/index.module.css     | 157 ++++++++++----
 .../demos/custom/css-modules/index.module.css |  78 +++++--
 .../deduplicate/css-modules/index.module.css  |  78 +++++--
 .../demos/hero/css-modules/index.module.css   |  78 +++++--
 .../position/css-modules/index.module.css     |  78 +++++--
 .../promise/css-modules/index.module.css      |  90 ++++++--
 .../demos/undo/css-modules/index.module.css   |  78 +++++--
 .../css-modules/index.module.css              |  78 +++++--
 .../demos/hero/css-modules/index.module.css   |  48 ++++-
 .../multiple/css-modules/index.module.css     |  48 ++++-
 .../demos/hero/css-modules/index.module.css   |  30 ++-
 .../demos/hero/css-modules/index.module.css   | 107 +++++++---
 .../css-modules/index.module.css              |  71 +++++--
 .../demos/hero/css-modules/index.module.css   |  65 ++++--
 .../components/tooltip/demos/index.module.css | 110 +++++++---
 .../css-modules/index.module.css              |  45 +++-
 .../css-modules/index.module.css              |  45 +++-
 .../css-modules/index.module.css              |  84 ++++++--
 .../demos/hero/css-modules/index.module.css   |  27 ++-
 .../css-modules/index.module.css              |  45 +++-
 .../css-modules/index.module.css              |  30 ++-
 .../demos/render/css-modules/index.module.css |   6 +-
 116 files changed, 6305 insertions(+), 1855 deletions(-)

diff --git a/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap b/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap
index 51b54bdbf5e..5cb973da87e 100644
--- a/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap
+++ b/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap
@@ -20,46 +20,46 @@ import { Accordion } from '@base-ui/react/accordion';
 
 export default function ExampleAccordion() {
   return (
-    <Accordion.Root className="flex w-80 max-w-full flex-col border-b border-neutral-950 text-neutral-950 dark:border-white dark:text-white">
+    <Accordion.Root className="flex w-80 max-w-full flex-col border border-neutral-950 text-neutral-950 dark:border-white dark:text-white">
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             What is Base UI?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
-          <div className="py-2">
+          <div className="px-3 py-2">
             Base UI is a library of high-quality unstyled React components for design systems and
             web apps.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item>
+      <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             How do I get started?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
-          <div className="py-2">
+          <div className="px-3 py-2">
             Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before,
             you’ll feel at home.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item>
+      <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             Can I use it for my project?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
-          <div className="py-2">Of course! Base UI is free and open source.</div>
+          <div className="px-3 py-2">Of course! Base UI is free and open source.</div>
         </Accordion.Panel>
       </Accordion.Item>
     </Accordion.Root>
@@ -89,8 +89,23 @@ This example shows how to implement the component using CSS Modules.
   width: 20rem;
   max-width: 100%;
   flex-direction: column;
-  border-bottom: 1px solid light-dark(var(--color-neutral-950), white);
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    color: white;
+  }
+}
+
+.Item {
+  & + & {
+    border-top: 1px solid var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      border-top: 1px solid white;
+    }
+  }
 }
 
 .Header {
@@ -104,13 +119,12 @@ This example shows how to implement the component using CSS Modules.
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  padding: 0.5rem 0;
+  padding: 0.5rem 0.75rem;
   margin: 0;
   border: none;
-  border-top: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
   background-color: transparent;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -118,9 +132,27 @@ This example shows how to implement the component using CSS Modules.
   text-align: left;
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
+    }
+  }
+
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid var(--color-neutral-950);
     z-index: 1;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -151,7 +183,7 @@ This example shows how to implement the component using CSS Modules.
 }
 
 .Content {
-  padding: 0.5rem 0;
+  padding: 0.5rem 0.75rem;
 }
 
 \`\`\`
@@ -259,47 +291,47 @@ export default function ExampleAccordion() {
   return (
     <Accordion.Root
       multiple
-      className="flex w-80 max-w-full flex-col border-b border-neutral-950 text-neutral-950 dark:border-white dark:text-white"
+      className="flex w-80 max-w-full flex-col border border-neutral-950 text-neutral-950 dark:border-white dark:text-white"
     >
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             What is Base UI?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
-          <div className="py-2">
+          <div className="px-3 py-2">
             Base UI is a library of high-quality unstyled React components for design systems and
             web apps.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item>
+      <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             How do I get started?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
-          <div className="py-2">
+          <div className="px-3 py-2">
             Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before,
             you’ll feel at home.
           </div>
         </Accordion.Panel>
       </Accordion.Item>
 
-      <Accordion.Item>
+      <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 border-t border-neutral-950 bg-transparent py-2 text-left text-sm font-normal text-neutral-950 select-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800 dark:border-white dark:text-white">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             Can I use it for my project?
             <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
-          <div className="py-2">Of course! Base UI is free and open source.</div>
+          <div className="px-3 py-2">Of course! Base UI is free and open source.</div>
         </Accordion.Panel>
       </Accordion.Item>
     </Accordion.Root>
@@ -329,8 +361,23 @@ This example shows how to implement the component using CSS Modules.
   width: 20rem;
   max-width: 100%;
   flex-direction: column;
-  border-bottom: 1px solid light-dark(var(--color-neutral-950), white);
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    color: white;
+  }
+}
+
+.Item {
+  & + & {
+    border-top: 1px solid var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      border-top: 1px solid white;
+    }
+  }
 }
 
 .Header {
@@ -344,13 +391,12 @@ This example shows how to implement the component using CSS Modules.
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  padding: 0.5rem 0;
+  padding: 0.5rem 0.75rem;
   margin: 0;
   border: none;
-  border-top: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
   background-color: transparent;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -358,9 +404,27 @@ This example shows how to implement the component using CSS Modules.
   text-align: left;
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
+    }
+  }
+
   &:focus-visible {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid var(--color-neutral-950);
     z-index: 1;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -391,7 +455,7 @@ This example shows how to implement the component using CSS Modules.
 }
 
 .Content {
-  padding: 0.5rem 0;
+  padding: 0.5rem 0.75rem;
 }
 
 \`\`\`
@@ -841,7 +905,7 @@ export default function ExampleDirectionProvider() {
           <Slider.Control className="flex w-56 touch-none items-center py-3 select-none">
             <Slider.Track className="h-1 w-full bg-neutral-200 select-none dark:bg-neutral-800">
               <Slider.Indicator className="bg-neutral-950 select-none dark:bg-white" />
-              <Slider.Thumb className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-blue-800 dark:border-white dark:bg-neutral-950" />
+              <Slider.Thumb className="size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950" />
             </Slider.Track>
           </Slider.Control>
         </Slider.Root>
@@ -871,26 +935,43 @@ This example shows how to implement the component using CSS Modules.
 .Track {
   width: 100%;
   height: 0.25rem;
-  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  background-color: var(--color-neutral-200);
   user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-800);
+  }
 }
 
 .Indicator {
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
   user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
 
 .Thumb {
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+  }
+
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-blue-800);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
index 4f4864a5f25..9bd3b3e6531 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
@@ -4,13 +4,22 @@
   width: 20rem;
   max-width: 100%;
   flex-direction: column;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    color: white;
+  }
 }
 
 .Item {
   & + & {
-    border-top: 1px solid light-dark(var(--color-neutral-950), white);
+    border-top: 1px solid var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      border-top: 1px solid white;
+    }
   }
 }
 
@@ -30,7 +39,7 @@
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -38,15 +47,27 @@
   text-align: left;
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     z-index: 1;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
index 63336f32590..ad6e24aa34e 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
@@ -7,39 +7,66 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 }
 
 .DangerButton {
-  color: light-dark(var(--color-red-700), var(--color-red-400));
+  color: var(--color-red-700);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-red-400);
+  }
 }
 
 .Backdrop {
@@ -78,15 +105,18 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 1rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 100ms ease-out,
     opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
@@ -114,7 +144,11 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
index c071a153f87..e2bb559431c 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
@@ -7,38 +7,65 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   &[data-color='red'] {
-    color: light-dark(var(--color-red-700), var(--color-red-400));
+    color: var(--color-red-700);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-red-400);
+    }
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 }
 
@@ -78,15 +105,18 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 1rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 100ms ease-out,
     opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
@@ -114,7 +144,11 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
index a34f0eaa6cf..040feda5c21 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
@@ -2,27 +2,37 @@
   box-sizing: border-box;
   padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
+  border: 1px solid var(--color-neutral-950);
   width: 16rem;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   outline: none;
 
-  &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
-    outline-offset: -2px;
-  }
-
   @media (any-pointer: coarse) {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
+  &:focus {
+    outline: 2px solid var(--color-neutral-950);
+    outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Label {
@@ -32,7 +42,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Positioner {
@@ -41,16 +55,19 @@
 
 .Popup {
   box-sizing: border-box;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   width: var(--anchor-width);
   max-width: var(--available-width);
   overflow: clip;
 
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+    border: 1px solid white;
     box-shadow: none;
   }
 }
@@ -79,7 +96,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-neutral-950));
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-950);
+    }
   }
 
   &[data-highlighted]::before {
@@ -88,7 +109,11 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 }
 
@@ -107,7 +132,11 @@
 .MovieYear {
   font-size: 0.875rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Status {
@@ -118,7 +147,11 @@
   padding-left: 0.5rem;
   padding-right: 2rem;
   font-size: 0.875rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Spinner {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
index 14f970d1f14..f64c2a022dd 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
@@ -2,27 +2,37 @@
   box-sizing: border-box;
   padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
+  border: 1px solid var(--color-neutral-950);
   width: 16rem;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   outline: none;
 
-  &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
-    outline-offset: -2px;
-  }
-
   @media (any-pointer: coarse) {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
+  &:focus {
+    outline: 2px solid var(--color-neutral-950);
+    outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Label {
@@ -32,7 +42,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Positioner {
@@ -41,16 +55,19 @@
 
 .Popup {
   box-sizing: border-box;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   width: var(--anchor-width);
   max-height: 23rem;
   max-width: var(--available-width);
   overflow: clip;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+    border: 1px solid white;
     box-shadow: none;
   }
 }
@@ -84,7 +101,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-neutral-950));
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-950);
+    }
   }
 
   &[data-highlighted]::before {
@@ -93,7 +114,11 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 }
 
@@ -102,5 +127,9 @@
   padding: 1rem 1rem 1rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
index 0a11040d37f..fa5026bc507 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
@@ -8,30 +8,48 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
   cursor: default;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -67,8 +85,8 @@
   position: relative;
   width: calc(100vw - 1rem);
   max-width: 28rem;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   transition:
     transform 150ms,
     opacity 150ms;
@@ -76,18 +94,21 @@
   display: flex;
   flex-direction: column;
 
-  &[data-starting-style],
-  &[data-ending-style] {
-    opacity: 0;
-    transform: translateY(-1rem) scale(0.95);
-  }
-
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+    border: 1px solid white;
     box-shadow: none;
   }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: translateY(-1rem) scale(0.95);
+  }
 }
 
 .Input {
@@ -95,7 +116,7 @@
   padding: 0 0.75rem;
   margin: 0;
   border: none;
-  border-bottom: 1px solid light-dark(var(--color-neutral-950), white);
+  border-bottom: 1px solid var(--color-neutral-950);
   width: 100%;
   height: 2.5rem;
   border-radius: 0;
@@ -103,23 +124,37 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   letter-spacing: 0.016em;
   outline: none;
 
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border-bottom: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   &::placeholder {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
   }
 
   &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -1px;
-  }
 
-  @media (any-pointer: coarse) {
-    font-size: 1rem;
-    line-height: 1.5rem;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -140,8 +175,12 @@
   scroll-padding-block: 0.25rem;
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -172,7 +211,11 @@
   font-size: 0.875rem;
   line-height: 1;
   font-weight: 400;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Item {
@@ -193,7 +236,11 @@
   font-weight: 400;
 
   &[data-highlighted] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 }
 
@@ -207,12 +254,20 @@
 
 .ItemType {
   font-size: 0.875rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
   letter-spacing: 0.00625em;
   white-space: nowrap;
 
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
+
   [data-highlighted] & {
-    color: light-dark(var(--color-neutral-700), var(--color-neutral-300));
+    color: var(--color-neutral-700);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-300);
+    }
   }
 }
 
@@ -224,19 +279,27 @@
   padding: 1rem 1rem 1rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
   min-height: 8rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Scrollbar {
   display: flex;
   justify-content: center;
-  background-color: light-dark(rgb(0 0 0 / 12%), rgb(255 255 255 / 12%));
+  background-color: rgb(0 0 0 / 12%);
   width: 0.5rem;
   opacity: 0;
   transition: opacity 150ms;
   pointer-events: none;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: rgb(255 255 255 / 12%);
+  }
+
   &[data-scrolling] {
     transition-duration: 0ms;
   }
@@ -250,7 +313,11 @@
 
 .ScrollbarThumb {
   width: 100%;
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
 
 .Footer {
@@ -258,10 +325,16 @@
   align-items: center;
   justify-content: space-between;
   padding: 0.625rem 0.75rem;
-  border-top: 1px solid light-dark(var(--color-neutral-950), white);
+  border-top: 1px solid var(--color-neutral-950);
   font-size: 0.75rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
-  background-color: light-dark(white, var(--color-neutral-950));
+  color: var(--color-neutral-600);
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    border-top: 1px solid white;
+    color: var(--color-neutral-400);
+    background-color: var(--color-neutral-950);
+  }
 }
 
 .FooterLeft,
@@ -283,9 +356,15 @@
     ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
   font-weight: 400;
   line-height: 1;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
-  background-color: light-dark(var(--color-neutral-100), var(--color-neutral-900));
-  border: 1px solid light-dark(var(--color-neutral-400), var(--color-neutral-600));
+  color: var(--color-neutral-600);
+  background-color: var(--color-neutral-100);
+  border: 1px solid var(--color-neutral-400);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+    background-color: var(--color-neutral-900);
+    border: 1px solid var(--color-neutral-600);
+  }
 }
 
 .VisuallyHiddenClose {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
index 64802aeacc7..26fb208a955 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
@@ -5,34 +5,48 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Input {
   box-sizing: border-box;
   padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
+  border: 1px solid var(--color-neutral-950);
   width: 16rem;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   outline: none;
 
-  &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
-    outline-offset: -2px;
-  }
-
   @media (any-pointer: coarse) {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
+  &:focus {
+    outline: 2px solid var(--color-neutral-950);
+    outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Positioner {
@@ -41,16 +55,19 @@
 
 .Popup {
   box-sizing: border-box;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   width: var(--anchor-width);
   max-width: var(--available-width);
   overflow: clip;
 
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+    border: 1px solid white;
     box-shadow: none;
   }
 }
@@ -87,7 +104,11 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 }
 
@@ -113,20 +134,32 @@
 
 .ItemDescription {
   font-size: 0.875rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
   line-height: 1.25rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Empty {
   box-sizing: border-box;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
   padding: 0.5rem 1rem 0.5rem 0.5rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Item mark {
   background-color: transparent;
-  color: light-dark(var(--color-blue-800), var(--color-blue-500));
+  color: var(--color-blue-800);
   font-weight: 700;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-blue-500);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
index 2f3eceed7b8..ff3a0cefa4d 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
@@ -13,27 +13,37 @@
   padding: 0 0.5rem;
   margin: 0;
   margin-right: -1px;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
+  border: 1px solid var(--color-neutral-950);
   border-right: 0;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   outline: none;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    color: white;
+    background-color: var(--color-neutral-950);
+  }
 
   &:focus {
     position: relative;
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
-  }
 
-  @media (any-pointer: coarse) {
-    font-size: 1rem;
-    line-height: 1.5rem;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -41,31 +51,52 @@
   box-sizing: border-box;
   width: 2rem;
   height: 2rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   background-color: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.25rem;
   line-height: 1;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   outline: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    color: white;
+  }
+
   &:hover {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -80,29 +111,47 @@
   padding-right: 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   font-family: inherit;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   cursor: default;
   user-select: none;
   min-width: 9rem;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    color: white;
+    background-color: var(--color-neutral-950);
+  }
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -116,7 +165,11 @@
   z-index: 2;
   width: 16rem;
   height: var(--input-container-height);
-  background: light-dark(white, var(--color-neutral-950));
+  background: white;
+
+  @media (prefers-color-scheme: dark) {
+    background: var(--color-neutral-950);
+  }
 }
 
 .Input {
@@ -129,19 +182,28 @@
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   outline: none;
 
-  &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
-    outline-offset: -1px;
-  }
-
   @media (any-pointer: coarse) {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
+  &:focus {
+    outline: 2px solid var(--color-neutral-950);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Positioner {
@@ -151,8 +213,8 @@
 .Popup {
   --input-container-height: 2rem;
   box-sizing: border-box;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   transform-origin: var(--transform-origin);
   transition:
     transform 150ms,
@@ -160,18 +222,21 @@
   max-width: var(--available-width);
   max-height: 20.5rem;
 
-  &[data-starting-style],
-  &[data-ending-style] {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+    border: 1px solid white;
     box-shadow: none;
   }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.9);
+  }
 }
 
 .List {
@@ -194,8 +259,12 @@
   padding: 0.5rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
   user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Group {
@@ -229,14 +298,22 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-neutral-950));
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-950);
+    }
 
     &::before {
       content: '';
       z-index: -1;
       position: absolute;
       inset: 0;
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 }
@@ -267,5 +344,9 @@
   padding: 0.75rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
index 68985208a36..9d9763d8dcd 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
@@ -2,27 +2,37 @@
   box-sizing: border-box;
   padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
+  border: 1px solid var(--color-neutral-950);
   width: 16rem;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   outline: none;
 
-  &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
-    outline-offset: -2px;
-  }
-
   @media (any-pointer: coarse) {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
+  &:focus {
+    outline: 2px solid var(--color-neutral-950);
+    outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Label {
@@ -32,7 +42,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Positioner {
@@ -41,17 +55,20 @@
 
 .Popup {
   box-sizing: border-box;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   width: var(--anchor-width);
   max-height: 22.5rem;
   max-width: var(--available-width);
   overflow: clip;
 
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+    border: 1px solid white;
     box-shadow: none;
   }
 }
@@ -82,7 +99,11 @@
   padding: 0.5rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Item {
@@ -98,7 +119,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-neutral-950));
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-950);
+    }
   }
 
   &[data-highlighted]::before {
@@ -107,14 +132,22 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 }
 
 .Separator {
   margin: 0.375rem 1rem;
   height: 1px;
-  background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+  background-color: var(--color-neutral-100);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-800);
+  }
 }
 
 .Empty {
@@ -122,5 +155,9 @@
   padding: 1rem 1rem 1rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
index f3449b9523c..61f9c769c88 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
@@ -2,27 +2,37 @@
   box-sizing: border-box;
   padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
+  border: 1px solid var(--color-neutral-950);
   width: 16rem;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   outline: none;
 
-  &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
-    outline-offset: -2px;
-  }
-
   @media (any-pointer: coarse) {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
+  &:focus {
+    outline: 2px solid var(--color-neutral-950);
+    outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Label {
@@ -32,7 +42,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Positioner {
@@ -41,17 +55,20 @@
 
 .Popup {
   box-sizing: border-box;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   width: var(--anchor-width);
   max-height: 23rem;
   max-width: var(--available-width);
   overflow: clip;
 
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+    border: 1px solid white;
     box-shadow: none;
   }
 }
@@ -85,7 +102,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-neutral-950));
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-950);
+    }
   }
 
   &[data-highlighted]::before {
@@ -94,14 +115,22 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 }
 
 .Separator {
   margin: 0.375rem 1rem;
   height: 1px;
-  background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+  background-color: var(--color-neutral-100);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-800);
+  }
 }
 
 .Empty {
@@ -109,5 +138,9 @@
   padding: 1rem 1rem 1rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
index 3ce343c1b99..6f1752d29c0 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
@@ -8,27 +8,37 @@
   box-sizing: border-box;
   padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
+  border: 1px solid var(--color-neutral-950);
   width: 16rem;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   outline: none;
 
-  &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
-    outline-offset: -2px;
-  }
-
   @media (any-pointer: coarse) {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
+  &:focus {
+    outline: 2px solid var(--color-neutral-950);
+    outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Label {
@@ -38,7 +48,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Positioner {
@@ -51,17 +65,20 @@
 
 .Popup {
   box-sizing: border-box;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   width: var(--anchor-width);
   max-height: 23rem;
   max-width: var(--available-width);
   overflow: clip;
 
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+    border: 1px solid white;
     box-shadow: none;
   }
 }
@@ -96,7 +113,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-neutral-950));
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-950);
+    }
   }
 
   &[data-highlighted]::before {
@@ -105,6 +126,10 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
index f07e9ceb868..73e26442e22 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
@@ -2,27 +2,37 @@
   box-sizing: border-box;
   padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
+  border: 1px solid var(--color-neutral-950);
   width: 16rem;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   outline: none;
 
-  &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
-    outline-offset: -2px;
-  }
-
   @media (any-pointer: coarse) {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
+  &:focus {
+    outline: 2px solid var(--color-neutral-950);
+    outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Label {
@@ -32,7 +42,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Positioner {
@@ -42,8 +56,8 @@
 .Popup {
   box-sizing: border-box;
   padding-block: 0.25rem;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   width: var(--anchor-width);
   max-height: min(var(--available-height), 23rem);
   max-width: var(--available-width);
@@ -51,10 +65,13 @@
   scroll-padding-block: 0.25rem;
   overscroll-behavior: contain;
 
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+    border: 1px solid white;
     box-shadow: none;
   }
 }
@@ -74,7 +91,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-neutral-950));
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-950);
+    }
   }
 
   &[data-highlighted]::before {
@@ -83,7 +104,11 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 }
 
@@ -92,7 +117,11 @@
   padding: 0.5rem 1rem 0.5rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Status {
@@ -100,5 +129,9 @@
   padding: 0.5rem 1rem 0.5rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
index 250061b103d..ff65b853f31 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
@@ -2,27 +2,37 @@
   box-sizing: border-box;
   padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
+  border: 1px solid var(--color-neutral-950);
   width: 16rem;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   outline: none;
 
-  &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
-    outline-offset: -2px;
-  }
-
   @media (any-pointer: coarse) {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
+  &:focus {
+    outline: 2px solid var(--color-neutral-950);
+    outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Label {
@@ -32,7 +42,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Positioner {
@@ -41,17 +55,20 @@
 
 .Popup {
   box-sizing: border-box;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   width: var(--anchor-width);
   max-height: min(22rem, var(--available-height));
   max-width: var(--available-width);
   overflow: clip;
 
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+    border: 1px solid white;
     box-shadow: none;
   }
 }
@@ -89,7 +106,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-neutral-950));
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-950);
+    }
   }
 
   &[data-highlighted]::before {
@@ -98,7 +119,11 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 }
 
@@ -106,6 +131,10 @@
   box-sizing: border-box;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
   padding: 1rem 1rem 1rem 0.5rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css
index e2dc2858145..3fddd6f6b90 100644
--- a/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css
@@ -6,13 +6,18 @@
   border-radius: 100%;
   user-select: none;
   font-weight: 400;
-  color: light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  color: var(--color-neutral-950);
+  background-color: var(--color-neutral-200);
   font-size: 0.875rem;
   line-height: 1;
   overflow: hidden;
   height: 2rem;
   width: 2rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+    background-color: var(--color-neutral-800);
+  }
 }
 
 .Image {
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
index 62cc20f03c7..65c039125dc 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
@@ -7,34 +7,57 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
index 62cc20f03c7..65c039125dc 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
@@ -7,34 +7,57 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
index 5b891c71dc4..e72181b0b10 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
@@ -3,7 +3,11 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Caption {
@@ -29,22 +33,37 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
+  color: white;
   padding: 0;
   margin: 0;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: var(--color-neutral-950);
+  }
+
   &[data-checked],
   &[data-indeterminate] {
-    background-color: light-dark(var(--color-neutral-950), white);
-    color: light-dark(white, var(--color-neutral-950));
+    background-color: var(--color-neutral-950);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: var(--color-neutral-950);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
index 5b891c71dc4..e72181b0b10 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
@@ -3,7 +3,11 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Caption {
@@ -29,22 +33,37 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
+  color: white;
   padding: 0;
   margin: 0;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: var(--color-neutral-950);
+  }
+
   &[data-checked],
   &[data-indeterminate] {
-    background-color: light-dark(var(--color-neutral-950), white);
-    color: light-dark(white, var(--color-neutral-950));
+    background-color: var(--color-neutral-950);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: var(--color-neutral-950);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
index 5b891c71dc4..e72181b0b10 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
@@ -3,7 +3,11 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Caption {
@@ -29,22 +33,37 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
+  color: white;
   padding: 0;
   margin: 0;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: var(--color-neutral-950);
+  }
+
   &[data-checked],
   &[data-indeterminate] {
-    background-color: light-dark(var(--color-neutral-950), white);
-    color: light-dark(white, var(--color-neutral-950));
+    background-color: var(--color-neutral-950);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: var(--color-neutral-950);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
index c4c27cd86a1..fcc0ee76565 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
@@ -5,7 +5,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Checkbox {
@@ -16,22 +20,37 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
+  color: white;
   padding: 0;
   margin: 0;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: var(--color-neutral-950);
+  }
+
   &[data-checked],
   &[data-indeterminate] {
-    background-color: light-dark(var(--color-neutral-950), white);
-    color: light-dark(white, var(--color-neutral-950));
+    background-color: var(--color-neutral-950);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: var(--color-neutral-950);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
index 9d270856b2d..49d87034b02 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
@@ -4,7 +4,11 @@
   min-height: 9rem;
   flex-direction: column;
   justify-content: center;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Icon {
@@ -22,10 +26,10 @@
   height: 2rem;
   padding: 0 0.5rem 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -33,19 +37,37 @@
   white-space: nowrap;
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 
   &[data-panel-open] .Icon {
@@ -53,8 +75,13 @@
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
index f94febf00e1..4edacf378df 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
@@ -12,7 +12,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .InputGroup {
@@ -21,8 +25,8 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 0.125rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   min-height: 2rem;
   padding: 0.25rem 0.5rem;
   width: 16rem;
@@ -32,13 +36,22 @@
     width: 22rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+  }
+
   &:has(.Chip) {
     padding-inline: 0.25rem;
   }
 
   &:focus-within {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -55,8 +68,8 @@
   display: flex;
   align-items: center;
   min-height: calc(1.5rem - 2px);
-  background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-100);
+  color: var(--color-neutral-950);
   font-size: 0.875rem;
   line-height: 1;
   padding: 0 0.2rem 0 0.4rem;
@@ -65,15 +78,30 @@
   outline: 0;
   cursor: default;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-800);
+    color: white;
+  }
+
   &:focus-within {
-    background-color: light-dark(var(--color-neutral-950), white);
-    color: light-dark(white, var(--color-neutral-950));
+    background-color: var(--color-neutral-950);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: var(--color-neutral-950);
+    }
   }
 
   @media (hover: hover) {
     &[data-highlighted] {
-      background-color: light-dark(var(--color-neutral-950), white);
-      color: light-dark(white, var(--color-neutral-950));
+      background-color: var(--color-neutral-950);
+      color: white;
+
+      @media (prefers-color-scheme: dark) {
+        background-color: white;
+        color: var(--color-neutral-950);
+      }
     }
   }
 }
@@ -92,7 +120,11 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+      background-color: var(--color-neutral-200);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-700);
+      }
     }
   }
 }
@@ -100,7 +132,11 @@
 .Chip:focus-within .ChipRemove {
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-700), var(--color-neutral-200));
+      background-color: var(--color-neutral-700);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-200);
+      }
     }
   }
 }
@@ -122,18 +158,23 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   min-width: 3rem;
 
-  &:focus {
-    outline: none;
-  }
-
   @media (any-pointer: coarse) {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
+  &:focus {
+    outline: none;
+  }
 }
 
 .Positioner {
@@ -143,8 +184,8 @@
 
 .Popup {
   box-sizing: border-box;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   width: var(--anchor-width);
   max-width: var(--available-width);
   overflow: clip;
@@ -152,18 +193,21 @@
     opacity 0.1s,
     transform 0.1s;
   transform-origin: var(--transform-origin);
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+    border: 1px solid white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     transform: scale(0.95);
   }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .Viewport {
@@ -184,7 +228,11 @@
   padding-right: 1.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Spinner {
@@ -207,8 +255,12 @@
   box-sizing: border-box;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
   padding: 0.5rem 1rem 0.5rem 0.5rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Item {
@@ -229,7 +281,11 @@
     &[data-highlighted] {
       z-index: 0;
       position: relative;
-      color: light-dark(var(--color-neutral-950), white);
+      color: var(--color-neutral-950);
+
+      @media (prefers-color-scheme: dark) {
+        color: white;
+      }
     }
 
     &[data-highlighted]::before {
@@ -238,7 +294,11 @@
       position: absolute;
       inset-block: 0;
       inset-inline: 0;
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 }
@@ -272,7 +332,11 @@
   flex-wrap: wrap;
   gap: 0.5rem;
   font-size: 0.75rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .ItemEmail {
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
index c2c4cc279ce..4b1fe611c24 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
@@ -5,8 +5,12 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   position: relative;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .InputGroup {
@@ -14,12 +18,21 @@
   position: relative;
   width: 16rem;
   height: 2rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+  }
 
   &:focus-within {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 
   @media (min-width: 32rem) {
@@ -43,17 +56,22 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
-
-  &:focus {
-    outline: none;
-  }
+  background-color: white;
+  color: var(--color-neutral-950);
 
   @media (any-pointer: coarse) {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
+  &:focus {
+    outline: none;
+  }
 }
 
 .ActionButtons {
@@ -66,8 +84,12 @@
   height: 100%;
   right: 0;
   border: none;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
   padding: 0;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Trigger,
@@ -78,10 +100,14 @@
   justify-content: center;
   width: 1.5rem;
   height: 100%;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   border: none;
   padding: 0;
   background: none;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .ClearIcon {
@@ -100,8 +126,8 @@
 
 .Popup {
   box-sizing: border-box;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   width: var(--anchor-width);
   max-width: var(--available-width);
   overflow: clip;
@@ -110,6 +136,16 @@
     transform 0.1s;
   transform-origin: var(--transform-origin);
 
+  border: 1px solid var(--color-neutral-950);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+    border: 1px solid white;
+    box-shadow: none;
+  }
+
   &[data-starting-style] {
     opacity: 0;
     transform: scale(0.95);
@@ -118,13 +154,6 @@
   &[data-ending-style] {
     transition: none;
   }
-
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .Viewport {
@@ -145,7 +174,11 @@
   padding-right: 1.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Spinner {
@@ -182,7 +215,11 @@
     &[data-highlighted] {
       z-index: 0;
       position: relative;
-      color: light-dark(var(--color-neutral-950), white);
+      color: var(--color-neutral-950);
+
+      @media (prefers-color-scheme: dark) {
+        color: white;
+      }
     }
 
     &[data-highlighted]::before {
@@ -191,7 +228,11 @@
       position: absolute;
       inset-block: 0;
       inset-inline: 0;
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 }
@@ -225,7 +266,11 @@
   flex-wrap: wrap;
   gap: 0.5rem;
   font-size: 0.75rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .ItemEmail {
@@ -236,6 +281,10 @@
   box-sizing: border-box;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
   padding: 0.5rem 1rem 0.5rem 0.5rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
index a7ca5bddb1a..f37bcc3f0a0 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
@@ -12,7 +12,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .InputGroup {
@@ -21,8 +25,8 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 0.125rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   min-height: 2rem;
   padding: 0.25rem 0.5rem;
   width: 16rem;
@@ -32,13 +36,22 @@
     width: 22rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+  }
+
   &:has(.Chip) {
     padding-inline: 0.25rem;
   }
 
   &:focus-within {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -55,8 +68,8 @@
   display: flex;
   align-items: center;
   min-height: calc(1.5rem - 2px);
-  background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-100);
+  color: var(--color-neutral-950);
   font-size: 0.875rem;
   line-height: 1;
   padding: 0 0.2rem 0 0.4rem;
@@ -65,15 +78,30 @@
   outline: 0;
   cursor: default;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-800);
+    color: white;
+  }
+
   &:focus-within {
-    background-color: light-dark(var(--color-neutral-950), white);
-    color: light-dark(white, var(--color-neutral-950));
+    background-color: var(--color-neutral-950);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: var(--color-neutral-950);
+    }
   }
 
   @media (hover: hover) {
     &[data-highlighted] {
-      background-color: light-dark(var(--color-neutral-950), white);
-      color: light-dark(white, var(--color-neutral-950));
+      background-color: var(--color-neutral-950);
+      color: white;
+
+      @media (prefers-color-scheme: dark) {
+        background-color: white;
+        color: var(--color-neutral-950);
+      }
     }
   }
 }
@@ -92,7 +120,11 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+      background-color: var(--color-neutral-200);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-700);
+      }
     }
   }
 }
@@ -100,7 +132,11 @@
 .Chip:focus-within .ChipRemove {
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-700), var(--color-neutral-200));
+      background-color: var(--color-neutral-700);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-200);
+      }
     }
   }
 }
@@ -122,18 +158,23 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   min-width: 3rem;
 
-  &:focus {
-    outline: none;
-  }
-
   @media (any-pointer: coarse) {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
+  &:focus {
+    outline: none;
+  }
 }
 
 .Positioner {
@@ -144,8 +185,8 @@
 .Popup {
   box-sizing: border-box;
   padding-block: 0.25rem;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   width: var(--anchor-width);
   max-width: var(--available-width);
   max-height: min(var(--available-height), 24rem);
@@ -156,18 +197,21 @@
     opacity 0.1s,
     transform 0.1s;
   transform-origin: var(--transform-origin);
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+    border: 1px solid white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     transform: scale(0.95);
   }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .Item {
@@ -188,7 +232,11 @@
   &[data-selected] {
     z-index: 0;
     position: relative;
-    color: light-dark(var(--color-neutral-950), white);
+    color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      color: white;
+    }
   }
 
   &[data-selected]::before,
@@ -204,11 +252,19 @@
     &[data-highlighted] {
       z-index: 0;
       position: relative;
-      color: light-dark(white, var(--color-neutral-950));
+      color: white;
+
+      @media (prefers-color-scheme: dark) {
+        color: var(--color-neutral-950);
+      }
     }
 
     &[data-highlighted]::before {
-      background-color: light-dark(var(--color-neutral-950), white);
+      background-color: var(--color-neutral-950);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: white;
+      }
     }
   }
 }
@@ -231,8 +287,12 @@
   box-sizing: border-box;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
   padding: 0.5rem 1rem 0.5rem 0.5rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 /* Creatable option styling */
@@ -246,9 +306,13 @@
   border: none;
   background: none;
   text-align: left;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   padding: 0.5rem;
   cursor: default;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .CreateIcon {
@@ -294,13 +358,16 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 1.5rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition: all 150ms;
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
@@ -322,32 +389,47 @@
   margin: 0 0 1rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .TextField {
   box-sizing: border-box;
   width: 100%;
   height: 2rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
   padding: 0 0.5rem;
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
+  padding-inline: 0.5rem;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
 
-  &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
-    outline-offset: -2px;
-  }
-
   @media (any-pointer: coarse) {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-neutral-950);
+    outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Actions {
@@ -367,28 +449,46 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
index 4a8b53b9293..39f3a37ac40 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
@@ -3,12 +3,21 @@
   position: relative;
   width: 16rem;
   height: 2rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+  }
 
   &:focus-within {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -28,18 +37,23 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   outline: none;
 
-  &:focus {
-    outline: none;
-  }
-
   @media (any-pointer: coarse) {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
+  &:focus {
+    outline: none;
+  }
 }
 
 .Label {
@@ -49,8 +63,12 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   position: relative;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .ActionButtons {
@@ -63,8 +81,12 @@
   height: 100%;
   right: 0;
   border: none;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
   padding: 0;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Trigger,
@@ -75,10 +97,14 @@
   justify-content: center;
   width: 1.5rem;
   height: 100%;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   border: none;
   padding: 0;
   background: none;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .ClearIcon {
@@ -98,8 +124,8 @@
 .Popup {
   box-sizing: border-box;
   overflow: clip;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   width: var(--anchor-width);
   max-height: 23rem;
   max-width: var(--available-width);
@@ -108,18 +134,21 @@
     transform 0.1s;
   transform-origin: var(--transform-origin);
 
-  &[data-starting-style],
-  &[data-ending-style] {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+    border: 1px solid white;
     box-shadow: none;
   }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.95);
+  }
 }
 
 .List {
@@ -144,7 +173,11 @@
   padding: 0.5rem 0.5rem 0.5rem 1.75rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Item {
@@ -163,7 +196,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-neutral-950));
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-950);
+    }
   }
 
   &[data-highlighted]::before {
@@ -172,7 +209,11 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 }
 
@@ -195,5 +236,9 @@
   padding: 1rem 1rem 1rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
index 42313b94130..3e604a07563 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
@@ -3,12 +3,21 @@
   position: relative;
   width: 14rem;
   height: 2rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+  }
 
   &:focus-within {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 
   &:has(.Clear) .Input {
@@ -28,17 +37,22 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
-
-  &:focus {
-    outline: none;
-  }
+  background-color: white;
+  color: var(--color-neutral-950);
 
   @media (any-pointer: coarse) {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
+  &:focus {
+    outline: none;
+  }
 }
 
 .Label {
@@ -48,8 +62,12 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   position: relative;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .ActionButtons {
@@ -62,8 +80,12 @@
   height: 100%;
   right: 0;
   border: none;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
   padding: 0;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Trigger,
@@ -74,10 +96,14 @@
   justify-content: center;
   width: 1.5rem;
   height: 100%;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   border: none;
   padding: 0;
   background: none;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .ClearIcon {
@@ -96,8 +122,8 @@
 
 .Popup {
   box-sizing: border-box;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   width: var(--anchor-width);
   max-height: 23rem;
   max-width: var(--available-width);
@@ -107,18 +133,21 @@
     transform 0.1s;
   transform-origin: var(--transform-origin);
 
-  &[data-starting-style],
-  &[data-ending-style] {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+    border: 1px solid white;
     box-shadow: none;
   }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.95);
+  }
 }
 
 .List {
@@ -153,7 +182,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-neutral-950));
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-950);
+    }
   }
 
   &[data-highlighted]::before {
@@ -162,7 +195,11 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 }
 
@@ -183,6 +220,10 @@
 .Empty {
   font-size: 0.875rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
   padding: 1rem 1rem 1rem 0.5rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
index 5341a0c40c8..1e3ae9f6695 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
@@ -16,35 +16,57 @@
   padding-right: 0.5rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1;
   white-space: nowrap;
   font-weight: 400;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   cursor: default;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   user-select: none;
   min-width: 10rem;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    color: white;
+    background-color: var(--color-neutral-950);
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -58,7 +80,11 @@
 }
 
 .Placeholder {
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .InputContainer {
@@ -66,7 +92,11 @@
   width: 20rem;
   height: var(--input-container-height);
   text-align: center;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+  }
 }
 
 .Input {
@@ -82,27 +112,40 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   outline: none;
 
-  &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
-    outline-offset: -1px;
-  }
-
   @media (any-pointer: coarse) {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
+  &:focus {
+    outline: 2px solid var(--color-neutral-950);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Label {
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   cursor: default;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Positioner {
@@ -112,8 +155,8 @@
 .Popup {
   --input-container-height: 2rem;
   box-sizing: border-box;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   transform-origin: var(--transform-origin);
   transition:
     transform 150ms,
@@ -121,18 +164,21 @@
   max-width: var(--available-width);
   max-height: 24rem;
 
-  &[data-starting-style],
-  &[data-ending-style] {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+    border: 1px solid white;
     box-shadow: none;
   }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.9);
+  }
 }
 
 .List {
@@ -170,7 +216,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-neutral-950));
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-950);
+    }
   }
 
   &[data-highlighted]::before {
@@ -179,7 +229,11 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 }
 
@@ -200,13 +254,21 @@
 .Separator {
   margin: 0.375rem 1rem;
   height: 1px;
-  background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+  background-color: var(--color-neutral-100);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-800);
+  }
 }
 
 .Empty {
   box-sizing: border-box;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
   padding: 1rem 1rem 1rem 0.5rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
index d70c6e0186f..3fe8f3e780f 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
@@ -12,7 +12,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .InputGroup {
@@ -21,8 +25,8 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 0.125rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   min-height: 2rem;
   padding: 0.25rem 0.5rem;
   width: 16rem;
@@ -32,13 +36,22 @@
     width: 22rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+  }
+
   &:has(.Chip) {
     padding-inline: 0.25rem;
   }
 
   &:focus-within {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -55,8 +68,8 @@
   display: flex;
   align-items: center;
   min-height: calc(1.5rem - 2px);
-  background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-100);
+  color: var(--color-neutral-950);
   font-size: 0.875rem;
   line-height: 1;
   padding: 0 0.2rem 0 0.4rem;
@@ -65,15 +78,30 @@
   outline: 0;
   cursor: default;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-800);
+    color: white;
+  }
+
   &:focus-within {
-    background-color: light-dark(var(--color-neutral-950), white);
-    color: light-dark(white, var(--color-neutral-950));
+    background-color: var(--color-neutral-950);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: var(--color-neutral-950);
+    }
   }
 
   @media (hover: hover) {
     &[data-highlighted] {
-      background-color: light-dark(var(--color-neutral-950), white);
-      color: light-dark(white, var(--color-neutral-950));
+      background-color: var(--color-neutral-950);
+      color: white;
+
+      @media (prefers-color-scheme: dark) {
+        background-color: white;
+        color: var(--color-neutral-950);
+      }
     }
   }
 }
@@ -105,7 +133,11 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+      background-color: var(--color-neutral-200);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-700);
+      }
     }
   }
 }
@@ -113,7 +145,11 @@
 .Chip:focus-within .ChipRemove {
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-700), var(--color-neutral-200));
+      background-color: var(--color-neutral-700);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-200);
+      }
     }
   }
 }
@@ -135,18 +171,23 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   min-width: 3rem;
 
-  &:focus {
-    outline: none;
-  }
-
   @media (any-pointer: coarse) {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
+  &:focus {
+    outline: none;
+  }
 }
 
 .Positioner {
@@ -157,8 +198,8 @@
 .Popup {
   box-sizing: border-box;
   padding-block: 0.25rem;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   width: var(--anchor-width);
   max-width: var(--available-width);
   max-height: min(var(--available-height), 24rem);
@@ -169,18 +210,21 @@
     opacity 0.1s,
     transform 0.1s;
   transform-origin: var(--transform-origin);
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+    border: 1px solid white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     transform: scale(0.95);
   }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .Item {
@@ -201,7 +245,11 @@
   &[data-selected] {
     z-index: 0;
     position: relative;
-    color: light-dark(var(--color-neutral-950), white);
+    color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      color: white;
+    }
   }
 
   &[data-selected]::before,
@@ -217,11 +265,19 @@
     &[data-highlighted] {
       z-index: 0;
       position: relative;
-      color: light-dark(white, var(--color-neutral-950));
+      color: white;
+
+      @media (prefers-color-scheme: dark) {
+        color: var(--color-neutral-950);
+      }
     }
 
     &[data-highlighted]::before {
-      background-color: light-dark(var(--color-neutral-950), white);
+      background-color: var(--color-neutral-950);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: white;
+      }
     }
   }
 }
@@ -249,6 +305,10 @@
   box-sizing: border-box;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
   padding: 0.5rem 1rem 0.5rem 0.5rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
index 81e8cc22fcb..a988293f405 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
@@ -2,27 +2,37 @@
   box-sizing: border-box;
   padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
+  border: 1px solid var(--color-neutral-950);
   width: 16rem;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   outline: none;
 
-  &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
-    outline-offset: -2px;
-  }
-
   @media (any-pointer: coarse) {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
+  &:focus {
+    outline: 2px solid var(--color-neutral-950);
+    outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Label {
@@ -32,7 +42,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Positioner {
@@ -41,17 +55,20 @@
 
 .Popup {
   box-sizing: border-box;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   width: var(--anchor-width);
   max-height: min(22rem, var(--available-height));
   max-width: var(--available-width);
   overflow: clip;
 
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+    border: 1px solid white;
     box-shadow: none;
   }
 }
@@ -93,7 +110,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-neutral-950));
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-950);
+    }
   }
 
   &[data-highlighted]::before {
@@ -102,7 +123,11 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 }
 
@@ -124,6 +149,10 @@
   box-sizing: border-box;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
   padding: 1rem 1rem 1rem 0.5rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
index 48f92e428a3..a943f760988 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
@@ -6,16 +6,26 @@
   width: 15rem;
   height: 12rem;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-weight: 400;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -27,25 +37,28 @@
   box-sizing: border-box;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
     opacity 100ms ease-out;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     transform: scale(0.98);
   }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .Item {
@@ -62,7 +75,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-neutral-950));
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-950);
+    }
   }
 
   &[data-highlighted]::before {
@@ -71,16 +88,28 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
   }
 }
 
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
index 779c3ef877a..f26efbc994b 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
@@ -6,16 +6,26 @@
   width: 15rem;
   height: 12rem;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-weight: 400;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -28,25 +38,28 @@
   box-sizing: border-box;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
     opacity 100ms ease-out;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     transform: scale(0.98);
   }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .Arrow {
@@ -74,15 +87,27 @@
 }
 
 .ArrowFill {
-  fill: light-dark(white, var(--color-neutral-950));
+  fill: white;
+
+  @media (prefers-color-scheme: dark) {
+    fill: var(--color-neutral-950);
+  }
 }
 
 .ArrowOuterStroke {
-  fill: light-dark(var(--color-neutral-950), white);
+  fill: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    fill: white;
+  }
 }
 
 .ArrowInnerStroke {
-  fill: light-dark(white, var(--color-neutral-950));
+  fill: white;
+
+  @media (prefers-color-scheme: dark) {
+    fill: var(--color-neutral-950);
+  }
 }
 
 .Item,
@@ -108,13 +133,21 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-neutral-950));
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-950);
+    }
   }
 
   &[data-highlighted]::before {
@@ -123,15 +156,27 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 
   &[data-highlighted][data-popup-open]::before {
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
   }
 }
 
@@ -150,5 +195,9 @@
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
index 70030987557..c34a4a05e32 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
@@ -7,34 +7,57 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -74,15 +97,18 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 1rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 100ms ease-out,
     opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
@@ -110,7 +136,11 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
index ad5786c59d6..7b258011ecc 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
@@ -7,34 +7,57 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -73,9 +96,9 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 1rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   translate: -50% calc(-50% + 1.25rem * var(--nested-dialogs));
   scale: calc(1 - 0.1 * var(--nested-dialogs));
@@ -85,6 +108,9 @@
     opacity 150ms ease-out;
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
@@ -128,7 +154,11 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Actions {
@@ -147,28 +177,42 @@
   box-sizing: border-box;
   padding: 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
+  border: 1px solid var(--color-neutral-950);
   width: 100%;
   min-height: 8rem;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
 
   &::placeholder {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
   }
 
   &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
-  }
 
-  @media (any-pointer: coarse) {
-    font-size: 1rem;
-    line-height: 1.5rem;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
index ab8bbcc2cb5..aabc23db034 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
@@ -7,34 +7,57 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -74,15 +97,18 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 1rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 100ms ease-out,
     opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
@@ -110,7 +136,11 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
index 50639fe938c..c433f2abb8d 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
@@ -7,34 +7,57 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -89,12 +112,16 @@
 .Scrollbar {
   display: flex;
   justify-content: center;
-  background-color: light-dark(rgb(0 0 0 / 12%), rgb(255 255 255 / 12%));
+  background-color: rgb(0 0 0 / 12%);
   width: 0.5rem;
   opacity: 0;
   transition: opacity 150ms;
   pointer-events: none;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: rgb(255 255 255 / 12%);
+  }
+
   &[data-scrolling] {
     transition-duration: 0ms;
   }
@@ -108,7 +135,11 @@
 
 .ScrollbarThumb {
   width: 100%;
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
 
 .Popup {
@@ -119,9 +150,9 @@
   width: min(40rem, calc(100vw - 2rem));
   max-height: 100%;
   max-width: 100%;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 100ms ease-out,
@@ -130,6 +161,9 @@
   min-height: 0;
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
@@ -158,7 +192,11 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Body {
@@ -167,7 +205,11 @@
   display: flex;
   min-height: 0;
   overflow: hidden;
-  border-block: 1px solid light-dark(var(--color-neutral-950), white);
+  border-block: 1px solid var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    border-block: 1px solid white;
+  }
 }
 
 .BodyViewport {
@@ -177,8 +219,12 @@
   overscroll-behavior: contain;
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -206,7 +252,11 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-700), var(--color-neutral-300));
+  color: var(--color-neutral-700);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-300);
+  }
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
index ebaa9c23229..9542f137cc5 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
@@ -7,34 +7,57 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -53,18 +76,30 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+      background-color: var(--color-neutral-200);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -103,9 +138,9 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 1rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   translate: -50% calc(-50% + 1.25rem * var(--nested-dialogs));
   scale: calc(1 - 0.1 * var(--nested-dialogs));
@@ -115,6 +150,9 @@
     opacity 150ms ease-out;
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
@@ -157,7 +195,11 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
index fe7eddcd894..3e2c51dddba 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
@@ -7,41 +7,64 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Backdrop {
   position: fixed;
   inset: 0;
-  background-color: light-dark(rgb(0 0 0 / 20%), rgb(0 0 0 / 50%));
+  background-color: rgb(0 0 0 / 20%);
   transition-duration: 350ms;
   transition-property: opacity;
   transition-timing-function: var(--ease-out-fast);
@@ -51,6 +74,10 @@
     position: absolute;
   }
 
+  @media (prefers-color-scheme: dark) {
+    background-color: rgb(0 0 0 / 50%);
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -87,12 +114,16 @@
 .Scrollbar {
   display: flex;
   justify-content: center;
-  background-color: light-dark(rgb(0 0 0 / 12%), rgb(255 255 255 / 12%));
+  background-color: rgb(0 0 0 / 12%);
   width: 0.5rem;
   opacity: 0;
   transition: opacity 250ms;
   pointer-events: none;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: rgb(255 255 255 / 12%);
+  }
+
   &:hover,
   &[data-scrolling] {
     opacity: 1;
@@ -109,7 +140,11 @@
 
 .ScrollbarThumb {
   width: 100%;
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
 
 .Popup {
@@ -121,21 +156,24 @@
   width: min(40rem, calc(100vw - 2rem));
   padding: 1rem;
   margin: 4rem auto;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition: transform 350ms cubic-bezier(0.45, 1.005, 0, 1.005);
   outline: 0;
 
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
-
   @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style] {
     transform: translateY(100dvh);
   }
@@ -166,7 +204,11 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Close {
@@ -182,21 +224,37 @@
   padding: 0;
   border: none;
   background-color: transparent;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -229,22 +287,34 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-700), var(--color-neutral-300));
+  color: var(--color-neutral-700);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-300);
+  }
 }
 
 .FooterNote {
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .FooterLink {
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   text-decoration: underline;
   text-decoration-thickness: 1px;
   text-underline-offset: 0.16em;
 
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
       text-decoration: none;
@@ -252,7 +322,11 @@
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
index 27463b6a1be..d2104c0fd6a 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
@@ -7,34 +7,57 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -42,7 +65,7 @@
   position: fixed;
   min-height: 100dvh;
   inset: 0;
-  background-color: light-dark(rgb(0 0 0 / 20%), rgb(0 0 0 / 50%));
+  background-color: rgb(0 0 0 / 20%);
   transition: opacity 150ms;
 
   /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
@@ -50,6 +73,10 @@
     position: absolute;
   }
 
+  @media (prefers-color-scheme: dark) {
+    background-color: rgb(0 0 0 / 50%);
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -95,13 +122,16 @@
   max-width: 70rem;
   padding: 1rem;
   pointer-events: auto;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
@@ -122,34 +152,49 @@
   width: 2rem;
   height: 2rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
-
   @media (min-width: 80rem) {
     top: 0;
     width: 2.5rem;
     height: 2.5rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
index e4889c6ab00..3a068eb77b7 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
@@ -7,34 +7,57 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -95,9 +118,9 @@
   padding: 1.5rem;
   padding-right: calc(1.5rem + var(--bleed));
   margin-right: calc(-1 * var(--bleed));
-  border-left: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border-left: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   outline: 0;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
@@ -107,14 +130,17 @@
   will-change: transform;
   transform: translateX(var(--drawer-swipe-movement-x));
 
-  &[data-swiping] {
-    user-select: none;
-  }
-
   @media (prefers-color-scheme: dark) {
+    border-left: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
+  &[data-swiping] {
+    user-select: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     transform: translateX(calc(100% - var(--bleed) + var(--viewport-padding) + 2px));
@@ -127,7 +153,11 @@
   @supports (-webkit-touch-callout: none) {
     --bleed: 0px;
     margin-right: 0;
-    border: 1px solid light-dark(var(--color-neutral-950), white);
+    border: 1px solid var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      border: 1px solid white;
+    }
     border-radius: 10px;
   }
 }
@@ -150,7 +180,11 @@
   margin: 0 0 1.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
index c99c7424230..b88b9571edb 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
@@ -15,14 +15,20 @@
     border-radius 0.25s cubic-bezier(0.32, 0.72, 0, 1);
   transform-origin: center top;
   will-change: transform;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   contain: layout;
   padding: 1rem;
-  color: light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  color: var(--color-neutral-950);
+  background-color: white;
   transition-duration:
     calc(400ms * var(--indent-transition)), calc(250ms * var(--indent-transition));
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    color: white;
+    background-color: var(--color-neutral-950);
+  }
+
   &[data-active] {
     transform: scale(calc(0.98 + (0.02 * var(--drawer-swipe-progress))))
       translateY(calc(0.5rem * (1 - var(--drawer-swipe-progress))));
@@ -57,34 +63,57 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -133,9 +162,9 @@
   margin-bottom: calc(-1 * var(--bleed));
   padding: 1rem 1.5rem 1.5rem;
   padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + var(--bleed));
-  border-top: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border-top: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   outline: 0;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
@@ -144,14 +173,17 @@
   will-change: transform;
   transform: translateY(var(--drawer-swipe-movement-y));
 
-  &[data-swiping] {
-    user-select: none;
-  }
-
   @media (prefers-color-scheme: dark) {
+    border-top: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
+  &[data-swiping] {
+    user-select: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     transform: translateY(calc(100% - var(--bleed) + 2px));
@@ -172,7 +204,11 @@
   width: 3rem;
   height: 0.25rem;
   margin: 0 auto 1rem;
-  background-color: light-dark(var(--color-neutral-300), var(--color-neutral-700));
+  background-color: var(--color-neutral-300);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-700);
+  }
 }
 
 .Title {
@@ -188,8 +224,12 @@
   margin: 0 0 1.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
   text-align: center;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
index b3dd24fb766..722163be60b 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
@@ -7,34 +7,57 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -143,11 +166,17 @@
   display: flex;
   flex-direction: column;
   padding: 1rem 1.5rem 1.5rem;
-  border-top: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border-top: 1px solid var(--color-neutral-950);
+  background-color: white;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   transition: box-shadow 350ms cubic-bezier(0.375, 0.015, 0.545, 0.455);
+
+  @media (prefers-color-scheme: dark) {
+    border-top: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -173,15 +202,23 @@
 
 @media (min-width: 42rem) {
   .Panel {
-    border: 1px solid light-dark(var(--color-neutral-950), white);
+    border: 1px solid var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      border: 1px solid white;
+    }
   }
 }
 
 .Handle {
   width: 3rem;
   height: 0.25rem;
-  background-color: light-dark(var(--color-neutral-300), var(--color-neutral-700));
+  background-color: var(--color-neutral-300);
   justify-self: center;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-700);
+  }
 }
 
 .CloseButton {
@@ -192,22 +229,38 @@
   justify-content: center;
   border: 0;
   background-color: transparent;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   justify-self: end;
 
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -227,7 +280,11 @@
   margin: 0 0 1.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .ScrollArea {
@@ -261,26 +318,43 @@
   width: 100%;
   height: 3rem;
   padding: 0 1rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: inherit;
   text-decoration: none;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+  }
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
index 5af13df0be0..9c42773af27 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
@@ -7,34 +7,57 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -110,9 +133,9 @@
   padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + var(--bleed));
   border-width: 1px 1px 0;
   border-style: solid;
-  border-color: light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border-color: var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   outline: 0;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
@@ -125,6 +148,13 @@
   will-change: transform;
   transform: translateY(var(--translate-y)) scale(var(--stack-scale));
 
+  @media (prefers-color-scheme: dark) {
+    border-color: white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-swiping],
   &[data-nested-drawer-swiping] {
     transition-duration: 0ms;
@@ -134,10 +164,6 @@
     user-select: none;
   }
 
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
-
   &::after {
     content: '';
     inset: 0;
@@ -187,9 +213,13 @@
   width: 3rem;
   height: 0.25rem;
   margin: 0 auto 1rem;
-  background-color: light-dark(var(--color-neutral-300), var(--color-neutral-700));
+  background-color: var(--color-neutral-300);
   transition: opacity 0.2s;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-700);
+  }
+
   [data-nested-drawer-open] & {
     opacity: 0;
   }
@@ -212,8 +242,12 @@
   margin: 0 0 1.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
   text-align: center;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Actions {
@@ -230,7 +264,11 @@
 .List {
   margin: 0 0 1.5rem;
   padding-left: 1.25rem;
-  color: light-dark(var(--color-neutral-700), var(--color-neutral-300));
+  color: var(--color-neutral-700);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-300);
+  }
 }
 
 .Field {
@@ -243,7 +281,11 @@
   font-size: 0.925rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-700), var(--color-neutral-300));
+  color: var(--color-neutral-700);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-300);
+  }
 }
 .Input {
   box-sizing: border-box;
@@ -251,27 +293,41 @@
   height: 2rem;
   padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
 
   &::placeholder {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
   }
 
   &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
-  }
 
-  @media (any-pointer: coarse) {
-    font-size: 1rem;
-    line-height: 1.5rem;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -279,29 +335,53 @@
   box-sizing: border-box;
   width: 100%;
   min-height: 8rem;
-  padding: 0.5rem;
+  padding: 0.5rem 0.625rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   resize: vertical;
 
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   &::placeholder {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
   }
 
   &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
+}
 
-  @media (any-pointer: coarse) {
-    font-size: 1rem;
-    line-height: 1.5rem;
+.Input:focus-visible,
+.Textarea:focus-visible {
+  outline: 2px solid var(--color-neutral-950);
+  outline-offset: -2px;
+
+  @media (prefers-color-scheme: dark) {
+    outline-color: white;
   }
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
index 0811a32b9b3..4875a096d41 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
@@ -7,34 +7,57 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -96,9 +119,9 @@
   padding: 1.5rem;
   padding-right: calc(1.5rem + var(--bleed));
   margin-right: calc(-1 * var(--bleed));
-  border-left: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border-left: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   outline: 0;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -111,14 +134,17 @@
   will-change: transform;
   transform: translateX(var(--drawer-swipe-movement-x));
 
-  &[data-swiping] {
-    user-select: none;
-  }
-
   @media (prefers-color-scheme: dark) {
+    border-left: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
+  &[data-swiping] {
+    user-select: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     transform: translateX(calc(100% - var(--bleed) + var(--viewport-padding) + 2px));
@@ -132,7 +158,11 @@
   @supports (-webkit-touch-callout: none) {
     --bleed: 0px;
     margin-right: 0;
-    border: 1px solid light-dark(var(--color-neutral-950), white);
+    border: 1px solid var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      border: 1px solid white;
+    }
     border-radius: 10px;
   }
 }
@@ -155,7 +185,11 @@
   margin: 0 0 1.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
index 778e68a2b0e..f1db79ab4b6 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
@@ -7,34 +7,57 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -84,9 +107,9 @@
   margin-bottom: calc(-1 * var(--bleed));
   padding: 1rem 1.5rem 1.5rem;
   padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + var(--bleed));
-  border-top: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border-top: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   outline: 0;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
@@ -95,14 +118,17 @@
   will-change: transform;
   transform: translateY(var(--drawer-swipe-movement-y));
 
-  &[data-swiping] {
-    user-select: none;
-  }
-
   @media (prefers-color-scheme: dark) {
+    border-top: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
+  &[data-swiping] {
+    user-select: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     transform: translateY(calc(100% - var(--bleed) + 2px));
@@ -123,7 +149,11 @@
   width: 3rem;
   height: 0.25rem;
   margin: 0 auto 1rem;
-  background-color: light-dark(var(--color-neutral-300), var(--color-neutral-700));
+  background-color: var(--color-neutral-300);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-700);
+  }
 }
 
 .Title {
@@ -139,8 +169,12 @@
   margin: 0 0 1.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
   text-align: center;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
index f0560da3653..487da792562 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
@@ -7,34 +7,57 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -92,9 +115,9 @@
   width: 100%;
   max-height: calc(100dvh - var(--top-margin));
   padding-bottom: max(0px, calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y)));
-  border-top: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border-top: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   outline: 0;
   overflow: visible;
   touch-action: none;
@@ -105,6 +128,13 @@
   transform: translateY(calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y)));
   will-change: transform;
 
+  @media (prefers-color-scheme: dark) {
+    border-top: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &::after {
     content: '';
     position: absolute;
@@ -119,10 +149,6 @@
     user-select: none;
   }
 
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
-
   &[data-starting-style],
   &[data-ending-style] {
     transform: translateY(calc(100% + 2px));
@@ -138,8 +164,12 @@
 .DragArea {
   flex-shrink: 0;
   padding: 0.875rem 1.5rem 1rem;
-  border-bottom: 1px solid light-dark(var(--color-neutral-300), var(--color-neutral-700));
+  border-bottom: 1px solid var(--color-neutral-300);
   touch-action: none;
+
+  @media (prefers-color-scheme: dark) {
+    border-bottom: 1px solid var(--color-neutral-700);
+  }
 }
 
 .Scroll {
@@ -156,7 +186,11 @@
   height: 0.25rem;
   margin: 0 auto 0.625rem;
   flex-shrink: 0;
-  background-color: light-dark(var(--color-neutral-300), var(--color-neutral-700));
+  background-color: var(--color-neutral-300);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-700);
+  }
 }
 
 .Title {
@@ -172,8 +206,12 @@
   margin: 0 0 1.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
   text-align: center;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Meta {
@@ -192,7 +230,11 @@
 
 .Card {
   height: 3rem;
-  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  background-color: var(--color-neutral-200);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-700);
+  }
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
index 7ec6facaa9a..aa5f1dd4d77 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
@@ -3,9 +3,15 @@
   width: 100%;
   min-height: 20rem;
   overflow: hidden;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
 }
 
 .Center {
@@ -28,9 +34,13 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
   text-align: center;
   padding-right: 3rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .SwipeArea {
@@ -71,34 +81,57 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -155,9 +188,9 @@
   padding: 1.5rem;
   padding-right: calc(1.5rem + var(--bleed));
   margin-right: calc(-1 * var(--bleed));
-  border-left: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border-left: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   outline: 0;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
@@ -166,14 +199,17 @@
   will-change: transform;
   transform: translateX(var(--drawer-swipe-movement-x));
 
-  &[data-swiping] {
-    user-select: none;
-  }
-
   @media (prefers-color-scheme: dark) {
+    border-left: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
+  &[data-swiping] {
+    user-select: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     transform: translateX(calc(100% - var(--bleed) + var(--viewport-padding) + 2px));
@@ -186,7 +222,11 @@
   @supports (-webkit-touch-callout: none) {
     --bleed: 0px;
     margin-right: 0;
-    border: 1px solid light-dark(var(--color-neutral-950), white);
+    border: 1px solid var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      border: 1px solid white;
+    }
     border-radius: 10px;
   }
 }
@@ -209,7 +249,11 @@
   margin: 0 0 1.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Actions {
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
index e536339542c..953beb8d9f0 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
@@ -7,34 +7,57 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -110,13 +133,16 @@
 
 .Surface {
   pointer-events: auto;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow: hidden;
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 }
@@ -128,7 +154,11 @@
 }
 
 .Action:not(:first-child) {
-  border-top: 1px solid light-dark(var(--color-neutral-950), white);
+  border-top: 1px solid var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    border-top: 1px solid white;
+  }
 }
 
 .ActionButton {
@@ -148,28 +178,42 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
     outline: 0;
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 }
 
 .DangerSurface {
   pointer-events: auto;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow: hidden;
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
     box-shadow: none;
   }
 }
@@ -191,17 +235,29 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
     outline: 0;
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
index bf7794692a9..c8e7fb77549 100644
--- a/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
@@ -11,48 +11,74 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Input {
   box-sizing: border-box;
   padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
+  border: 1px solid var(--color-neutral-950);
   width: 100%;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
 
   &::placeholder {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
   }
 
   &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
-  }
 
-  @media (any-pointer: coarse) {
-    font-size: 1rem;
-    line-height: 1.5rem;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Error {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-red-700), var(--color-red-400));
+  color: var(--color-red-700);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-red-400);
+  }
 }
 
 .Description {
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
index b8f1ff7cc56..88f0528c56e 100644
--- a/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
@@ -10,11 +10,16 @@
 }
 
 .Legend {
-  border-bottom: 1px solid light-dark(var(--color-neutral-950), var(--color-white));
+  border-bottom: 1px solid var(--color-neutral-950);
   font-weight: 700;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    border-bottom: 1px solid var(--color-white);
+    color: white;
+  }
 }
 
 .Field {
@@ -28,48 +33,74 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Input {
   box-sizing: border-box;
   padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
+  border: 1px solid var(--color-neutral-950);
   width: 100%;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
 
   &::placeholder {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
   }
 
   &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
-  }
 
-  @media (any-pointer: coarse) {
-    font-size: 1rem;
-    line-height: 1.5rem;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Error {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-red-700), var(--color-red-400));
+  color: var(--color-red-700);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-red-400);
+  }
 }
 
 .Description {
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
index 1e5dca74707..236dd80d749 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
@@ -17,43 +17,65 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Input {
   box-sizing: border-box;
   padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
+  border: 1px solid var(--color-neutral-950);
   width: 100%;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
 
   &::placeholder {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
   }
 
   &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
-  }
 
-  @media (any-pointer: coarse) {
-    font-size: 1rem;
-    line-height: 1.5rem;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Error {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-red-700), var(--color-red-400));
+  color: var(--color-red-700);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-red-400);
+  }
 }
 
 .Button {
@@ -66,34 +88,57 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
index 1e5dca74707..236dd80d749 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
@@ -17,43 +17,65 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Input {
   box-sizing: border-box;
   padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
+  border: 1px solid var(--color-neutral-950);
   width: 100%;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
 
   &::placeholder {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
   }
 
   &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
-  }
 
-  @media (any-pointer: coarse) {
-    font-size: 1rem;
-    line-height: 1.5rem;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Error {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-red-700), var(--color-red-400));
+  color: var(--color-red-700);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-red-400);
+  }
 }
 
 .Button {
@@ -66,34 +88,57 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
index 1e5dca74707..236dd80d749 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
@@ -17,43 +17,65 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Input {
   box-sizing: border-box;
   padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
+  border: 1px solid var(--color-neutral-950);
   width: 100%;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
 
   &::placeholder {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
   }
 
   &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
-  }
 
-  @media (any-pointer: coarse) {
-    font-size: 1rem;
-    line-height: 1.5rem;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Error {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-red-700), var(--color-red-400));
+  color: var(--color-red-700);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-red-400);
+  }
 }
 
 .Button {
@@ -66,34 +88,57 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
index 681f794a838..195b5027f99 100644
--- a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
@@ -6,35 +6,53 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Input {
   box-sizing: border-box;
   padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
   border-radius: 0;
+  border: 1px solid var(--color-neutral-950);
   width: 10rem;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
+
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
 
   &::placeholder {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
   }
 
   &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
-  }
 
-  @media (any-pointer: coarse) {
-    font-size: 1rem;
-    line-height: 1.5rem;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
index bcc9157247e..92008e03098 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
@@ -8,34 +8,61 @@
   padding: 0;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -61,39 +88,66 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -106,25 +160,28 @@
   position: relative;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
     opacity 100ms ease-out;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     transform: scale(0.98);
   }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .Item {
@@ -142,7 +199,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-neutral-950));
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-950);
+    }
   }
 
   &[data-highlighted]::before {
@@ -151,11 +212,19 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
   }
 }
 
@@ -164,11 +233,19 @@
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
index ceede02f15a..206f8474b3d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
@@ -8,39 +8,66 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -59,25 +86,28 @@
   position: relative;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
     opacity 100ms ease-out;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     transform: scale(0.98);
   }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .Arrow {
@@ -116,9 +146,14 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-neutral-950));
-    border: 1px solid light-dark(var(--color-neutral-950), white);
+    background-color: white;
+    border: 1px solid var(--color-neutral-950);
     transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-950);
+      border: 1px solid white;
+    }
   }
 }
 
@@ -136,7 +171,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-neutral-950));
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-950);
+    }
   }
 
   &[data-highlighted]::before {
@@ -145,12 +184,20 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 }
 
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
index 11ce3bc7344..27ce728eeb7 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
@@ -8,39 +8,66 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -59,25 +86,28 @@
   position: relative;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
     opacity 100ms ease-out;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     transform: scale(0.98);
   }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .CheckboxItem {
@@ -98,7 +128,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-neutral-950));
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-950);
+    }
   }
 
   &[data-highlighted]::before {
@@ -107,11 +141,19 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
   }
 }
 
@@ -132,5 +174,9 @@
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
index e0e34f0ba45..53b77208d9d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
@@ -8,39 +8,66 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -59,25 +86,28 @@
   position: relative;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
     opacity 100ms ease-out;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     transform: scale(0.98);
   }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .CheckboxItem,
@@ -98,7 +128,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-neutral-950));
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-950);
+    }
   }
 
   &[data-highlighted]::before {
@@ -107,11 +141,19 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
   }
 }
 
@@ -136,7 +178,11 @@
   margin-block: 0.25rem;
   margin-inline: 0.25rem;
   height: 1px;
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
 
 .GroupLabel {
@@ -146,5 +192,9 @@
   padding-right: 2rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
index 15c52134008..3e43bcf3965 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
@@ -8,39 +8,66 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -59,25 +86,28 @@
   position: relative;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
     opacity 100ms ease-out;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     transform: scale(0.98);
   }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .Item {
@@ -94,7 +124,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-neutral-950));
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-950);
+    }
   }
 
   &[data-highlighted]::before {
@@ -103,16 +137,28 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
   }
 }
 
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
index 15c52134008..3e43bcf3965 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
@@ -8,39 +8,66 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -59,25 +86,28 @@
   position: relative;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
     opacity 100ms ease-out;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     transform: scale(0.98);
   }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .Item {
@@ -94,7 +124,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-neutral-950));
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-950);
+    }
   }
 
   &[data-highlighted]::before {
@@ -103,16 +137,28 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
   }
 }
 
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
index 8a2bb422127..556a043357e 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
@@ -8,39 +8,66 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -59,25 +86,28 @@
   position: relative;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
     opacity 100ms ease-out;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     transform: scale(0.98);
   }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .RadioItem {
@@ -97,7 +127,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-neutral-950));
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-950);
+    }
   }
 
   &[data-highlighted]::before {
@@ -106,11 +140,19 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
   }
 }
 
@@ -131,5 +173,9 @@
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
index 213fa383cf0..e18043bb86c 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
@@ -8,39 +8,66 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -59,25 +86,28 @@
   position: relative;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
     opacity 100ms ease-out;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     transform: scale(0.98);
   }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .Item,
@@ -100,7 +130,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-neutral-950));
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-950);
+    }
   }
 
   &[data-popup-open]::before,
@@ -113,19 +147,35 @@
   }
 
   &[data-popup-open]::before {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &[data-highlighted]::before {
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 
   &[data-highlighted][data-popup-open]::before {
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
   }
 }
 
@@ -144,5 +194,9 @@
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
index 8c9f3475ed5..c99debd7cd7 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
@@ -10,36 +10,61 @@
   margin: 0;
   border: 0;
   background-color: transparent;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-pressed],
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-100);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+      outline-color: white;
+    }
   }
 }
 
@@ -51,15 +76,22 @@
   box-sizing: border-box;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
     opacity 100ms ease-out;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -69,10 +101,6 @@
   &[data-instant] {
     transition: none;
   }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .MenuItem {
@@ -98,7 +126,11 @@
   &[data-highlighted] {
     z-index: 0;
     position: relative;
-    color: light-dark(white, var(--color-neutral-950));
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-950);
+    }
   }
 
   &[data-popup-open]::before,
@@ -111,15 +143,27 @@
   }
 
   &[data-popup-open]::before {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &[data-highlighted]::before {
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 
   &[data-highlighted][data-popup-open]::before {
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 
   & svg {
@@ -131,5 +175,9 @@
 .MenuSeparator {
   margin: 0.25rem;
   height: 1px;
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
index e447a454256..bb54980b5dd 100644
--- a/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
@@ -10,24 +10,40 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Value {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   text-align: right;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Track {
   grid-column: 1 / 3;
   overflow: hidden;
   height: 0.75rem;
-  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  background-color: var(--color-neutral-200);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-800);
+  }
 }
 
 .Indicator {
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
   transition: width 500ms;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
index 6cfe721d16b..c23d8ece45f 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
@@ -1,7 +1,11 @@
 .Root {
   box-sizing: border-box;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   min-width: max-content;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .List {
@@ -29,7 +33,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
   text-decoration: none;
 
@@ -37,19 +41,35 @@
     padding: 0 0.5rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -125,9 +145,9 @@
   overflow: visible;
   box-sizing: border-box;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition-property: opacity, transform, width, height;
@@ -136,6 +156,13 @@
   width: var(--popup-width);
   height: var(--popup-height);
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -146,9 +173,6 @@
     transition-timing-function: ease;
     transition-duration: 0.15s;
   }
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .Content {
@@ -233,18 +257,30 @@
   background-color: transparent;
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -259,7 +295,11 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Arrow {
@@ -301,8 +341,13 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    border: 1px solid light-dark(var(--color-neutral-950), white);
-    background-color: light-dark(white, var(--color-neutral-950));
+    border: 1px solid var(--color-neutral-950);
+    background-color: white;
     transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      border: 1px solid white;
+      background-color: var(--color-neutral-950);
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
index 36895903fdc..b9dd1db0351 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
@@ -1,7 +1,11 @@
 .Root {
   box-sizing: border-box;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   min-width: max-content;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .List {
@@ -29,7 +33,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
   text-decoration: none;
 
@@ -37,19 +41,35 @@
     padding: 0 0.5rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -125,9 +145,9 @@
   overflow: visible;
   box-sizing: border-box;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition-property: opacity, transform, width, height;
@@ -136,6 +156,13 @@
   width: var(--popup-width);
   height: var(--popup-height);
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -146,9 +173,6 @@
     transition-timing-function: ease;
     transition-duration: 0.15s;
   }
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .Content {
@@ -211,9 +235,13 @@
 }
 
 .SubmenuRoot {
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   overflow: hidden;
   overflow: clip;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .SubmenuLayout {
@@ -246,9 +274,13 @@
     gap: 0;
     overflow-x: visible;
     overflow-y: clip;
-    border-right: 1px solid light-dark(var(--color-neutral-950), white);
+    border-right: 1px solid var(--color-neutral-950);
     height: var(--popup-height);
     transition: height var(--duration) var(--easing);
+
+    @media (prefers-color-scheme: dark) {
+      border-right: 1px solid white;
+    }
   }
 }
 
@@ -270,17 +302,29 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -288,20 +332,32 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .SubmenuHint {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .SubmenuViewport {
   position: relative;
   overflow: hidden;
   min-height: 16.5rem;
-  border-top: 1px solid light-dark(var(--color-neutral-950), white);
+  border-top: 1px solid var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    border-top: 1px solid white;
+  }
 }
 
 @media (min-width: 700px) {
@@ -383,9 +439,13 @@
 
 .SubmenuDescription {
   margin: 0.25rem 0 0;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
   font-size: 0.875rem;
   line-height: 1.25rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .LinkList {
@@ -411,18 +471,30 @@
   background-color: transparent;
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -435,9 +507,13 @@
 
 .LinkDescription {
   margin: 0;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
   font-size: 0.875rem;
   line-height: 1.25rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .GuidesPanel {
@@ -490,8 +566,13 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    border: 1px solid light-dark(var(--color-neutral-950), white);
-    background-color: light-dark(white, var(--color-neutral-950));
+    border: 1px solid var(--color-neutral-950);
+    background-color: white;
     transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      border: 1px solid white;
+      background-color: var(--color-neutral-950);
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
index d693098b999..2aedd19f5b3 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
@@ -1,7 +1,11 @@
 .Root {
   box-sizing: border-box;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   min-width: max-content;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .List {
@@ -29,7 +33,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
   text-decoration: none;
 
@@ -37,19 +41,35 @@
     padding: 0 0.5rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -125,9 +145,9 @@
   overflow: visible;
   box-sizing: border-box;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition-property: opacity, transform, width, height;
@@ -136,6 +156,13 @@
   width: var(--popup-width);
   height: var(--popup-height);
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -146,9 +173,6 @@
     transition-timing-function: ease;
     transition-duration: 0.15s;
   }
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .Content {
@@ -234,18 +258,30 @@
   background-color: transparent;
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -260,7 +296,11 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Arrow {
@@ -302,9 +342,14 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    border: 1px solid light-dark(var(--color-neutral-950), white);
-    background-color: light-dark(white, var(--color-neutral-950));
+    border: 1px solid var(--color-neutral-950);
+    background-color: white;
     transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      border: 1px solid white;
+      background-color: var(--color-neutral-950);
+    }
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
index 03819d3da96..9846ca0ea39 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
@@ -20,7 +20,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Group {
@@ -32,7 +36,7 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0 0.5rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
   width: 7ch;
   height: 100%;
@@ -40,21 +44,31 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
 
   text-align: left;
   font-variant-numeric: tabular-nums;
 
+  @media (any-pointer: coarse) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   &:focus {
     z-index: 1;
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -1px;
-  }
 
-  @media (any-pointer: coarse) {
-    font-size: 1rem;
-    line-height: 1.5rem;
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -69,26 +83,45 @@
   margin: 0;
   outline: 0;
   padding: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   background-clip: padding-box;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   svg {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
index 4665c64717d..95cfc630378 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
@@ -11,7 +11,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Root {
@@ -24,7 +28,7 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
@@ -33,12 +37,22 @@
   line-height: 1.5rem;
   font-weight: 400;
   text-align: center;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
 
   &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -46,7 +60,11 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Code {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
index db4661e1c31..a6d49aa8994 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
@@ -11,7 +11,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Root {
@@ -24,7 +28,8 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+
+  border: 1px solid var(--color-neutral-950);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
@@ -33,36 +38,64 @@
   line-height: 1.5rem;
   font-weight: 400;
   text-align: center;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
 
   &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .InputInvalidA {
-  border-color: light-dark(var(--color-red-700), var(--color-red-400));
-  outline: 2px solid light-dark(var(--color-red-700), var(--color-red-400));
+  border-color: var(--color-red-700);
+  outline: 2px solid var(--color-red-700);
   outline-offset: -2px;
   animation: otp-field-shake-a 180ms ease-in-out;
 
+  @media (prefers-color-scheme: dark) {
+    border-color: var(--color-red-400);
+    outline: 2px solid var(--color-red-400);
+  }
+
   &:focus {
-    outline: 2px solid light-dark(var(--color-red-700), var(--color-red-400));
+    outline: 2px solid var(--color-red-700);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: var(--color-red-400);
+    }
   }
 }
 
 .InputInvalidB {
-  border-color: light-dark(var(--color-red-700), var(--color-red-400));
-  outline: 2px solid light-dark(var(--color-red-700), var(--color-red-400));
+  border-color: var(--color-red-700);
+  outline: 2px solid var(--color-red-700);
   outline-offset: -2px;
   animation: otp-field-shake-b 180ms ease-in-out;
 
+  @media (prefers-color-scheme: dark) {
+    border-color: var(--color-red-400);
+    outline: 2px solid var(--color-red-400);
+  }
+
   &:focus {
-    outline: 2px solid light-dark(var(--color-red-700), var(--color-red-400));
+    outline: 2px solid var(--color-red-700);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: var(--color-red-400);
+    }
   }
 }
 
@@ -70,7 +103,11 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Code {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
index 8108cb3785c..5004abbc1be 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
@@ -11,7 +11,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Root {
@@ -24,7 +28,8 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+
+  border: 1px solid var(--color-neutral-950);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
@@ -33,16 +38,30 @@
   line-height: 1.5rem;
   font-weight: 400;
   text-align: center;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
 
   &::placeholder {
-    color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+    color: var(--color-neutral-600);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
   }
 
   &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 
   &:focus::placeholder {
@@ -54,5 +73,9 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
index ee4b1d235dc..348071ce60a 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
@@ -11,7 +11,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Root {
@@ -30,7 +34,8 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+
+  border: 1px solid var(--color-neutral-950);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
@@ -39,12 +44,22 @@
   line-height: 1.5rem;
   font-weight: 400;
   text-align: center;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
 
   &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -52,5 +67,9 @@
   width: 1rem;
   height: 1px;
   background-color: currentColor;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
index 6aaae4380d3..fc36fff3b02 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
@@ -11,7 +11,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Root {
@@ -24,7 +28,8 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+
+  border: 1px solid var(--color-neutral-950);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
@@ -33,12 +38,22 @@
   line-height: 1.5rem;
   font-weight: 400;
   text-align: center;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
 
   &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -46,5 +61,9 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
index 4665c64717d..7142ec3f151 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
@@ -11,7 +11,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Root {
@@ -24,7 +28,8 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+
+  border: 1px solid var(--color-neutral-950);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
@@ -33,12 +38,22 @@
   line-height: 1.5rem;
   font-weight: 400;
   text-align: center;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
 
   &:focus {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -46,7 +61,11 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Code {
diff --git a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
index 18cc4dcad4c..2f734a59a24 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
@@ -11,9 +11,9 @@
   flex-direction: column;
   gap: 0.25rem;
   padding: 0.75rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
@@ -25,6 +25,9 @@
   max-width: 500px;
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
@@ -71,9 +74,14 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-neutral-950));
-    border: 1px solid light-dark(var(--color-neutral-950), white);
+    background-color: white;
+    border: 1px solid var(--color-neutral-950);
     transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-950);
+      border: 1px solid white;
+    }
   }
 }
 
@@ -88,7 +96,11 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Container {
@@ -107,38 +119,65 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled], :disabled) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled], :disabled) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-popup-open]:not([data-disabled], :disabled) {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &[data-disabled],
   &:disabled {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
index 031e1eb4c25..4e5d5319379 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
@@ -18,9 +18,9 @@
 
 .Popup {
   position: relative;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
+  border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
 
@@ -36,6 +36,9 @@
   transition-duration: var(--animation-duration);
 
   @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+    color: white;
+    border: 1px solid white;
     box-shadow: none;
   }
 
@@ -133,9 +136,14 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-neutral-950));
-    border: 1px solid light-dark(var(--color-neutral-950), white);
+    background-color: white;
+    border: 1px solid var(--color-neutral-950);
     transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-950);
+      border: 1px solid white;
+    }
   }
 }
 
@@ -156,7 +164,11 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Container {
@@ -180,7 +192,11 @@
     grid-row: 2;
     font-size: 0.875rem;
     line-height: 1.25rem;
-    color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+    color: var(--color-neutral-600);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
   }
 
   .Avatar {
@@ -193,14 +209,19 @@
     vertical-align: middle;
     user-select: none;
     font-weight: 700;
-    color: light-dark(var(--color-neutral-950), white);
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+    color: var(--color-neutral-950);
+    background-color: var(--color-neutral-200);
     font-size: 0.875rem;
     line-height: 1;
     white-space: nowrap;
     overflow: hidden;
     height: 3rem;
     width: 3rem;
+
+    @media (prefers-color-scheme: dark) {
+      color: white;
+      background-color: var(--color-neutral-800);
+    }
   }
 
   .AvatarImage {
@@ -220,11 +241,15 @@
     line-height: 1.25rem;
 
     a {
-      color: light-dark(var(--color-neutral-950), white);
+      color: var(--color-neutral-950);
       text-decoration: underline;
       text-decoration-thickness: 1px;
       text-underline-offset: 0.16em;
 
+      @media (prefers-color-scheme: dark) {
+        color: white;
+      }
+
       @media (hover: hover) {
         &:hover {
           text-decoration: none;
@@ -232,8 +257,12 @@
       }
 
       &:focus-visible {
-        outline: 2px solid light-dark(var(--color-neutral-950), white);
+        outline: 2px solid var(--color-neutral-950);
         outline-offset: 2px;
+
+        @media (prefers-color-scheme: dark) {
+          outline-color: white;
+        }
       }
     }
   }
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
index 87d6213002b..991247e1b4a 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
@@ -13,9 +13,9 @@
 
 .Popup {
   position: relative;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
 
@@ -28,15 +28,18 @@
   transition-timing-function: var(--easing);
   transition-duration: var(--animation-duration);
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     transform: scale(0.98);
   }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .Arrow {
@@ -74,9 +77,14 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    border: 1px solid light-dark(var(--color-neutral-950), white);
-    background-color: light-dark(white, var(--color-neutral-950));
+    border: 1px solid var(--color-neutral-950);
+    background-color: white;
     transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      border: 1px solid white;
+      background-color: var(--color-neutral-950);
+    }
   }
 }
 
@@ -147,35 +155,52 @@
   margin: 0;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   text-wrap: balance;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Link {
   outline: 0;
-  color: light-dark(var(--color-blue-800), var(--color-blue-500));
+  color: var(--color-blue-800);
   text-decoration-line: underline;
   text-decoration-thickness: 1px;
-  text-decoration-color: color-mix(
-    in oklab,
-    light-dark(var(--color-blue-800), var(--color-blue-500)),
-    transparent 40%
-  );
+  text-decoration-color: color-mix(in oklab, var(--color-blue-800), transparent 40%);
   text-underline-offset: 2px;
 
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-blue-500);
+    text-decoration-color: color-mix(in oklab, var(--color-blue-500), transparent 40%);
+  }
+
   @media (hover: hover) {
     &:hover {
-      text-decoration-color: light-dark(var(--color-blue-800), var(--color-blue-500));
+      text-decoration-color: var(--color-blue-800);
+
+      @media (prefers-color-scheme: dark) {
+        text-decoration-color: var(--color-blue-500);
+      }
     }
   }
 
   &[data-popup-open] {
-    text-decoration-color: light-dark(var(--color-blue-800), var(--color-blue-500));
+    text-decoration-color: var(--color-blue-800);
+
+    @media (prefers-color-scheme: dark) {
+      text-decoration-color: var(--color-blue-500);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
     text-decoration-line: none;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
index ec2ae750b40..e5cf9d4c4af 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
@@ -9,24 +9,27 @@
   position: relative;
   width: var(--popup-width, auto);
   height: var(--popup-height, auto);
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
     opacity 100ms ease-out;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     transform: scale(0.98);
   }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .Arrow {
@@ -64,9 +67,14 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    border: 1px solid light-dark(var(--color-neutral-950), white);
-    background-color: light-dark(white, var(--color-neutral-950));
+    border: 1px solid var(--color-neutral-950);
+    background-color: white;
     transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      border: 1px solid white;
+      background-color: var(--color-neutral-950);
+    }
   }
 }
 
@@ -103,36 +111,53 @@
   margin: 0;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   text-wrap: balance;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Link {
   outline: 0;
-  color: light-dark(var(--color-blue-800), var(--color-blue-500));
+  color: var(--color-blue-800);
   text-decoration-line: underline;
   text-decoration-thickness: 1px;
-  text-decoration-color: color-mix(
-    in oklab,
-    light-dark(var(--color-blue-800), var(--color-blue-500)),
-    transparent 40%
-  );
+  text-decoration-color: color-mix(in oklab, var(--color-blue-800), transparent 40%);
   text-underline-offset: 2px;
 
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-blue-500);
+    text-decoration-color: color-mix(in oklab, var(--color-blue-500), transparent 40%);
+  }
+
   @media (hover: hover) {
     &:hover {
-      text-decoration-color: light-dark(var(--color-blue-800), var(--color-blue-500));
+      text-decoration-color: var(--color-blue-800);
+
+      @media (prefers-color-scheme: dark) {
+        text-decoration-color: var(--color-blue-500);
+      }
     }
   }
 
   &[data-popup-open] {
-    text-decoration-color: light-dark(var(--color-blue-800), var(--color-blue-500));
+    text-decoration-color: var(--color-blue-800);
+
+    @media (prefers-color-scheme: dark) {
+      text-decoration-color: var(--color-blue-500);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
     text-decoration-line: none;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -152,28 +177,46 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css
index d989acd5009..08af7e04cdf 100644
--- a/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css
@@ -10,24 +10,40 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Value {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   text-align: right;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Track {
   grid-column: 1 / 3;
   overflow: hidden;
   height: 0.25rem;
-  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  background-color: var(--color-neutral-200);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-800);
+  }
 }
 
 .Indicator {
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
   transition: width 500ms;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
index ad4b8128aad..0d972bb009c 100644
--- a/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
@@ -3,7 +3,11 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Caption {
@@ -29,21 +33,36 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 100%;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
+  color: white;
   padding: 0;
   margin: 0;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: var(--color-neutral-950);
+  }
+
   &[data-checked] {
-    background-color: light-dark(var(--color-neutral-950), white);
-    color: light-dark(white, var(--color-neutral-950));
+    background-color: var(--color-neutral-950);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: var(--color-neutral-950);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
index f57b3c88a69..4a3fb2383b2 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
@@ -8,11 +8,19 @@
 .Viewport {
   box-sizing: border-box;
   height: 100%;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+  }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -31,24 +39,33 @@
 }
 
 .Item {
-  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  background-color: var(--color-neutral-200);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.875rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-800);
+    color: var(--color-neutral-400);
+  }
 }
 
 .Scrollbar {
   display: flex;
   position: relative;
-  background-color: light-dark(rgb(0 0 0 / 12%), rgb(255 255 255 / 12%));
+  background-color: rgb(0 0 0 / 12%);
   margin: 1px;
   opacity: 0;
   transition: opacity 150ms;
   pointer-events: none;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: rgb(255 255 255 / 12%);
+  }
+
   &[data-scrolling] {
     transition-duration: 0ms;
   }
@@ -70,5 +87,9 @@
 
 .Thumb {
   width: 100%;
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
index b4a7531d517..10a2a4c8d64 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
@@ -3,17 +3,29 @@
   width: 24rem;
   height: 8.5rem;
   max-width: calc(100vw - 8rem);
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+  }
 }
 
 .Viewport {
   box-sizing: border-box;
   height: 100%;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+  }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -30,19 +42,27 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.375rem;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Scrollbar {
   display: flex;
   justify-content: center;
-  background-color: light-dark(rgb(0 0 0 / 12%), rgb(255 255 255 / 12%));
+  background-color: rgb(0 0 0 / 12%);
   width: 0.5rem;
   margin: 1px;
   opacity: 0;
   transition: opacity 150ms;
   pointer-events: none;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: rgb(255 255 255 / 12%);
+  }
+
   &[data-scrolling] {
     transition-duration: 0ms;
   }
@@ -56,5 +76,9 @@
 
 .Thumb {
   width: 100%;
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
index 38d1993155d..feb5defd096 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
@@ -3,13 +3,17 @@
   width: 24rem;
   height: 12rem;
   max-width: calc(100vw - 8rem);
-  background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+  background-color: var(--color-neutral-100);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-800);
+  }
 }
 
 .Viewport {
   --fade-size: 40px;
   height: 100%;
-  background: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+  background: var(--color-neutral-100);
   mask-image: linear-gradient(
     to bottom,
     transparent 0,
@@ -19,9 +23,17 @@
   );
   mask-repeat: no-repeat;
 
+  @media (prefers-color-scheme: dark) {
+    background: var(--color-neutral-800);
+  }
+
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -38,19 +50,27 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.375rem;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Scrollbar {
   display: flex;
   justify-content: center;
-  background-color: light-dark(rgb(0 0 0 / 8%), rgb(255 255 255 / 12%));
+  background-color: rgb(0 0 0 / 8%);
   width: 0.5rem;
   margin: 1px;
   opacity: 0;
   transition: opacity 150ms;
   pointer-events: none;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: rgb(255 255 255 / 12%);
+  }
+
   &[data-scrolling] {
     transition-duration: 0ms;
   }
@@ -64,5 +84,9 @@
 
 .Thumb {
   width: 100%;
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index 8a580a584a3..98f13f6637b 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -9,12 +9,20 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   cursor: default;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Value[data-placeholder] {
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Select {
@@ -28,39 +36,66 @@
   padding-right: 0.5rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1;
   white-space: nowrap;
   font-weight: 400;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
   min-width: 11rem;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -82,10 +117,10 @@
 .Popup {
   box-sizing: border-box;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   background-clip: padding-box;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
@@ -94,6 +129,9 @@
     opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
@@ -134,7 +172,11 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   user-select: none;
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Item {
@@ -157,8 +199,13 @@
   }
 
   &[data-highlighted] {
-    background-color: light-dark(var(--color-neutral-950), white);
-    color: light-dark(white, var(--color-neutral-950));
+    background-color: var(--color-neutral-950);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: var(--color-neutral-950);
+    }
   }
 }
 
@@ -180,12 +227,16 @@
   height: 1px;
   margin-block: 0.25rem;
   margin-inline: 1rem;
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
 
 .ScrollArrow {
   width: 100%;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   z-index: 2;
   text-align: center;
   cursor: default;
@@ -195,6 +246,10 @@
   align-items: center;
   justify-content: center;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+  }
+
   &::before {
     content: '';
     position: absolute;
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
index 697d678b32b..70219a2c758 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
@@ -9,12 +9,20 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   cursor: default;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Value[data-placeholder] {
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Select {
@@ -28,39 +36,66 @@
   padding-right: 0.5rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1;
   white-space: nowrap;
   font-weight: 400;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
   min-width: 10rem;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -82,10 +117,10 @@
 .Popup {
   box-sizing: border-box;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   background-clip: padding-box;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
@@ -94,6 +129,9 @@
     opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
@@ -140,8 +178,13 @@
   }
 
   &[data-highlighted] {
-    background-color: light-dark(var(--color-neutral-950), white);
-    color: light-dark(white, var(--color-neutral-950));
+    background-color: var(--color-neutral-950);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: var(--color-neutral-950);
+    }
   }
 }
 
@@ -161,7 +204,7 @@
 
 .ScrollArrow {
   width: 100%;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   z-index: 1;
   text-align: center;
   cursor: default;
@@ -171,6 +214,10 @@
   align-items: center;
   justify-content: center;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+  }
+
   &::before {
     content: '';
     position: absolute;
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
index 0c6e6eec134..2fa726e64b8 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
@@ -9,12 +9,20 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   cursor: default;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Value[data-placeholder] {
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Select {
@@ -28,39 +36,66 @@
   padding-right: 0.5rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1;
   white-space: nowrap;
   font-weight: 400;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
   min-width: 14rem;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -82,10 +117,10 @@
   box-sizing: border-box;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   background-clip: padding-box;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
@@ -96,6 +131,9 @@
   max-height: var(--available-height);
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
@@ -131,8 +169,13 @@
 
   @media (hover: hover) {
     &[data-highlighted] {
-      background-color: light-dark(var(--color-neutral-950), white);
-      color: light-dark(white, var(--color-neutral-950));
+      background-color: var(--color-neutral-950);
+      color: white;
+
+      @media (prefers-color-scheme: dark) {
+        background-color: white;
+        color: var(--color-neutral-950);
+      }
     }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
index 41b9d1a9991..fa5bae4aac7 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
@@ -9,8 +9,12 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   cursor: default;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Select {
@@ -25,39 +29,66 @@
   padding-right: 0.5rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1;
   white-space: nowrap;
   font-weight: 400;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
   min-width: 16rem;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -76,7 +107,11 @@
 .ValueSecondary {
   font-size: 0.75rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .SelectIcon {
@@ -99,10 +134,10 @@
 .Popup {
   box-sizing: border-box;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   background-clip: padding-box;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
@@ -111,6 +146,9 @@
     opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
@@ -158,11 +196,20 @@
 
   @media (hover: hover) {
     &[data-highlighted] {
-      background-color: light-dark(var(--color-neutral-950), white);
-      color: light-dark(white, var(--color-neutral-950));
+      background-color: var(--color-neutral-950);
+      color: white;
+
+      @media (prefers-color-scheme: dark) {
+        background-color: white;
+        color: var(--color-neutral-950);
+      }
 
       .ItemDescription {
-        color: light-dark(var(--color-neutral-400), var(--color-neutral-600));
+        color: var(--color-neutral-400);
+
+        @media (prefers-color-scheme: dark) {
+          color: var(--color-neutral-600);
+        }
       }
     }
   }
@@ -199,12 +246,16 @@
 .ItemDescription {
   font-size: 0.75rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  color: var(--color-neutral-600);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .ScrollArrow {
   width: 100%;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   z-index: 1;
   text-align: center;
   cursor: default;
@@ -214,6 +265,10 @@
   align-items: center;
   justify-content: center;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+  }
+
   &::before {
     content: '';
     position: absolute;
diff --git a/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css
index 7c30f3d9cbc..8601558e946 100644
--- a/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css
@@ -6,18 +6,27 @@
 
 .Separator {
   width: 1px;
-  background-color: light-dark(var(--color-neutral-300), var(--color-neutral-700));
+  background-color: var(--color-neutral-300);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-700);
+  }
 }
 
 .Link {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-950), white);
-  text-decoration-color: light-dark(var(--color-neutral-300), var(--color-neutral-700));
+  color: var(--color-neutral-950);
+  text-decoration-color: var(--color-neutral-300);
   text-decoration-thickness: 1px;
   text-decoration-line: none;
   text-underline-offset: 2px;
 
+  @media (prefers-color-scheme: dark) {
+    color: white;
+    text-decoration-color: var(--color-neutral-700);
+  }
+
   @media (hover: hover) {
     &:hover {
       text-decoration-line: underline;
@@ -25,8 +34,12 @@
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: 2px;
     text-decoration-line: none;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css
index 4c173969a4f..01cd7b95299 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css
@@ -11,25 +11,42 @@
 .Track {
   width: 100%;
   height: 0.25rem;
-  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  background-color: var(--color-neutral-200);
   user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-800);
+  }
 }
 
 .Indicator {
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
   user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
 
 .Thumb {
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+  }
+
   &:has(:focus-visible) {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css
index 4c173969a4f..01cd7b95299 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css
@@ -11,25 +11,42 @@
 .Track {
   width: 100%;
   height: 0.25rem;
-  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  background-color: var(--color-neutral-200);
   user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-800);
+  }
 }
 
 .Indicator {
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
   user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
 
 .Thumb {
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+  }
+
   &:has(:focus-visible) {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css
index 4c173969a4f..01cd7b95299 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css
@@ -11,25 +11,42 @@
 .Track {
   width: 100%;
   height: 0.25rem;
-  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  background-color: var(--color-neutral-200);
   user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-800);
+  }
 }
 
 .Indicator {
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
   user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
 
 .Thumb {
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+  }
+
   &:has(:focus-visible) {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css
index 91386b8f60a..7ce185d20db 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css
@@ -11,9 +11,13 @@
 }
 
 .Track {
-  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  background-color: var(--color-neutral-200);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-800);
+  }
+
   &[data-orientation='vertical'] {
     height: 100%;
     width: 0.25rem;
@@ -21,20 +25,33 @@
 }
 
 .Indicator {
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
   user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
 
 .Thumb {
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+  }
+
   &:has(:focus-visible) {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
index a316b7a5371..45d9008f6b5 100644
--- a/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
@@ -5,37 +5,62 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Switch {
   box-sizing: border-box;
   display: flex;
   flex-shrink: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   padding: 0.125rem;
   width: 2.25rem;
   height: 1.25rem;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+  }
 
   &[data-checked] {
-    background-color: light-dark(var(--color-neutral-950), white);
+    background-color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
 .Thumb {
   width: 0.875rem;
   height: 0.875rem;
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
   transition: translate 150ms ease;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
+
   &[data-checked] {
     translate: 1rem 0;
-    background-color: light-dark(white, var(--color-neutral-950));
+    background-color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-950);
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
index 579ff4f40b6..a1acab174c5 100644
--- a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
@@ -21,7 +21,7 @@
   margin: 0;
   outline: 0;
   background: none;
-  color: light-dark(var(--color-neutral-600), var(--color-neutral-300));
+  color: var(--color-neutral-600);
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -33,19 +33,35 @@
   padding-block: 0;
   height: calc(2rem + 1px);
 
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-300);
+  }
+
   @media (hover: hover) {
     &:hover {
-      color: light-dark(var(--color-neutral-950), white);
+      color: var(--color-neutral-950);
+
+      @media (prefers-color-scheme: dark) {
+        color: white;
+      }
     }
   }
 
   &[data-active] {
-    color: light-dark(var(--color-neutral-950), white);
+    color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      color: white;
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -61,9 +77,15 @@
   transition-property: translate, width;
   transition-duration: 150ms;
   transition-timing-function: ease-in-out;
-  border-top: 1px solid light-dark(var(--color-neutral-950), white);
-  border-inline: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border-top: 1px solid var(--color-neutral-950);
+  border-inline: 1px solid var(--color-neutral-950);
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    border-top: 1px solid white;
+    border-inline: 1px solid white;
+    background-color: var(--color-neutral-950);
+  }
 }
 
 .PanelViewport {
@@ -72,8 +94,13 @@
   grid-template-columns: minmax(0, 1fr);
   width: 100%;
   min-height: 8rem;
-  border-inline: 1px solid light-dark(var(--color-neutral-950), white);
-  border-block: 1px solid light-dark(var(--color-neutral-950), white);
+  border-inline: 1px solid var(--color-neutral-950);
+  border-block: 1px solid var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    border-inline: 1px solid white;
+    border-block: 1px solid white;
+  }
 }
 
 .Panel {
@@ -89,13 +116,22 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   text-align: center;
-  color: light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  color: var(--color-neutral-950);
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+    background-color: var(--color-neutral-950);
+  }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
     z-index: 1;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 
   &[hidden] {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
index 53e61a3c5b3..46806459303 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
@@ -14,28 +14,35 @@
   flex-direction: column;
   width: max-content;
   padding: 0.25rem 0.5rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
     opacity 100ms ease-out;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     transform: scale(0.98);
   }
 
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
-
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -71,9 +78,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   padding: 0.75rem;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
@@ -98,6 +105,9 @@
     scale(var(--scale));
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
@@ -187,34 +197,57 @@
   gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -225,15 +258,22 @@
   display: flex;
   flex-direction: column;
   padding: 0.25rem 0.5rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
     opacity 100ms ease-out;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -243,10 +283,6 @@
   &[data-instant] {
     transition-duration: 0ms;
   }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .Arrow {
@@ -284,9 +320,14 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    border: 1px solid light-dark(var(--color-neutral-950), white);
-    background-color: light-dark(white, var(--color-neutral-950));
+    border: 1px solid var(--color-neutral-950);
+    background-color: white;
     transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      border: 1px solid white;
+      background-color: var(--color-neutral-950);
+    }
   }
 }
 
@@ -305,30 +346,48 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -346,25 +405,43 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-family: inherit;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
index 34b60eb54b0..798309b3375 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
@@ -30,9 +30,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   padding: 0.75rem;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
@@ -57,6 +57,9 @@
     scale(var(--scale));
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
@@ -146,34 +149,57 @@
   gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -186,29 +212,47 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
index da656d9f068..87cfa6539ef 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
@@ -30,9 +30,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   padding: 0.75rem;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
@@ -57,6 +57,9 @@
     scale(var(--scale));
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
@@ -158,34 +161,57 @@
   gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -198,30 +224,48 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
index 34b60eb54b0..798309b3375 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
@@ -30,9 +30,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   padding: 0.75rem;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
@@ -57,6 +57,9 @@
     scale(var(--scale));
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
@@ -146,34 +149,57 @@
   gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -186,29 +212,47 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
index e393a123a7c..8397ee693cc 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
@@ -23,9 +23,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   padding: 0.75rem;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: top center;
@@ -52,6 +52,9 @@
     scale(var(--scale));
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
@@ -141,34 +144,57 @@
   gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -181,29 +207,47 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
index 96f1b6a391b..2e435877cdb 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
@@ -30,9 +30,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   padding: 0.75rem;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
@@ -57,6 +57,9 @@
     scale(var(--scale));
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
@@ -101,11 +104,19 @@
   }
 
   &[data-type='success'] .Text {
-    color: light-dark(var(--color-green-700), var(--color-green-400));
+    color: var(--color-green-700);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-green-400);
+    }
   }
 
   &[data-type='error'] .Text {
-    color: light-dark(var(--color-red-700), var(--color-red-400));
+    color: var(--color-red-700);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-red-400);
+    }
   }
 }
 
@@ -154,34 +165,57 @@
   gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -194,29 +228,47 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
index 091648e8227..5124ba9b3c8 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
@@ -30,9 +30,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   padding: 0.75rem;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
@@ -57,6 +57,9 @@
     scale(var(--scale));
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
@@ -152,34 +155,57 @@
   gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -192,29 +218,47 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
index e87fc822295..4f948f2e289 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
@@ -30,9 +30,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   padding: 0.75rem;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
@@ -57,6 +57,9 @@
     scale(var(--scale));
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
@@ -146,34 +149,57 @@
   gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  background-color: white;
+  color: var(--color-neutral-950);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -186,29 +212,47 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
index b610a1fb093..d89019d426e 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
@@ -2,7 +2,11 @@
   display: flex;
   gap: 1px;
   padding: 1px;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+  }
 }
 
 .Button {
@@ -17,34 +21,60 @@
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled], [data-pressed]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-pressed] {
-    background-color: light-dark(var(--color-neutral-950), white);
-    color: light-dark(white, var(--color-neutral-950));
+    background-color: var(--color-neutral-950);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: var(--color-neutral-950);
+    }
   }
 
   @media (hover: hover) {
     &[data-pressed]:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-950), white);
-      color: light-dark(white, var(--color-neutral-950));
+      background-color: var(--color-neutral-950);
+      color: white;
+
+      @media (prefers-color-scheme: dark) {
+        background-color: white;
+        color: var(--color-neutral-950);
+      }
     }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
index b610a1fb093..d89019d426e 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
@@ -2,7 +2,11 @@
   display: flex;
   gap: 1px;
   padding: 1px;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+  }
 }
 
 .Button {
@@ -17,34 +21,60 @@
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled], [data-pressed]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-pressed] {
-    background-color: light-dark(var(--color-neutral-950), white);
-    color: light-dark(white, var(--color-neutral-950));
+    background-color: var(--color-neutral-950);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: var(--color-neutral-950);
+    }
   }
 
   @media (hover: hover) {
     &[data-pressed]:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-950), white);
-      color: light-dark(white, var(--color-neutral-950));
+      background-color: var(--color-neutral-950);
+      color: white;
+
+      @media (prefers-color-scheme: dark) {
+        background-color: white;
+        color: var(--color-neutral-950);
+      }
     }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
index e1c84008872..69499d3459c 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
@@ -10,26 +10,46 @@
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-pressed] {
-    color: light-dark(var(--color-neutral-950), white);
+    color: var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      color: white;
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
index 58542c2f5b7..0dd1da97e24 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
@@ -3,10 +3,15 @@
   display: flex;
   align-items: center;
   gap: 1px;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   padding: 1px;
   width: 37.5rem;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+  }
 }
 
 .Group {
@@ -25,7 +30,7 @@
   margin: 0;
   border: 0;
   background-color: transparent;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
   font-family: inherit;
   font-size: 0.875rem;
@@ -33,30 +38,56 @@
   line-height: 1;
   white-space: nowrap;
 
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled], [data-pressed]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-pressed] {
-    background-color: light-dark(var(--color-neutral-950), white);
-    color: light-dark(white, var(--color-neutral-950));
+    background-color: var(--color-neutral-950);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: var(--color-neutral-950);
+    }
   }
 
   @media (hover: hover) {
     &[data-pressed]:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-950), white);
-      color: light-dark(white, var(--color-neutral-950));
+      background-color: var(--color-neutral-950);
+      color: white;
+
+      @media (prefers-color-scheme: dark) {
+        background-color: white;
+        color: var(--color-neutral-950);
+      }
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &[aria-pressed] {
@@ -71,8 +102,12 @@
 
   &:focus-visible {
     background-color: transparent;
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -80,11 +115,15 @@
   width: 1px;
   height: 16px;
   margin: 0.25rem;
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
 
 .Link {
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -93,15 +132,27 @@
   flex: 0 0 auto;
   margin-inline: auto 0.875rem;
 
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
+
   @media (hover: hover) {
     &:hover {
-      color: light-dark(var(--color-blue-700), var(--color-blue-500));
+      color: var(--color-blue-700);
+
+      @media (prefers-color-scheme: dark) {
+        color: var(--color-blue-500);
+      }
     }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -123,10 +174,10 @@
 .Popup {
   box-sizing: border-box;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   background-clip: padding-box;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
@@ -136,6 +187,13 @@
   overflow-y: auto;
   max-height: var(--available-height);
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -148,10 +206,6 @@
     opacity: 1;
     min-width: calc(var(--anchor-width) + 1rem);
   }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .Item {
@@ -178,8 +232,13 @@
   }
 
   &[data-highlighted] {
-    background-color: light-dark(var(--color-neutral-950), white);
-    color: light-dark(white, var(--color-neutral-950));
+    background-color: var(--color-neutral-950);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: var(--color-neutral-950);
+    }
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
index 48c0080de14..53d0d5e3503 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
@@ -15,23 +15,41 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:not(:first-child) {
@@ -39,13 +57,22 @@
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -76,9 +103,9 @@
   width: var(--popup-width, auto);
   max-width: 500px;
   transform-origin: var(--transform-origin);
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   font-size: 0.875rem;
@@ -89,6 +116,13 @@
     opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
     transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -98,10 +132,6 @@
   &[data-instant] {
     transition: none;
   }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .Arrow {
@@ -145,9 +175,14 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-neutral-950));
-    border: 1px solid light-dark(var(--color-neutral-950), white);
+    background-color: white;
+    border: 1px solid var(--color-neutral-950);
     transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-950);
+      border: 1px solid white;
+    }
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
index 96500952890..36682261ab0 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
@@ -1,7 +1,12 @@
 .Panel {
   display: flex;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+  }
 }
 
 .Button {
@@ -15,27 +20,47 @@
   margin: 0;
   border: 0;
   background-color: transparent;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
     background-color: transparent;
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -52,15 +77,22 @@
   flex-direction: column;
   padding: 0.25rem 0.5rem;
   position: relative;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
     opacity 100ms ease-out;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -70,10 +102,6 @@
   &[data-instant] {
     transition: none;
   }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .Arrow {
@@ -112,8 +140,13 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-neutral-950));
-    border: 1px solid light-dark(var(--color-neutral-950), white);
+    background-color: white;
+    border: 1px solid var(--color-neutral-950);
     transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-950);
+      border: 1px solid white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
index 9226f843ec6..de1040c8427 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
@@ -18,23 +18,41 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:not(:first-child) {
@@ -42,13 +60,22 @@
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -69,15 +96,22 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   padding: 0.25rem 0.5rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
     transform 100ms ease-out,
     opacity 100ms ease-out;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+    box-shadow: none;
+  }
+
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
@@ -87,10 +121,6 @@
   &[data-instant] {
     transition: none;
   }
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: none;
-  }
 }
 
 .Arrow {
@@ -129,9 +159,14 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    background-color: light-dark(white, var(--color-neutral-950));
-    border: 1px solid light-dark(var(--color-neutral-950), white);
+    background-color: white;
+    border: 1px solid var(--color-neutral-950);
     transform: translate(-50%, 50%) rotate(45deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-950);
+      border: 1px solid white;
+    }
   }
 }
 
@@ -144,33 +179,56 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-disabled] {
-    color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-    border-color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+    color: var(--color-neutral-500);
+    border-color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+      border-color: var(--color-neutral-400);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css
index 2a10772d60f..00733750b8a 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css
@@ -7,32 +7,54 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -45,9 +67,9 @@
 .Popup {
   box-sizing: border-box;
   padding: 0.75rem 1rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   font-size: 0.875rem;
   line-height: 1.25rem;
   transform-origin: var(--transform-origin);
@@ -58,6 +80,9 @@
   max-width: 500px;
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 }
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css
index 2a10772d60f..00733750b8a 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css
@@ -7,32 +7,54 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -45,9 +67,9 @@
 .Popup {
   box-sizing: border-box;
   padding: 0.75rem 1rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
-  color: light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
+  color: var(--color-neutral-950);
   font-size: 0.875rem;
   line-height: 1.25rem;
   transform-origin: var(--transform-origin);
@@ -58,6 +80,9 @@
   max-width: 500px;
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 }
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
index 7189e94556a..2cb48e22700 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
@@ -9,33 +9,55 @@
   padding-right: 0.5rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
   min-width: 9rem;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &[data-popup-open] {
-    background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    background-color: var(--color-neutral-100);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-800);
+    }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -49,7 +71,11 @@
 }
 
 .Value[data-placeholder] {
-  color: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  color: var(--color-neutral-500);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--color-neutral-400);
+  }
 }
 
 .Positioner {
@@ -61,15 +87,18 @@
 .Popup {
   box-sizing: border-box;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   background-clip: padding-box;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
     box-shadow: none;
   }
 
@@ -112,15 +141,27 @@
 }
 
 .ArrowFill {
-  fill: light-dark(white, var(--color-neutral-950));
+  fill: white;
+
+  @media (prefers-color-scheme: dark) {
+    fill: var(--color-neutral-950);
+  }
 }
 
 .ArrowOuterStroke {
-  fill: light-dark(var(--color-neutral-950), white);
+  fill: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    fill: white;
+  }
 }
 
 .ArrowInnerStroke {
-  fill: light-dark(white, var(--color-neutral-950));
+  fill: white;
+
+  @media (prefers-color-scheme: dark) {
+    fill: var(--color-neutral-950);
+  }
 }
 
 .Item {
@@ -143,8 +184,13 @@
   }
 
   &[data-highlighted] {
-    background-color: light-dark(var(--color-neutral-950), white);
-    color: light-dark(white, var(--color-neutral-950));
+    background-color: var(--color-neutral-950);
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+      color: var(--color-neutral-950);
+    }
   }
 }
 
@@ -164,7 +210,7 @@
 
 .ScrollArrow {
   width: 100%;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   z-index: 1;
   text-align: center;
   cursor: default;
@@ -174,6 +220,10 @@
   align-items: center;
   justify-content: center;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-950);
+  }
+
   &::before {
     content: '';
     position: absolute;
diff --git a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css
index 4c173969a4f..01cd7b95299 100644
--- a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css
@@ -11,25 +11,42 @@
 .Track {
   width: 100%;
   height: 0.25rem;
-  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  background-color: var(--color-neutral-200);
   user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-800);
+  }
 }
 
 .Indicator {
-  background-color: light-dark(var(--color-neutral-950), white);
+  background-color: var(--color-neutral-950);
   user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
 }
 
 .Thumb {
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
-  background-color: light-dark(white, var(--color-neutral-950));
+  border: 1px solid var(--color-neutral-950);
+  background-color: white;
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+  }
+
   &:has(:focus-visible) {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
index 55f064a52a8..68740561120 100644
--- a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
@@ -13,7 +13,11 @@
 .Label {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .Toggle {
@@ -28,18 +32,30 @@
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -57,22 +73,35 @@
   padding: 0 0.75rem;
   margin: 0;
   border: none;
-  background-color: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  background-color: var(--color-neutral-200);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--color-neutral-800);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-300), var(--color-neutral-700));
+      background-color: var(--color-neutral-300);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-700);
+      }
     }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
diff --git a/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
index 10dc2ac5338..19b7a0116a8 100644
--- a/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
@@ -8,29 +8,47 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid light-dark(var(--color-neutral-950), white);
+  border: 1px solid var(--color-neutral-950);
   border-radius: 0;
-  background-color: light-dark(white, var(--color-neutral-950));
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
   user-select: none;
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
+    color: white;
+  }
+
   @media (hover: hover) {
     &:hover {
-      background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+      background-color: var(--color-neutral-100);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-800);
+      }
     }
   }
 
   &:active {
-    background-color: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
   }
 
   &:focus-visible {
-    outline: 2px solid light-dark(var(--color-neutral-950), white);
+    outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
diff --git a/docs/src/app/(docs)/react/utils/use-render/demos/render/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/use-render/demos/render/css-modules/index.module.css
index a1a576a446f..f450121bfad 100644
--- a/docs/src/app/(docs)/react/utils/use-render/demos/render/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/use-render/demos/render/css-modules/index.module.css
@@ -1,7 +1,11 @@
 .Text {
   font-size: 0.875rem;
   line-height: 1rem;
-  color: light-dark(var(--color-neutral-950), white);
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 
   strong& {
     font-weight: 700;

From b1ddd7927fda74a94258fb60d6c4bad8ae40d735 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 12 May 2026 14:02:34 +0200
Subject: [PATCH 174/257] Toolbar: fix focus state

---
 .../toolbar/demos/hero/css-modules/index.module.css    | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
index 0dd1da97e24..10984f6972b 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
@@ -60,6 +60,10 @@
     }
   }
 
+  &[aria-pressed] {
+    padding: 0 0.75rem;
+  }
+
   &[data-pressed] {
     background-color: var(--color-neutral-950);
     color: white;
@@ -90,10 +94,6 @@
     }
   }
 
-  &[aria-pressed] {
-    padding: 0 0.75rem;
-  }
-
   &[role='combobox'] {
     min-width: 8rem;
     justify-content: space-between;
@@ -101,7 +101,6 @@
   }
 
   &:focus-visible {
-    background-color: transparent;
     outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
 
@@ -148,7 +147,6 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;

From 92d3604ddc48d1cfe2286779e042fc4e3b169bf8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 12 May 2026 15:12:46 +0200
Subject: [PATCH 175/257] Combobox / Autocomplete: placeholder styles

---
 .../demos/async/css-modules/index.module.css     |  8 ++++++++
 .../autocomplete/demos/async/tailwind/index.tsx  |  2 +-
 .../auto-highlight/css-modules/index.module.css  |  8 ++++++++
 .../demos/auto-highlight/tailwind/index.tsx      |  2 +-
 .../fuzzy-matching/css-modules/index.module.css  |  8 ++++++++
 .../demos/fuzzy-matching/tailwind/index.tsx      |  2 +-
 .../demos/grid/css-modules/index.module.css      | 16 ++++++++++++++++
 .../autocomplete/demos/grid/tailwind/index.tsx   |  4 ++--
 .../demos/grouped/css-modules/index.module.css   |  8 ++++++++
 .../demos/grouped/tailwind/index.tsx             |  2 +-
 .../demos/hero/css-modules/index.module.css      |  8 ++++++++
 .../autocomplete/demos/hero/tailwind/index.tsx   |  2 +-
 .../demos/inline/css-modules/index.module.css    |  8 ++++++++
 .../autocomplete/demos/inline/tailwind/index.tsx |  2 +-
 .../demos/limit/css-modules/index.module.css     |  8 ++++++++
 .../autocomplete/demos/limit/tailwind/index.tsx  |  2 +-
 .../async-multiple/css-modules/index.module.css  |  8 ++++++++
 .../demos/async-multiple/tailwind/index.tsx      |  2 +-
 .../async-single/css-modules/index.module.css    |  8 ++++++++
 .../demos/async-single/tailwind/index.tsx        |  2 +-
 .../demos/creatable/css-modules/index.module.css | 16 ++++++++++++++++
 .../combobox/demos/creatable/tailwind/index.tsx  |  4 ++--
 .../demos/grouped/css-modules/index.module.css   |  8 ++++++++
 .../combobox/demos/grouped/tailwind/index.tsx    |  2 +-
 .../demos/hero/css-modules/index.module.css      |  8 ++++++++
 .../combobox/demos/hero/tailwind/index.tsx       |  2 +-
 .../css-modules/index.module.css                 |  8 ++++++++
 .../demos/input-inside-popup/tailwind/index.tsx  |  2 +-
 .../demos/multiple/css-modules/index.module.css  |  8 ++++++++
 .../combobox/demos/multiple/tailwind/index.tsx   |  2 +-
 30 files changed, 153 insertions(+), 17 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
index 040feda5c21..a8dbf980cb6 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
@@ -25,6 +25,14 @@
     color: white;
   }
 
+  &::placeholder {
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
+  }
+
   &:focus {
     outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
index 08a9b3141f5..7a4d1add598 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
@@ -81,7 +81,7 @@ export default function ExampleAsyncAutocomplete() {
         Search movies by name or year
         <Autocomplete.Input
           placeholder="e.g. Pulp Fiction or 1994"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
index f64c2a022dd..5d324012680 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
@@ -25,6 +25,14 @@
     color: white;
   }
 
+  &::placeholder {
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
+  }
+
   &:focus {
     outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
index f9098f9cbd8..65f0323f65b 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleAutocompleteAutoHighlight() {
         Auto highlight on type
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
index 26fb208a955..4a23587b57d 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
@@ -39,6 +39,14 @@
     color: white;
   }
 
+  &::placeholder {
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
+  }
+
   &:focus {
     outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
index 2ad922fc2e0..0fa32641af3 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleFuzzyMatchingAutocomplete() {
         Fuzzy search documentation
         <Autocomplete.Input
           placeholder="e.g. React"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
index ff3a0cefa4d..9aee6360ff9 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
@@ -36,6 +36,14 @@
     background-color: var(--color-neutral-950);
   }
 
+  &::placeholder {
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
+  }
+
   &:focus {
     position: relative;
     outline: 2px solid var(--color-neutral-950);
@@ -196,6 +204,14 @@
     color: white;
   }
 
+  &::placeholder {
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
+  }
+
   &:focus {
     outline: 2px solid var(--color-neutral-950);
     outline-offset: -1px;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
index ea61cc93052..bd6f3c2781c 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
@@ -35,7 +35,7 @@ export default function ExampleEmojiPicker() {
         <input
           ref={textInputRef}
           type="text"
-          className="-mr-px h-8 border border-r-0 border-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none bg-white dark:bg-neutral-950 focus:relative focus:outline-2 focus:-outline-offset-2 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="-mr-px h-8 border border-r-0 border-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 bg-white dark:bg-neutral-950 focus:relative focus:outline-2 focus:-outline-offset-2 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
           placeholder="iMessage"
           value={textValue}
           onChange={(event) => setTextValue(event.target.value)}
@@ -69,7 +69,7 @@ export default function ExampleEmojiPicker() {
                 <div className="relative z-[2] h-[var(--input-container-height)] w-64 bg-white dark:bg-neutral-950">
                   <Autocomplete.Input
                     placeholder="Search emojis…"
-                    className="h-8 w-full border-0 bg-white px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:bg-neutral-950 dark:text-white"
+                    className="h-8 w-full border-0 bg-white px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:bg-neutral-950 dark:text-white"
                   />
                 </div>
                 <Autocomplete.Empty>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
index 9d9763d8dcd..cfdc1ff9de4 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
@@ -25,6 +25,14 @@
     color: white;
   }
 
+  &::placeholder {
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
+  }
+
   &:focus {
     outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
index c37ba539ead..a129194b498 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleGroupAutocomplete() {
         Select a tag
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
index 61f9c769c88..ea46e54314b 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
@@ -25,6 +25,14 @@
     color: white;
   }
 
+  &::placeholder {
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
+  }
+
   &:focus {
     outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
index 43a5ef87195..2132ce81781 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleAutocomplete() {
         Search tags
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:opacity-100 placeholder:text-neutral-500 placeholder:[-webkit-text-fill-color:var(--color-neutral-500)] dark:placeholder:text-neutral-400 dark:placeholder:[-webkit-text-fill-color:var(--color-neutral-400)] focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
index 6f1752d29c0..463ae96ab6f 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
@@ -31,6 +31,14 @@
     color: white;
   }
 
+  &::placeholder {
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
+  }
+
   &:focus {
     outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
index 2a04fe5c4b9..d6bdb008650 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleAutocompleteInline() {
         Search tags
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
index 73e26442e22..da42e79a5ee 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
@@ -25,6 +25,14 @@
     color: white;
   }
 
+  &::placeholder {
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
+  }
+
   &:focus {
     outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
index 2c70e5a1b39..b72f110dd6a 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
@@ -25,7 +25,7 @@ export default function ExampleAutocompleteLimit() {
         Limit results to 8
         <Autocomplete.Input
           placeholder="e.g. component"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
index 4edacf378df..7b75d848aa2 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
@@ -172,6 +172,14 @@
     color: white;
   }
 
+  &::placeholder {
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
+  }
+
   &:focus {
     outline: none;
   }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index 88a38878d53..81b52ff5a01 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -164,7 +164,7 @@ export default function ExampleAsyncMultipleCombobox() {
                   <Combobox.Input
                     id={id}
                     placeholder={value.length > 0 ? '' : 'e.g. Michael'}
-                    className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-white p-0 text-sm any-pointer-coarse:text-base dark:bg-neutral-950 font-normal text-neutral-950 outline-none dark:text-white"
+                    className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-white p-0 text-sm any-pointer-coarse:text-base dark:bg-neutral-950 font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 dark:text-white"
                   />
                 </React.Fragment>
               )}
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
index 4b1fe611c24..7372c5254ae 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
@@ -69,6 +69,14 @@
     color: white;
   }
 
+  &::placeholder {
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
+  }
+
   &:focus {
     outline: none;
   }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index 8607c935f25..3e28a08b8a3 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -117,7 +117,7 @@ export default function ExampleAsyncSingleCombobox() {
           <Combobox.Input
             id={id}
             placeholder="e.g. Michael"
-            className="h-full w-full border-0 bg-white pl-2 dark:bg-neutral-950 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none dark:text-white"
+            className="h-full w-full border-0 bg-white pl-2 dark:bg-neutral-950 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 dark:text-white"
           />
           <div className="absolute right-0 bottom-0 flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
             <Combobox.Clear
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
index f37bcc3f0a0..ee6c3ff5747 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
@@ -172,6 +172,14 @@
     color: white;
   }
 
+  &::placeholder {
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
+  }
+
   &:focus {
     outline: none;
   }
@@ -422,6 +430,14 @@
     color: white;
   }
 
+  &::placeholder {
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
index 4a4f2f9b29c..76cc0c7d378 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
@@ -152,7 +152,7 @@ export default function ExampleCreatableCombobox() {
                       ref={comboboxInputRef}
                       id={id}
                       placeholder={value.length > 0 ? '' : 'e.g. bug'}
-                      className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-white p-0 text-sm any-pointer-coarse:text-base dark:bg-neutral-950 font-normal text-neutral-950 outline-none dark:text-white"
+                      className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-white p-0 text-sm any-pointer-coarse:text-base dark:bg-neutral-950 font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 dark:text-white"
                       onKeyDown={handleInputKeyDown}
                     />
                   </React.Fragment>
@@ -216,7 +216,7 @@ export default function ExampleCreatableCombobox() {
             <form onSubmit={handleCreateSubmit}>
               <input
                 ref={createInputRef}
-                className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:text-white"
+                className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:text-white"
                 placeholder="Label name"
                 defaultValue={pendingQueryRef.current}
               />
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
index 39f3a37ac40..55d6221b906 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
@@ -51,6 +51,14 @@
     color: white;
   }
 
+  &::placeholder {
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
+  }
+
   &:focus {
     outline: none;
   }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index d79ff029c5b..32ae3c4e6ac 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleGroupedCombobox() {
           <Combobox.Input
             placeholder="e.g. Mango"
             id={id}
-            className="h-full w-full border-0 bg-white pl-2 dark:bg-neutral-950 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none dark:text-white"
+            className="h-full w-full border-0 bg-white pl-2 dark:bg-neutral-950 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 dark:text-white"
           />
           <div className="absolute right-0 bottom-0 flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
             <Combobox.Clear
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
index 3e604a07563..fa43581912e 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
@@ -50,6 +50,14 @@
     color: white;
   }
 
+  &::placeholder {
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
+  }
+
   &:focus {
     outline: none;
   }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
index 2680c4a1a31..57eb39ea480 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleCombobox() {
           <Combobox.Input
             placeholder="e.g. Apple"
             id={id}
-            className="h-full w-full border-0 bg-white pl-2 dark:bg-neutral-950 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none dark:text-white"
+            className="h-full w-full border-0 bg-white pl-2 dark:bg-neutral-950 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 dark:text-white"
           />
           <div className="absolute right-0 bottom-0 flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
             <Combobox.Clear
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
index 1e3ae9f6695..39ddfaedd40 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
@@ -126,6 +126,14 @@
     color: white;
   }
 
+  &::placeholder {
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
+  }
+
   &:focus {
     outline: 2px solid var(--color-neutral-950);
     outline-offset: -1px;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index e157f7bbffa..806dd3ade49 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -28,7 +28,7 @@ export default function ExamplePopoverCombobox() {
               <div className="h-[var(--input-container-height)] w-80 bg-white text-center dark:bg-neutral-950">
                 <Combobox.Input
                   placeholder="e.g. United Kingdom"
-                  className="h-8 w-full min-w-72 border-0 bg-white px-2 dark:bg-neutral-950 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:text-white"
+                  className="h-8 w-full min-w-72 border-0 bg-white px-2 dark:bg-neutral-950 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:text-white"
                 />
               </div>
               <Combobox.Empty>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
index 3fe8f3e780f..f6db10f1a35 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
@@ -185,6 +185,14 @@
     color: white;
   }
 
+  &::placeholder {
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
+  }
+
   &:focus {
     outline: none;
   }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
index f1b04ef9b56..97edd432c4d 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
@@ -37,7 +37,7 @@ export default function ExampleMultipleCombobox() {
                   <Combobox.Input
                     id={id}
                     placeholder={value.length > 0 ? '' : 'e.g. TypeScript'}
-                    className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-white p-0 text-sm any-pointer-coarse:text-base dark:bg-neutral-950 font-normal text-neutral-950 outline-none dark:text-white"
+                    className="h-[calc(1.5rem-2px)] min-w-12 flex-1 border-0 bg-white p-0 text-sm any-pointer-coarse:text-base dark:bg-neutral-950 font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 dark:text-white"
                   />
                 </React.Fragment>
               )}

From 57cdf3d04c8ddd58d2fbd0d629628d80672d8369 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 12 May 2026 15:20:14 +0200
Subject: [PATCH 176/257] Combobox: simplify placeholder

---
 .../css-modules/index.module.css              | 21 ++++++++++++-------
 .../input-inside-popup/css-modules/index.tsx  |  4 +---
 .../input-inside-popup/tailwind/index.tsx     | 10 +++------
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
index 39ddfaedd40..f191f1f5c79 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
@@ -68,10 +68,23 @@
       outline-color: white;
     }
   }
+
+  &[data-placeholder] {
+    color: var(--color-neutral-500);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-400);
+    }
+  }
 }
 
 .TriggerIcon {
   display: flex;
+  color: var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 
   & svg {
     width: 0.75rem;
@@ -79,14 +92,6 @@
   }
 }
 
-.Placeholder {
-  color: var(--color-neutral-600);
-
-  @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
-  }
-}
-
 .InputContainer {
   box-sizing: border-box;
   width: 20rem;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
index 97618b6c2eb..7f4215af356 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
@@ -9,9 +9,7 @@ export default function ExamplePopoverCombobox() {
       <Combobox.Root items={countries}>
         <Combobox.Label className={styles.Label}>Country</Combobox.Label>
         <Combobox.Trigger className={styles.Trigger}>
-          <Combobox.Value
-            placeholder={<span className={styles.Placeholder}>Select country</span>}
-          />
+          <Combobox.Value placeholder="Select country" />
           <Combobox.Icon className={styles.TriggerIcon}>
             <ChevronUpDownIcon />
           </Combobox.Icon>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index 806dd3ade49..d74bf07cc65 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -9,13 +9,9 @@ export default function ExamplePopoverCombobox() {
         <Combobox.Label className="cursor-default text-sm leading-5 font-bold text-neutral-950 dark:text-white">
           Country
         </Combobox.Label>
-        <Combobox.Trigger className="flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white pr-2 pl-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800">
-          <Combobox.Value
-            placeholder={
-              <span className="text-neutral-600 dark:text-neutral-400">Select country</span>
-            }
-          />
-          <Combobox.Icon className="flex">
+        <Combobox.Trigger className="flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white pr-2 pl-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 data-popup-open:bg-neutral-100 data-placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:data-placeholder:text-neutral-400 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800">
+          <Combobox.Value placeholder="Select country" />
+          <Combobox.Icon className="flex text-neutral-950 dark:text-white">
             <ChevronUpDownIcon className="size-3" />
           </Combobox.Icon>
         </Combobox.Trigger>

From 9ba6e5aa77814a71bf7bebd3ae4c12b65c4d5b4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 12 May 2026 15:43:16 +0200
Subject: [PATCH 177/257] PreviewCard: better focus ring for links

---
 .../demos/detached-triggers-controlled/tailwind/index.tsx   | 6 +++---
 .../detached-triggers-full/css-modules/index.module.css     | 1 -
 .../demos/detached-triggers-full/tailwind/index.tsx         | 6 +++---
 .../demos/detached-triggers-simple/tailwind/index.tsx       | 2 +-
 .../components/preview-card/demos/hero/tailwind/index.tsx   | 2 +-
 .../react/components/preview-card/demos/index.module.css    | 1 -
 6 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
index 0142ee74de4..29678233262 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -67,7 +67,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
         <p className="m-0 text-base text-neutral-950 text-balance dark:text-white">
           Discover{' '}
           <PreviewCard.Trigger
-            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
             handle={demoPreviewCard}
             href="https://en.wikipedia.org/wiki/Typography"
             id="trigger-1"
@@ -77,7 +77,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
           </PreviewCard.Trigger>
           ,{' '}
           <PreviewCard.Trigger
-            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
             handle={demoPreviewCard}
             href="https://en.wikipedia.org/wiki/Industrial_design"
             id="trigger-2"
@@ -87,7 +87,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
           </PreviewCard.Trigger>
           , or{' '}
           <PreviewCard.Trigger
-            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+            className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500 focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
             handle={demoPreviewCard}
             href="https://en.wikipedia.org/wiki/Art"
             id="trigger-3"
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
index 991247e1b4a..e19ca133659 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
@@ -196,7 +196,6 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
     text-decoration-line: none;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
index f55aa7e0116..06f4d4c649d 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/tailwind/index.tsx
@@ -58,7 +58,7 @@ export default function PreviewCardDetachedTriggersFullDemo() {
       <p className="m-0 text-base text-neutral-950 text-balance dark:text-white">
         Discover{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
           handle={demoPreviewCard}
           href="https://en.wikipedia.org/wiki/Typography"
           payload={cardContents.typography}
@@ -67,7 +67,7 @@ export default function PreviewCardDetachedTriggersFullDemo() {
         </PreviewCard.Trigger>
         ,{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
           handle={demoPreviewCard}
           href="https://en.wikipedia.org/wiki/Design"
           payload={cardContents.design}
@@ -76,7 +76,7 @@ export default function PreviewCardDetachedTriggersFullDemo() {
         </PreviewCard.Trigger>
         , or{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
           handle={demoPreviewCard}
           href="https://en.wikipedia.org/wiki/Art"
           payload={cardContents.art}
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
index 1c5096e5f8b..9404bdc631f 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-simple/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function PreviewCardDetachedTriggersSimpleDemo() {
       <p className="m-0 text-base text-neutral-950 text-balance dark:text-white">
         The principles of good{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
           handle={demoPreviewCard}
           href="https://en.wikipedia.org/wiki/Typography"
         >
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
index ce20325395c..161361c43ba 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExamplePreviewCard() {
       <p className="m-0 text-base text-neutral-950 text-balance dark:text-white">
         The principles of good{' '}
         <PreviewCard.Trigger
-          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
+          className="text-blue-800 underline decoration-blue-800/60 decoration-1 underline-offset-2 outline-0 hover:decoration-blue-800 data-popup-open:decoration-blue-800 focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-blue-500 dark:decoration-blue-500/60 dark:hover:decoration-blue-500 dark:data-popup-open:decoration-blue-500"
           href="https://en.wikipedia.org/wiki/Typography"
         >
           typography
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
index e5cf9d4c4af..c96efd3324c 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
@@ -152,7 +152,6 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
     text-decoration-line: none;
 
     @media (prefers-color-scheme: dark) {

From a69435431827d74dfd334e55170d941cc84c1d3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 12 May 2026 17:59:17 +0200
Subject: [PATCH 178/257] Select: make popup cover trigger

---
 .../select/demos/hero/css-modules/index.module.css          | 6 +-----
 .../react/components/select/demos/hero/tailwind/index.tsx   | 4 ++--
 .../select/demos/multiple/css-modules/index.module.css      | 2 +-
 .../components/select/demos/multiple/tailwind/index.tsx     | 2 +-
 .../select/demos/object-values/css-modules/index.module.css | 6 +-----
 .../select/demos/object-values/tailwind/index.tsx           | 4 ++--
 .../toolbar/demos/hero/css-modules/index.module.css         | 6 +-----
 .../react/components/toolbar/demos/hero/tailwind/index.tsx  | 6 +++---
 .../animated-select-motion/css-modules/index.module.css     | 6 +-----
 .../(docs)/react/handbook/forms/demos/components/select.tsx | 2 +-
 10 files changed, 14 insertions(+), 30 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
index 70219a2c758..fe1a5ee00c3 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
@@ -145,7 +145,7 @@
     transition: none;
     transform: translateY(1px);
     opacity: 1;
-    min-width: calc(var(--anchor-width) + 1rem);
+    min-width: calc(var(--anchor-width) + 1.5rem);
   }
 }
 
@@ -173,10 +173,6 @@
   cursor: default;
   user-select: none;
 
-  [data-side='none'] & {
-    padding-right: 3rem;
-  }
-
   &[data-highlighted] {
     background-color: var(--color-neutral-950);
     color: white;
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index 20f4c315156..35d4e26f926 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -27,7 +27,7 @@ export default function ExampleSelect() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1.5rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
                 ⏶
               </Select.ScrollUpArrow>
@@ -36,7 +36,7 @@ export default function ExampleSelect() {
                   <Select.Item
                     key={label}
                     value={value}
-                    className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none group-data-[side=none]:pr-12 data-highlighted:bg-neutral-950 data-highlighted:text-white dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
+                    className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none data-highlighted:bg-neutral-950 data-highlighted:text-white dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
                   >
                     <Select.ItemIndicator className="col-start-1">
                       <CheckIcon className="size-3" />
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
index 2fa726e64b8..0d9789e1113 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
@@ -147,7 +147,7 @@
     transition: none;
     transform: none;
     opacity: 1;
-    min-width: calc(var(--anchor-width) + 1rem);
+    min-width: calc(var(--anchor-width) + 1.5rem);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index dc63b4c2a45..91457a62b02 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -50,7 +50,7 @@ export default function MultiSelectExample() {
             sideOffset={8}
             alignItemWithTrigger={false}
           >
-            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding overflow-y-auto border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding overflow-y-auto border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1.5rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               {values.map((value) => (
                 <Select.Item
                   key={value}
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
index fa5bae4aac7..cfefd50ef23 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
@@ -162,7 +162,7 @@
     transition: none;
     transform: translateY(1px);
     opacity: 1;
-    min-width: calc(var(--anchor-width) + 1rem);
+    min-width: calc(var(--anchor-width) + 1.5rem);
   }
 }
 
@@ -190,10 +190,6 @@
   cursor: default;
   user-select: none;
 
-  [data-side='none'] & {
-    padding-right: 3rem;
-  }
-
   @media (hover: hover) {
     &[data-highlighted] {
       background-color: var(--color-neutral-950);
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index b427fe8ef1c..33797553420 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -26,7 +26,7 @@ export default function ObjectValueSelect() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1.5rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
                 ⏶
               </Select.ScrollUpArrow>
@@ -35,7 +35,7 @@ export default function ObjectValueSelect() {
                   <Select.Item
                     key={method.id}
                     value={method}
-                    className="group/item grid cursor-default grid-cols-[0.75rem_1fr] items-start gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none group-data-[side=none]:pr-12 [@media(hover:hover)]:data-highlighted:bg-neutral-950 [@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:bg-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950"
+                    className="group/item grid cursor-default grid-cols-[0.75rem_1fr] items-start gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none [@media(hover:hover)]:data-highlighted:bg-neutral-950 [@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:bg-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950"
                   >
                     <Select.ItemIndicator className="col-start-1 flex items-center justify-center self-start relative top-[0.4em]">
                       <CheckIcon className="size-3" />
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
index 10984f6972b..d004b5b5839 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
@@ -202,7 +202,7 @@
     transition: none;
     transform: translateY(1px);
     opacity: 1;
-    min-width: calc(var(--anchor-width) + 1rem);
+    min-width: calc(var(--anchor-width) + 1.5rem);
   }
 }
 
@@ -225,10 +225,6 @@
     padding-block: 0.625rem;
   }
 
-  [data-side='none'] & {
-    padding-right: 3rem;
-  }
-
   &[data-highlighted] {
     background-color: var(--color-neutral-950);
     color: white;
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
index ab2332afa3e..aacb63b7b1b 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
@@ -53,10 +53,10 @@ export default function ExampleToolbar() {
         </Toolbar.Button>
         <Select.Portal>
           <Select.Positioner className="z-10 outline-none select-none" sideOffset={8}>
-            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto border border-neutral-950 bg-white bg-clip-padding text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:translate-y-px data-[side=none]:scale-100 data-[side=none]:opacity-100 data-[side=none]:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-starting-style:opacity-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto border border-neutral-950 bg-white bg-clip-padding text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1.5rem)] data-[side=none]:translate-y-px data-[side=none]:scale-100 data-[side=none]:opacity-100 data-[side=none]:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-starting-style:opacity-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.Item
                 value="Helvetica"
-                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none group-data-[side=none]:pr-12 data-highlighted:bg-neutral-950 data-highlighted:text-white pointer-coarse:py-2.5 dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
+                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none data-highlighted:bg-neutral-950 data-highlighted:text-white pointer-coarse:py-2.5 dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
               >
                 <Select.ItemIndicator className="col-start-1">
                   <CheckIcon className="block size-3" />
@@ -65,7 +65,7 @@ export default function ExampleToolbar() {
               </Select.Item>
               <Select.Item
                 value="Arial"
-                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none group-data-[side=none]:pr-12 data-highlighted:bg-neutral-950 data-highlighted:text-white pointer-coarse:py-2.5 dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
+                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none data-highlighted:bg-neutral-950 data-highlighted:text-white pointer-coarse:py-2.5 dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
               >
                 <Select.ItemIndicator className="col-start-1">
                   <CheckIcon className="block size-3" />
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
index 2cb48e22700..b32a4511ffb 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
@@ -103,7 +103,7 @@
   }
 
   &[data-side='none'] {
-    min-width: calc(var(--anchor-width) + 1rem);
+    min-width: calc(var(--anchor-width) + 1.5rem);
   }
 }
 
@@ -179,10 +179,6 @@
   cursor: default;
   user-select: none;
 
-  [data-side='none'] & {
-    padding-right: 3rem;
-  }
-
   &[data-highlighted] {
     background-color: var(--color-neutral-950);
     color: white;
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
index 3ee1c16a2eb..d067518bf5a 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
@@ -64,7 +64,7 @@ export function Popup({ className, ...props }: Select.Popup.Props) {
   return (
     <Select.Popup
       className={clsx(
-        'group min-w-(--anchor-width) origin-(--transform-origin) border border-neutral-950 bg-white bg-clip-padding text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:translate-y-px data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none',
+        'group min-w-(--anchor-width) origin-(--transform-origin) border border-neutral-950 bg-white bg-clip-padding text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[side=none]:min-w-[calc(var(--anchor-width)+1.5rem)] data-[side=none]:translate-y-px data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none',
         className,
       )}
       {...props}

From efc76d6145cafe55449b49c0c95260e6adaf229d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 13 May 2026 11:31:10 +0200
Subject: [PATCH 179/257] Autocomplete / Combobox: fix virtualized list block
 padding

---
 .../demos/virtualized/css-modules/index.module.css        | 1 -
 .../autocomplete/demos/virtualized/css-modules/index.tsx  | 8 ++++----
 .../autocomplete/demos/virtualized/tailwind/index.tsx     | 8 ++++----
 .../demos/virtualized/css-modules/index.module.css        | 1 -
 .../combobox/demos/virtualized/css-modules/index.tsx      | 8 ++++----
 .../combobox/demos/virtualized/tailwind/index.tsx         | 8 ++++----
 6 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
index ff65b853f31..eee28901db8 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
@@ -61,7 +61,6 @@
   max-height: min(22rem, var(--available-height));
   max-width: var(--available-width);
   overflow: clip;
-
   border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.tsx
index bd8a4341bc6..59436b3e95e 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.tsx
@@ -66,10 +66,10 @@ function VirtualizedList({
     getScrollElement: () => scrollElementRef.current,
     estimateSize: () => 32,
     overscan: 20,
-    paddingStart: 8,
-    paddingEnd: 8,
-    scrollPaddingEnd: 8,
-    scrollPaddingStart: 8,
+    paddingStart: 4,
+    paddingEnd: 4,
+    scrollPaddingEnd: 4,
+    scrollPaddingStart: 4,
   });
 
   React.useImperativeHandle(virtualizerRef, () => virtualizer);
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
index d9fe2726444..42c7bc046ec 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
@@ -67,10 +67,10 @@ function VirtualizedList({
     getScrollElement: () => scrollElementRef.current,
     estimateSize: () => 32,
     overscan: 20,
-    paddingStart: 8,
-    paddingEnd: 8,
-    scrollPaddingEnd: 8,
-    scrollPaddingStart: 8,
+    paddingStart: 4,
+    paddingEnd: 4,
+    scrollPaddingEnd: 4,
+    scrollPaddingStart: 4,
   });
 
   React.useImperativeHandle(virtualizerRef, () => virtualizer);
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
index a988293f405..21d1984c39e 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
@@ -61,7 +61,6 @@
   max-height: min(22rem, var(--available-height));
   max-width: var(--available-width);
   overflow: clip;
-
   border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
index 7ca97456ae3..92509b91867 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
@@ -65,10 +65,10 @@ function VirtualizedList({
     getScrollElement: () => scrollElementRef.current,
     estimateSize: () => 32,
     overscan: 20,
-    paddingStart: 8,
-    paddingEnd: 8,
-    scrollPaddingEnd: 8,
-    scrollPaddingStart: 8,
+    paddingStart: 4,
+    paddingEnd: 4,
+    scrollPaddingEnd: 4,
+    scrollPaddingStart: 4,
   });
 
   React.useImperativeHandle(virtualizerRef, () => virtualizer);
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
index 1576ac00c83..ded236fb7ed 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
@@ -72,10 +72,10 @@ function VirtualizedList({
     getScrollElement: () => scrollElementRef.current,
     estimateSize: () => 32,
     overscan: 20,
-    paddingStart: 8,
-    paddingEnd: 8,
-    scrollPaddingEnd: 8,
-    scrollPaddingStart: 8,
+    paddingStart: 4,
+    paddingEnd: 4,
+    scrollPaddingEnd: 4,
+    scrollPaddingStart: 4,
   });
 
   React.useImperativeHandle(virtualizerRef, () => virtualizer);

From c9bed68704db4b71ca7d763b29db3b883979b07c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 13 May 2026 12:36:57 +0200
Subject: [PATCH 180/257] Combobox: fix trigger padding

---
 .../demos/input-inside-popup/css-modules/index.module.css       | 2 +-
 .../combobox/demos/input-inside-popup/tailwind/index.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
index f191f1f5c79..17ffaae809c 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
@@ -12,7 +12,7 @@
   justify-content: space-between;
   gap: 0.75rem;
   height: 2rem;
-  padding-left: 0.75rem;
+  padding-left: 0.5rem;
   padding-right: 0.5rem;
   margin: 0;
   outline: 0;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index d74bf07cc65..c9a617dc0c9 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExamplePopoverCombobox() {
         <Combobox.Label className="cursor-default text-sm leading-5 font-bold text-neutral-950 dark:text-white">
           Country
         </Combobox.Label>
-        <Combobox.Trigger className="flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white pr-2 pl-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 data-popup-open:bg-neutral-100 data-placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:data-placeholder:text-neutral-400 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800">
+        <Combobox.Trigger className="flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white px-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 data-popup-open:bg-neutral-100 data-placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:data-placeholder:text-neutral-400 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800">
           <Combobox.Value placeholder="Select country" />
           <Combobox.Icon className="flex text-neutral-950 dark:text-white">
             <ChevronUpDownIcon className="size-3" />

From b1df618c4120a8f0428a692e8b08e11031a38b8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 13 May 2026 12:46:30 +0200
Subject: [PATCH 181/257] Select: fix popup width

---
 .../react/components/select/demos/grouped/tailwind/index.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index 7936c1462b4..354354d8eaa 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleSelectGrouped() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1.5rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[2] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
                 ⏶
               </Select.ScrollUpArrow>

From d7ed2f1032f4ce230dfd6cc548bc70fa26ed8c21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 13 May 2026 14:33:00 +0200
Subject: [PATCH 182/257] Toast: fix arrow on anchored demo

---
 .../demos/anchored/css-modules/index.module.css      | 12 ++++++------
 .../toast/demos/anchored/css-modules/index.tsx       |  2 +-
 .../toast/demos/anchored/tailwind/index.tsx          |  4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
index 46806459303..84cf9864e36 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
@@ -8,6 +8,7 @@
 
 .AnchoredToast {
   box-sizing: border-box;
+  position: relative;
   font-size: 0.875rem;
   line-height: 1.25rem;
   display: flex;
@@ -253,6 +254,7 @@
 
 .Tooltip {
   box-sizing: border-box;
+  position: relative;
   font-size: 0.875rem;
   line-height: 1.25rem;
   display: flex;
@@ -285,9 +287,12 @@
   }
 }
 
+.AnchoredDescription {
+  margin: 0;
+}
+
 .Arrow {
   display: block;
-  position: relative;
   width: 12px;
   height: 6px;
   overflow: clip;
@@ -391,11 +396,6 @@
   }
 }
 
-.Icon {
-  width: 1rem;
-  height: 1rem;
-}
-
 .CopyButton {
   box-sizing: border-box;
   display: flex;
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
index 5351c98aa7e..12ddcdc5018 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
@@ -94,7 +94,7 @@ function AnchoredToasts() {
             <Toast.Root toast={toast} className={styles.AnchoredToast}>
               <Toast.Arrow className={styles.Arrow} />
               <Toast.Content>
-                <Toast.Description />
+                <Toast.Description className={styles.AnchoredDescription} />
               </Toast.Content>
             </Toast.Root>
           </Toast.Positioner>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index d65ae0deb5b..23f35bb8f89 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -77,7 +77,7 @@ function CopyButton() {
       </Tooltip.Trigger>
       <Tooltip.Portal>
         <Tooltip.Positioner sideOffset={10}>
-          <Tooltip.Popup className="flex origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-instant:duration-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Tooltip.Popup className="relative flex origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-instant:duration-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Tooltip.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
             Copy
           </Tooltip.Popup>
@@ -100,7 +100,7 @@ function AnchoredToasts() {
           >
             <Toast.Root
               toast={toast}
-              className="flex w-max origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+              className="relative flex w-max origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
             >
               <Toast.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
               <Toast.Content>

From cb3871067eef90cab9e53d8bd08662769234791d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 13 May 2026 15:08:46 +0200
Subject: [PATCH 183/257] Icons: remove CSS dimensions

---
 .../accordion/demos/_index.module.css         |  6 +-
 .../demos/hero/css-modules/index.tsx          | 17 ++++--
 .../accordion/demos/hero/tailwind/index.tsx   | 17 ++++--
 .../demos/multiple/css-modules/index.tsx      | 17 ++++--
 .../demos/multiple/tailwind/index.tsx         | 17 ++++--
 .../demos/hero/css-modules/index.module.css   |  5 --
 .../demos/hero/css-modules/index.tsx          | 17 ++++--
 .../demos/hero/tailwind/index.tsx             | 17 ++++--
 .../demos/nested/css-modules/index.module.css |  5 --
 .../demos/nested/css-modules/index.tsx        | 47 ++++++++-------
 .../demos/parent/css-modules/index.module.css |  5 --
 .../demos/parent/css-modules/index.tsx        | 35 +++++++----
 .../demos/hero/css-modules/index.module.css   |  5 --
 .../checkbox/demos/hero/css-modules/index.tsx | 13 ++++-
 .../checkbox/demos/hero/tailwind/index.tsx    | 13 ++++-
 .../demos/hero/css-modules/index.module.css   |  2 -
 .../demos/hero/css-modules/index.tsx          |  9 ++-
 .../collapsible/demos/hero/tailwind/index.tsx | 11 +++-
 .../css-modules/index.module.css              | 11 ----
 .../async-multiple/css-modules/index.tsx      | 26 +++++++--
 .../demos/async-multiple/tailwind/index.tsx   | 26 +++++++--
 .../async-single/css-modules/index.module.css | 16 -----
 .../demos/async-single/css-modules/index.tsx  | 38 ++++++++++--
 .../demos/async-single/tailwind/index.tsx     | 38 ++++++++++--
 .../creatable/css-modules/index.module.css    | 16 -----
 .../demos/creatable/css-modules/index.tsx     | 39 +++++++++++--
 .../demos/creatable/tailwind/index.tsx        | 39 +++++++++++--
 .../grouped/css-modules/index.module.css      | 16 -----
 .../demos/grouped/css-modules/index.tsx       | 38 ++++++++++--
 .../combobox/demos/grouped/tailwind/index.tsx | 38 ++++++++++--
 .../demos/hero/css-modules/index.module.css   | 19 +-----
 .../combobox/demos/hero/css-modules/index.tsx | 38 ++++++++++--
 .../combobox/demos/hero/tailwind/index.tsx    | 38 ++++++++++--
 .../css-modules/index.module.css              | 11 ----
 .../input-inside-popup/css-modules/index.tsx  | 24 +++++++-
 .../input-inside-popup/tailwind/index.tsx     | 26 +++++++--
 .../multiple/css-modules/index.module.css     | 11 ----
 .../demos/multiple/css-modules/index.tsx      | 26 +++++++--
 .../demos/multiple/tailwind/index.tsx         | 26 +++++++--
 .../virtualized/css-modules/index.module.css  |  6 --
 .../demos/virtualized/css-modules/index.tsx   | 13 ++++-
 .../demos/virtualized/tailwind/index.tsx      | 13 ++++-
 .../submenu/css-modules/index.module.css      |  5 --
 .../demos/submenu/css-modules/index.tsx       | 10 +++-
 .../demos/submenu/tailwind/index.tsx          | 12 +++-
 .../css-modules/index.module.css              |  5 --
 .../outside-scroll/css-modules/index.tsx      | 13 ++++-
 .../demos/outside-scroll/tailwind/index.tsx   | 13 ++++-
 .../uncontained/css-modules/index.module.css  |  5 --
 .../demos/uncontained/css-modules/index.tsx   | 13 ++++-
 .../demos/uncontained/tailwind/index.tsx      | 13 ++++-
 .../mobile-nav/css-modules/index.module.css   |  9 ---
 .../demos/mobile-nav/css-modules/index.tsx    | 13 ++++-
 .../demos/mobile-nav/tailwind/index.tsx       | 13 ++++-
 .../components/menu/demos/_index.module.css   |  5 --
 .../demos/arrow/css-modules/index.module.css  |  8 +--
 .../menu/demos/arrow/css-modules/index.tsx    | 12 +++-
 .../menu/demos/arrow/tailwind/index.tsx       | 14 ++++-
 .../css-modules/index.module.css              | 14 +----
 .../checkbox-items/css-modules/index.tsx      | 29 ++++++++--
 .../demos/checkbox-items/tailwind/index.tsx   | 31 +++++++---
 .../css-modules/index.tsx                     | 13 ++++-
 .../tailwind/index.tsx                        |  1 +
 .../group-labels/css-modules/index.module.css | 15 +----
 .../demos/group-labels/css-modules/index.tsx  | 35 ++++++++---
 .../demos/group-labels/tailwind/index.tsx     | 37 ++++++++----
 .../demos/hero/css-modules/index.module.css   |  8 +--
 .../menu/demos/hero/css-modules/index.tsx     | 12 +++-
 .../menu/demos/hero/tailwind/index.tsx        | 14 ++++-
 .../css-modules/index.module.css              |  8 +--
 .../demos/open-on-hover/css-modules/index.tsx | 12 +++-
 .../demos/open-on-hover/tailwind/index.tsx    | 14 ++++-
 .../radio-items/css-modules/index.module.css  | 14 +----
 .../demos/radio-items/css-modules/index.tsx   | 29 ++++++++--
 .../menu/demos/radio-items/tailwind/index.tsx | 31 +++++++---
 .../submenu/css-modules/index.module.css      | 13 +----
 .../menu/demos/submenu/css-modules/index.tsx  | 22 ++++++-
 .../menu/demos/submenu/tailwind/index.tsx     | 26 +++++++--
 .../demos/hero/css-modules/index.module.css   |  5 --
 .../menubar/demos/hero/css-modules/index.tsx  | 10 +++-
 .../menubar/demos/hero/tailwind/index.tsx     | 14 ++++-
 .../demos/hero/css-modules/index.module.css   |  7 ---
 .../demos/hero/css-modules/index.tsx          | 10 +++-
 .../demos/hero/tailwind/index.tsx             | 14 ++++-
 .../css-modules/index.module.css              |  7 ---
 .../demos/nested-inline/css-modules/index.tsx | 10 +++-
 .../demos/nested-inline/tailwind/index.tsx    | 14 ++++-
 .../demos/nested/css-modules/index.module.css | 14 -----
 .../demos/nested/css-modules/index.tsx        | 20 ++++++-
 .../demos/nested/tailwind/index.tsx           | 26 +++++++--
 .../demos/hero/css-modules/index.module.css   |  5 --
 .../demos/hero/css-modules/index.tsx          | 32 +++++++++-
 .../demos/hero/tailwind/index.tsx             | 36 ++++++++++--
 .../grouped/css-modules/index.module.css      | 17 +-----
 .../demos/grouped/css-modules/index.tsx       | 24 +++++++-
 .../select/demos/grouped/tailwind/index.tsx   | 26 +++++++--
 .../demos/hero/css-modules/index.module.css   | 11 ----
 .../select/demos/hero/css-modules/index.tsx   | 24 +++++++-
 .../select/demos/hero/tailwind/index.tsx      | 26 +++++++--
 .../multiple/css-modules/index.module.css     | 11 ----
 .../demos/multiple/css-modules/index.tsx      | 24 +++++++-
 .../select/demos/multiple/tailwind/index.tsx  | 26 +++++++--
 .../css-modules/index.module.css              | 11 ----
 .../demos/object-values/css-modules/index.tsx | 24 +++++++-
 .../demos/object-values/tailwind/index.tsx    | 26 +++++++--
 .../anchored/css-modules/index.module.css     |  1 +
 .../demos/anchored/css-modules/index.tsx      | 24 +++++++-
 .../toast/demos/anchored/tailwind/index.tsx   | 24 +++++++-
 .../demos/hero/css-modules/index.module.css   |  5 --
 .../demos/hero/css-modules/index.tsx          | 33 +++++++++--
 .../demos/hero/tailwind/index.tsx             | 33 +++++++++--
 .../multiple/css-modules/index.module.css     |  5 --
 .../demos/multiple/css-modules/index.tsx      | 33 +++++++++--
 .../demos/multiple/tailwind/index.tsx         | 33 +++++++++--
 .../demos/hero/css-modules/index.module.css   |  5 --
 .../toggle/demos/hero/css-modules/index.tsx   | 22 +++++--
 .../toggle/demos/hero/tailwind/index.tsx      | 22 +++++--
 .../demos/hero/css-modules/index.module.css   | 11 ----
 .../toolbar/demos/hero/css-modules/index.tsx  | 26 +++++++--
 .../toolbar/demos/hero/tailwind/index.tsx     | 28 +++++++--
 .../css-modules/index.tsx                     |  9 ++-
 .../tailwind/index.tsx                        |  6 +-
 .../css-modules/index.module.css              |  5 --
 .../css-modules/index.tsx                     | 15 ++++-
 .../detached-triggers-full/tailwind/index.tsx |  6 +-
 .../css-modules/index.tsx                     |  5 +-
 .../tailwind/index.tsx                        |  2 +-
 .../demos/hero/css-modules/index.module.css   |  5 --
 .../tooltip/demos/hero/css-modules/index.tsx  | 33 +++++++++--
 .../tooltip/demos/hero/tailwind/index.tsx     | 33 +++++++++--
 .../components/tooltip/demos/icons-tw.tsx     |  9 +++
 .../components/tooltip/demos/index.module.css |  5 --
 .../css-modules/index.module.css              | 11 ----
 .../css-modules/index.tsx                     | 24 +++++++-
 .../forms/demos/components/combobox.tsx       | 23 +++++++-
 .../handbook/forms/demos/components/toast.tsx | 13 ++++-
 .../forms/demos/hero/tailwind/index.tsx       | 58 +++++++++++++++----
 .../demos/react-hook-form/tailwind/index.tsx  | 58 +++++++++++++++----
 .../demos/tanstack-form/tailwind/index.tsx    | 58 +++++++++++++++----
 .../css-modules/index.module.css              |  5 --
 .../css-modules/index.tsx                     | 24 +++++---
 141 files changed, 1801 insertions(+), 776 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
index 9bd3b3e6531..b1b7fa6cabc 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
@@ -71,11 +71,7 @@
   }
 }
 
-.TriggerIcon {
-  box-sizing: border-box;
-  flex-shrink: 0;
-  width: 0.75rem;
-  height: 0.75rem;
+.Icon {
   transition: transform 100ms ease-out;
 
   [data-panel-open] > & {
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/hero/css-modules/index.tsx
index fd505f25334..ceee92a6dfa 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/hero/css-modules/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             What is Base UI?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -24,7 +24,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             How do I get started?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -39,7 +39,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             Can I use it for my project?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -52,7 +52,16 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
       <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
index 80eae65297f..faf7bdc8439 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleAccordion() {
         <Accordion.Header>
           <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             What is Base UI?
-            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
@@ -23,7 +23,7 @@ export default function ExampleAccordion() {
         <Accordion.Header>
           <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             How do I get started?
-            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
@@ -38,7 +38,7 @@ export default function ExampleAccordion() {
         <Accordion.Header>
           <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             Can I use it for my project?
-            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
@@ -51,7 +51,16 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
       <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/multiple/css-modules/index.tsx
index ec54c47b61e..5c2b5a22ec3 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/multiple/css-modules/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             What is Base UI?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -24,7 +24,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             How do I get started?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -39,7 +39,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             Can I use it for my project?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -52,7 +52,16 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
       <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
index 0233c367c13..d95f45bebb2 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
@@ -11,7 +11,7 @@ export default function ExampleAccordion() {
         <Accordion.Header>
           <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             What is Base UI?
-            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
@@ -26,7 +26,7 @@ export default function ExampleAccordion() {
         <Accordion.Header>
           <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             How do I get started?
-            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
@@ -41,7 +41,7 @@ export default function ExampleAccordion() {
         <Accordion.Header>
           <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             Can I use it for my project?
-            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
@@ -54,7 +54,16 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
       <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
index e72181b0b10..8da4f3e4c90 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
@@ -74,8 +74,3 @@
     display: none;
   }
 }
-
-.Icon {
-  width: 0.75rem;
-  height: 0.75rem;
-}
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
index 7959f2991b8..a2870c2b965 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
@@ -19,7 +19,7 @@ export default function ExampleCheckboxGroup() {
       <label className={styles.Item}>
         <Checkbox.Root name="apple" value="fuji-apple" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
-            <CheckIcon className={styles.Icon} />
+            <CheckIcon />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Fuji
@@ -28,7 +28,7 @@ export default function ExampleCheckboxGroup() {
       <label className={styles.Item}>
         <Checkbox.Root name="apple" value="gala-apple" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
-            <CheckIcon className={styles.Icon} />
+            <CheckIcon />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Gala
@@ -37,7 +37,7 @@ export default function ExampleCheckboxGroup() {
       <label className={styles.Item}>
         <Checkbox.Root name="apple" value="granny-smith-apple" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
-            <CheckIcon className={styles.Icon} />
+            <CheckIcon />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Granny Smith
@@ -48,7 +48,16 @@ export default function ExampleCheckboxGroup() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
index d870247a451..bb855794a29 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
@@ -22,7 +22,7 @@ export default function ExampleCheckboxGroup() {
           className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
           <Checkbox.Indicator className="flex data-unchecked:hidden">
-            <CheckIcon className="size-3" />
+            <CheckIcon />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Fuji
@@ -35,7 +35,7 @@ export default function ExampleCheckboxGroup() {
           className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
           <Checkbox.Indicator className="flex data-unchecked:hidden">
-            <CheckIcon className="size-3" />
+            <CheckIcon />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Gala
@@ -48,7 +48,7 @@ export default function ExampleCheckboxGroup() {
           className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
           <Checkbox.Indicator className="flex data-unchecked:hidden">
-            <CheckIcon className="size-3" />
+            <CheckIcon />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Granny Smith
@@ -59,7 +59,16 @@ export default function ExampleCheckboxGroup() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
index e72181b0b10..8da4f3e4c90 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
@@ -74,8 +74,3 @@
     display: none;
   }
 }
-
-.Icon {
-  width: 0.75rem;
-  height: 0.75rem;
-}
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
index 00fb2bae4c0..05fb3692be7 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
@@ -40,13 +40,7 @@ export default function PermissionsForm() {
           <Checkbox.Indicator
             className={styles.Indicator}
             render={(props, state) => (
-              <span {...props}>
-                {state.indeterminate ? (
-                  <HorizontalRuleIcon className={styles.Icon} />
-                ) : (
-                  <CheckIcon className={styles.Icon} />
-                )}
-              </span>
+              <span {...props}>{state.indeterminate ? <HorizontalRuleIcon /> : <CheckIcon />}</span>
             )}
           />
         </Checkbox.Root>
@@ -56,7 +50,7 @@ export default function PermissionsForm() {
       <label className={styles.Item}>
         <Checkbox.Root value="view-dashboard" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
-            <CheckIcon className={styles.Icon} />
+            <CheckIcon />
           </Checkbox.Indicator>
         </Checkbox.Root>
         View Dashboard
@@ -65,7 +59,7 @@ export default function PermissionsForm() {
       <label className={styles.Item}>
         <Checkbox.Root value="access-reports" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
-            <CheckIcon className={styles.Icon} />
+            <CheckIcon />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Access Reports
@@ -92,11 +86,7 @@ export default function PermissionsForm() {
               className={styles.Indicator}
               render={(props, state) => (
                 <span {...props}>
-                  {state.indeterminate ? (
-                    <HorizontalRuleIcon className={styles.Icon} />
-                  ) : (
-                    <CheckIcon className={styles.Icon} />
-                  )}
+                  {state.indeterminate ? <HorizontalRuleIcon /> : <CheckIcon />}
                 </span>
               )}
             />
@@ -107,7 +97,7 @@ export default function PermissionsForm() {
         <label className={styles.Item}>
           <Checkbox.Root value="create-user" className={styles.Checkbox}>
             <Checkbox.Indicator className={styles.Indicator}>
-              <CheckIcon className={styles.Icon} />
+              <CheckIcon />
             </Checkbox.Indicator>
           </Checkbox.Root>
           Create User
@@ -116,7 +106,7 @@ export default function PermissionsForm() {
         <label className={styles.Item}>
           <Checkbox.Root value="edit-user" className={styles.Checkbox}>
             <Checkbox.Indicator className={styles.Indicator}>
-              <CheckIcon className={styles.Icon} />
+              <CheckIcon />
             </Checkbox.Indicator>
           </Checkbox.Root>
           Edit User
@@ -125,7 +115,7 @@ export default function PermissionsForm() {
         <label className={styles.Item}>
           <Checkbox.Root value="delete-user" className={styles.Checkbox}>
             <Checkbox.Indicator className={styles.Indicator}>
-              <CheckIcon className={styles.Icon} />
+              <CheckIcon />
             </Checkbox.Indicator>
           </Checkbox.Root>
           Delete User
@@ -134,7 +124,7 @@ export default function PermissionsForm() {
         <label className={styles.Item}>
           <Checkbox.Root value="assign-roles" className={styles.Checkbox}>
             <Checkbox.Indicator className={styles.Indicator}>
-              <CheckIcon className={styles.Icon} />
+              <CheckIcon />
             </Checkbox.Indicator>
           </Checkbox.Root>
           Assign Roles
@@ -146,7 +136,16 @@ export default function PermissionsForm() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -154,7 +153,15 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function HorizontalRuleIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="currentColor" strokeWidth={1} {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      strokeWidth={1}
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <line
         x1="3"
         y1="12"
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
index e72181b0b10..8da4f3e4c90 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
@@ -74,8 +74,3 @@
     display: none;
   }
 }
-
-.Icon {
-  width: 0.75rem;
-  height: 0.75rem;
-}
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
index 9eef2ec71b2..e63e5ac2c29 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
@@ -24,13 +24,7 @@ export default function ExampleCheckboxGroup() {
           <Checkbox.Indicator
             className={styles.Indicator}
             render={(props, state) => (
-              <span {...props}>
-                {state.indeterminate ? (
-                  <HorizontalRuleIcon className={styles.Icon} />
-                ) : (
-                  <CheckIcon className={styles.Icon} />
-                )}
-              </span>
+              <span {...props}>{state.indeterminate ? <HorizontalRuleIcon /> : <CheckIcon />}</span>
             )}
           />
         </Checkbox.Root>
@@ -40,7 +34,7 @@ export default function ExampleCheckboxGroup() {
       <label className={styles.Item}>
         <Checkbox.Root value="fuji-apple" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
-            <CheckIcon className={styles.Icon} />
+            <CheckIcon />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Fuji
@@ -49,7 +43,7 @@ export default function ExampleCheckboxGroup() {
       <label className={styles.Item}>
         <Checkbox.Root value="gala-apple" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
-            <CheckIcon className={styles.Icon} />
+            <CheckIcon />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Gala
@@ -58,7 +52,7 @@ export default function ExampleCheckboxGroup() {
       <label className={styles.Item}>
         <Checkbox.Root value="granny-smith-apple" className={styles.Checkbox}>
           <Checkbox.Indicator className={styles.Indicator}>
-            <CheckIcon className={styles.Icon} />
+            <CheckIcon />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Granny Smith
@@ -69,7 +63,16 @@ export default function ExampleCheckboxGroup() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -77,7 +80,15 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function HorizontalRuleIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="currentColor" strokeWidth={1} {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      strokeWidth={1}
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <line
         x1="3"
         y1="12"
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
index fcc0ee76565..da3183f4cab 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
@@ -61,8 +61,3 @@
     display: none;
   }
 }
-
-.Icon {
-  width: 0.75rem;
-  height: 0.75rem;
-}
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
index 238443914a0..c275c20a76a 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleCheckbox() {
     <label className={styles.Label}>
       <Checkbox.Root defaultChecked className={styles.Checkbox}>
         <Checkbox.Indicator className={styles.Indicator}>
-          <CheckIcon className={styles.Icon} />
+          <CheckIcon />
         </Checkbox.Indicator>
       </Checkbox.Root>
       Enable notifications
@@ -17,7 +17,16 @@ export default function ExampleCheckbox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
index f7321378533..e82e5f93d96 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleCheckbox() {
         className="flex size-4 shrink-0 items-center justify-center border rounded-none p-0 border-neutral-950 bg-white text-white dark:border-white dark:bg-neutral-950 dark:text-neutral-950 data-checked:bg-neutral-950 data-checked:text-white dark:data-checked:bg-white dark:data-checked:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         <Checkbox.Indicator className="flex data-unchecked:hidden">
-          <CheckIcon className="size-3" />
+          <CheckIcon />
         </Checkbox.Indicator>
       </Checkbox.Root>
       Enable notifications
@@ -19,7 +19,16 @@ export default function ExampleCheckbox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
index 49d87034b02..19675440968 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
@@ -12,8 +12,6 @@
 }
 
 .Icon {
-  width: 0.75rem;
-  height: 0.75rem;
   transition: transform 100ms ease-out;
 }
 
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx
index 331556ca764..e6b25432997 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx
@@ -22,7 +22,14 @@ export default function ExampleCollapsible() {
 
 export function ChevronIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.5 1L7.5 5L3.5 9" stroke="currentColor" strokeWidth="1" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
index 7586cf34a2a..911366e1a24 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleCollapsible() {
     <Collapsible.Root className="flex min-h-36 w-48 flex-col justify-center text-neutral-950 dark:text-white">
       <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
         Recovery keys
-        <ChevronIcon className="size-3 transition-transform duration-100 ease-out group-data-panel-open:rotate-90" />
+        <ChevronIcon className="transition-transform duration-100 ease-out group-data-panel-open:rotate-90" />
       </Collapsible.Trigger>
       <Collapsible.Panel className="flex h-[var(--collapsible-panel-height)] flex-col justify-end overflow-hidden text-sm transition-[height] duration-150 ease-out [&[hidden]:not([hidden='until-found'])]:hidden data-ending-style:h-0 data-starting-style:h-0">
         <div className="flex flex-col gap-2 px-3.5 py-2">
@@ -21,7 +21,14 @@ export default function ExampleCollapsible() {
 
 export function ChevronIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.5 1L7.5 5L3.5 9" stroke="currentColor" strokeWidth="1" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
index 7b75d848aa2..7de2b5d821f 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
@@ -141,11 +141,6 @@
   }
 }
 
-.ChipRemoveIcon {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .Input {
   flex: 1;
   box-sizing: border-box;
@@ -316,12 +311,6 @@
   margin-top: 0.25rem;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .ItemText {
   grid-column-start: 2;
   display: flex;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
index 676c3f8bbef..3e122df25d0 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
@@ -148,7 +148,7 @@ export default function ExampleAsyncMultipleCombobox() {
                         className={styles.ChipRemove}
                         aria-label={`Remove ${user.name}`}
                       >
-                        <XIcon className={styles.ChipRemoveIcon} />
+                        <XIcon />
                       </Combobox.ChipRemove>
                     </Combobox.Chip>
                   ))}
@@ -178,7 +178,7 @@ export default function ExampleAsyncMultipleCombobox() {
                 {(user: DirectoryUser) => (
                   <Combobox.Item key={user.id} className={styles.Item} value={user}>
                     <Combobox.ItemIndicator className={styles.ItemIndicator}>
-                      <CheckIcon className={styles.ItemIndicatorIcon} />
+                      <CheckIcon />
                     </Combobox.ItemIndicator>
                     <span className={styles.ItemText}>
                       <span className={styles.ItemTitle}>{user.name}</span>
@@ -201,7 +201,16 @@ export default function ExampleAsyncMultipleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -209,7 +218,16 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index 81b52ff5a01..094513ee2aa 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -157,7 +157,7 @@ export default function ExampleAsyncMultipleCombobox() {
                         className="flex size-4 items-center justify-center border-0 bg-transparent p-0 text-inherit hover:bg-neutral-200 group-focus-within:hover:bg-neutral-700 dark:hover:bg-neutral-700 dark:group-focus-within:hover:bg-neutral-200"
                         aria-label={`Remove ${user.name}`}
                       >
-                        <XIcon className="size-3" />
+                        <XIcon />
                       </Combobox.ChipRemove>
                     </Combobox.Chip>
                   ))}
@@ -202,7 +202,7 @@ export default function ExampleAsyncMultipleCombobox() {
                     className="grid cursor-default grid-cols-[0.75rem_1fr] items-start gap-2 px-2 py-2 text-sm leading-[1.2rem] outline-none select-none [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-neutral-950 [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-100 dark:[@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:before:bg-neutral-800"
                   >
                     <Combobox.ItemIndicator className="col-start-1 mt-1">
-                      <CheckIcon className="size-3" />
+                      <CheckIcon />
                     </Combobox.ItemIndicator>
                     <span className="col-start-2 flex flex-col gap-1">
                       <span className="text-sm leading-5 font-bold">{user.name}</span>
@@ -225,7 +225,16 @@ export default function ExampleAsyncMultipleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -233,7 +242,16 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
index 7372c5254ae..988ed0ba445 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
@@ -118,16 +118,6 @@
   }
 }
 
-.ClearIcon {
-  width: 1rem;
-  height: 1rem;
-}
-
-.TriggerIcon {
-  width: 0.625rem;
-  height: 0.625rem;
-}
-
 .Positioner {
   outline: 0;
 }
@@ -250,12 +240,6 @@
   margin-top: 0.25rem;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .ItemText {
   grid-column-start: 2;
   display: flex;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
index 0ddaf339842..7565ad76fb7 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
@@ -116,10 +116,10 @@ export default function ExampleAsyncSingleCombobox() {
           <Combobox.Input id={id} placeholder="e.g. Michael" className={styles.Input} />
           <div className={styles.ActionButtons}>
             <Combobox.Clear className={styles.Clear} aria-label="Clear selection">
-              <XIcon className={styles.ClearIcon} />
+              <XIcon />
             </Combobox.Clear>
             <Combobox.Trigger className={styles.Trigger} aria-label="Open popup">
-              <ChevronDownIcon className={styles.TriggerIcon} />
+              <ChevronDownIcon />
             </Combobox.Trigger>
           </div>
         </Combobox.InputGroup>
@@ -139,7 +139,7 @@ export default function ExampleAsyncSingleCombobox() {
                 {(user: DirectoryUser) => (
                   <Combobox.Item key={user.id} className={styles.Item} value={user}>
                     <Combobox.ItemIndicator className={styles.ItemIndicator}>
-                      <CheckIcon className={styles.ItemIndicatorIcon} />
+                      <CheckIcon />
                     </Combobox.ItemIndicator>
                     <span className={styles.ItemText}>
                       <span className={styles.ItemTitle}>{user.name}</span>
@@ -162,7 +162,16 @@ export default function ExampleAsyncSingleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -170,7 +179,16 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -179,7 +197,15 @@ function XIcon(props: React.ComponentProps<'svg'>) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index 3e28a08b8a3..fb2def9b06e 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -124,13 +124,13 @@ export default function ExampleAsyncSingleCombobox() {
               className="combobox-clear flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white"
               aria-label="Clear selection"
             >
-              <XIcon className="size-4" />
+              <XIcon />
             </Combobox.Clear>
             <Combobox.Trigger
               className="flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white"
               aria-label="Open popup"
             >
-              <ChevronDownIcon className="size-2.5" />
+              <ChevronDownIcon />
             </Combobox.Trigger>
           </div>
         </Combobox.InputGroup>
@@ -165,7 +165,7 @@ export default function ExampleAsyncSingleCombobox() {
                     className="grid cursor-default grid-cols-[0.75rem_1fr] items-start gap-2 px-2 py-2 text-sm leading-[1.2rem] outline-none select-none [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-neutral-950 [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-100 dark:[@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:before:bg-neutral-800"
                   >
                     <Combobox.ItemIndicator className="col-start-1 mt-1">
-                      <CheckIcon className="size-3" />
+                      <CheckIcon />
                     </Combobox.ItemIndicator>
                     <span className="col-start-2 flex flex-col gap-1">
                       <span className="text-sm leading-5 font-bold">{user.name}</span>
@@ -188,7 +188,16 @@ export default function ExampleAsyncSingleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -196,7 +205,16 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -205,7 +223,15 @@ function XIcon(props: React.ComponentProps<'svg'>) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
index ee6c3ff5747..f9419078766 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
@@ -141,11 +141,6 @@
   }
 }
 
-.ChipRemoveIcon {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .Input {
   flex: 1;
   box-sizing: border-box;
@@ -285,12 +280,6 @@
   grid-column-start: 1;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .Empty {
   box-sizing: border-box;
   font-size: 0.875rem;
@@ -323,11 +312,6 @@
   }
 }
 
-.CreateIcon {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .CreateText {
   grid-column-start: 2;
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
index 304f83ca316..d6cbb49f5cb 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
@@ -142,7 +142,7 @@ export default function ExampleCreatableCombobox() {
                           className={styles.ChipRemove}
                           aria-label={`Remove ${label.value}`}
                         >
-                          <XIcon className={styles.ChipRemoveIcon} />
+                          <XIcon />
                         </Combobox.ChipRemove>
                       </Combobox.Chip>
                     ))}
@@ -171,14 +171,14 @@ export default function ExampleCreatableCombobox() {
                   item.creatable ? (
                     <Combobox.Item key={item.id} className={styles.Item} value={item}>
                       <span className={styles.ItemIndicator}>
-                        <PlusIcon className={styles.CreateIcon} />
+                        <PlusIcon />
                       </span>
                       <span className={styles.ItemText}>Create "{item.creatable}"</span>
                     </Combobox.Item>
                   ) : (
                     <Combobox.Item key={item.id} className={styles.Item} value={item}>
                       <Combobox.ItemIndicator className={styles.ItemIndicator}>
-                        <CheckIcon className={styles.ItemIndicatorIcon} />
+                        <CheckIcon />
                       </Combobox.ItemIndicator>
                       <span className={styles.ItemText}>{item.value}</span>
                     </Combobox.Item>
@@ -221,7 +221,16 @@ export default function ExampleCreatableCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -229,7 +238,16 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
       <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -238,7 +256,16 @@ function PlusIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
index 76cc0c7d378..13005bebae5 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
@@ -144,7 +144,7 @@ export default function ExampleCreatableCombobox() {
                           className="flex size-4 items-center justify-center border-0 bg-transparent p-0 text-inherit hover:bg-neutral-200 group-focus-within:hover:bg-neutral-700 dark:hover:bg-neutral-700 dark:group-focus-within:hover:bg-neutral-200"
                           aria-label={`Remove ${label.value}`}
                         >
-                          <XIcon className="size-3" />
+                          <XIcon />
                         </Combobox.ChipRemove>
                       </Combobox.Chip>
                     ))}
@@ -179,7 +179,7 @@ export default function ExampleCreatableCombobox() {
                       value={item}
                     >
                       <span className="col-start-1">
-                        <PlusIcon className="size-3" />
+                        <PlusIcon />
                       </span>
                       <span className="col-start-2">Create "{item.creatable}"</span>
                     </Combobox.Item>
@@ -190,7 +190,7 @@ export default function ExampleCreatableCombobox() {
                       value={item}
                     >
                       <Combobox.ItemIndicator className="col-start-1">
-                        <CheckIcon className="size-3" />
+                        <CheckIcon />
                       </Combobox.ItemIndicator>
                       <span className="col-start-2">{item.value}</span>
                     </Combobox.Item>
@@ -241,7 +241,16 @@ export default function ExampleCreatableCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -249,7 +258,16 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
       <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -258,7 +276,16 @@ function PlusIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
index 55d6221b906..8246d2f73bb 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
@@ -115,16 +115,6 @@
   }
 }
 
-.ClearIcon {
-  width: 1rem;
-  height: 1rem;
-}
-
-.TriggerIcon {
-  width: 0.625rem;
-  height: 0.625rem;
-}
-
 .Positioner {
   outline: 0;
 }
@@ -229,12 +219,6 @@
   grid-column-start: 1;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .ItemText {
   grid-column-start: 2;
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
index b5a6baf62c1..f20e55cb51e 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
@@ -13,10 +13,10 @@ export default function ExampleGroupedCombobox() {
           <Combobox.Input placeholder="e.g. Mango" className={styles.Input} id={id} />
           <div className={styles.ActionButtons}>
             <Combobox.Clear className={styles.Clear} aria-label="Clear selection">
-              <XIcon className={styles.ClearIcon} />
+              <XIcon />
             </Combobox.Clear>
             <Combobox.Trigger className={styles.Trigger} aria-label="Open popup">
-              <ChevronDownIcon className={styles.TriggerIcon} />
+              <ChevronDownIcon />
             </Combobox.Trigger>
           </div>
         </Combobox.InputGroup>
@@ -38,7 +38,7 @@ export default function ExampleGroupedCombobox() {
                     {(item: Produce) => (
                       <Combobox.Item key={item.id} className={styles.Item} value={item}>
                         <Combobox.ItemIndicator className={styles.ItemIndicator}>
-                          <CheckIcon className={styles.ItemIndicatorIcon} />
+                          <CheckIcon />
                         </Combobox.ItemIndicator>
                         <span className={styles.ItemText}>{item.label}</span>
                       </Combobox.Item>
@@ -56,7 +56,16 @@ export default function ExampleGroupedCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -64,7 +73,16 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -73,7 +91,15 @@ function XIcon(props: React.ComponentProps<'svg'>) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index 32ae3c4e6ac..4d4bab8fff9 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -19,13 +19,13 @@ export default function ExampleGroupedCombobox() {
               className="combobox-clear flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white"
               aria-label="Clear selection"
             >
-              <XIcon className="size-4" />
+              <XIcon />
             </Combobox.Clear>
             <Combobox.Trigger
               className="flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white"
               aria-label="Open popup"
             >
-              <ChevronDownIcon className="size-2.5" />
+              <ChevronDownIcon />
             </Combobox.Trigger>
           </div>
         </Combobox.InputGroup>
@@ -53,7 +53,7 @@ export default function ExampleGroupedCombobox() {
                         value={item}
                       >
                         <Combobox.ItemIndicator className="col-start-1 flex items-center justify-center">
-                          <CheckIcon className="size-3" />
+                          <CheckIcon />
                         </Combobox.ItemIndicator>
                         <span className="col-start-2">{item.label}</span>
                       </Combobox.Item>
@@ -71,7 +71,16 @@ export default function ExampleGroupedCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -79,7 +88,16 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -88,7 +106,15 @@ function XIcon(props: React.ComponentProps<'svg'>) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
index fa43581912e..66a7bf43dc8 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
@@ -114,16 +114,6 @@
   }
 }
 
-.ClearIcon {
-  width: 1rem;
-  height: 1rem;
-}
-
-.TriggerIcon {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .Positioner {
   outline: 0;
 }
@@ -219,17 +209,12 @@
   grid-column-start: 1;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .Empty {
+  box-sizing: border-box;
+  padding: 1rem 1rem 1rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1rem;
   color: var(--color-neutral-500);
-  padding: 1rem 1rem 1rem 0.5rem;
 
   @media (prefers-color-scheme: dark) {
     color: var(--color-neutral-400);
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
index ddb39025a0d..cc1ea3f186b 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
@@ -13,10 +13,10 @@ export default function ExampleCombobox() {
           <Combobox.Input placeholder="e.g. Apple" id={id} className={styles.Input} />
           <div className={styles.ActionButtons}>
             <Combobox.Clear className={styles.Clear} aria-label="Clear selection">
-              <XIcon className={styles.ClearIcon} />
+              <XIcon />
             </Combobox.Clear>
             <Combobox.Trigger className={styles.Trigger} aria-label="Open popup">
-              <ChevronDownIcon className={styles.TriggerIcon} />
+              <ChevronDownIcon />
             </Combobox.Trigger>
           </div>
         </Combobox.InputGroup>
@@ -32,7 +32,7 @@ export default function ExampleCombobox() {
               {(item: Fruit) => (
                 <Combobox.Item key={item.value} value={item} className={styles.Item}>
                   <Combobox.ItemIndicator className={styles.ItemIndicator}>
-                    <CheckIcon className={styles.ItemIndicatorIcon} />
+                    <CheckIcon />
                   </Combobox.ItemIndicator>
                   <span className={styles.ItemText}>{item.label}</span>
                 </Combobox.Item>
@@ -47,7 +47,16 @@ export default function ExampleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -55,7 +64,16 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -64,7 +82,15 @@ function XIcon(props: React.ComponentProps<'svg'>) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
index 57eb39ea480..7e1384c9ad1 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
@@ -19,13 +19,13 @@ export default function ExampleCombobox() {
               className="combobox-clear flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white"
               aria-label="Clear selection"
             >
-              <XIcon className="size-4" />
+              <XIcon />
             </Combobox.Clear>
             <Combobox.Trigger
               className="flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white"
               aria-label="Open popup"
             >
-              <ChevronDownIcon className="size-3" />
+              <ChevronDownIcon />
             </Combobox.Trigger>
           </div>
         </Combobox.InputGroup>
@@ -47,7 +47,7 @@ export default function ExampleCombobox() {
                   className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                 >
                   <Combobox.ItemIndicator className="col-start-1">
-                    <CheckIcon className="size-3" />
+                    <CheckIcon />
                   </Combobox.ItemIndicator>
                   <span className="col-start-2">{item.label}</span>
                 </Combobox.Item>
@@ -62,7 +62,16 @@ export default function ExampleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -70,7 +79,16 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -79,7 +97,15 @@ function XIcon(props: React.ComponentProps<'svg'>) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
index 17ffaae809c..afc634c25df 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
@@ -85,11 +85,6 @@
   @media (prefers-color-scheme: dark) {
     color: white;
   }
-
-  & svg {
-    width: 0.75rem;
-    height: 0.75rem;
-  }
 }
 
 .InputContainer {
@@ -258,12 +253,6 @@
   grid-column-start: 1;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .Separator {
   margin: 0.375rem 1rem;
   height: 1px;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
index 7f4215af356..013da3be3c8 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
@@ -27,7 +27,7 @@ export default function ExamplePopoverCombobox() {
                 {(country: Country) => (
                   <Combobox.Item key={country.code} value={country} className={styles.Item}>
                     <Combobox.ItemIndicator className={styles.ItemIndicator}>
-                      <CheckIcon className={styles.ItemIndicatorIcon} />
+                      <CheckIcon />
                     </Combobox.ItemIndicator>
                     <span className={styles.ItemText}>{country.label}</span>
                   </Combobox.Item>
@@ -43,7 +43,16 @@ export default function ExamplePopoverCombobox() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
       <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -52,7 +61,16 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index c9a617dc0c9..eef7e1ec8e6 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExamplePopoverCombobox() {
         <Combobox.Trigger className="flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white px-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 data-popup-open:bg-neutral-100 data-placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:data-placeholder:text-neutral-400 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800">
           <Combobox.Value placeholder="Select country" />
           <Combobox.Icon className="flex text-neutral-950 dark:text-white">
-            <ChevronUpDownIcon className="size-3" />
+            <ChevronUpDownIcon />
           </Combobox.Icon>
         </Combobox.Trigger>
         <Combobox.Portal>
@@ -40,7 +40,7 @@ export default function ExamplePopoverCombobox() {
                     className="grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                   >
                     <Combobox.ItemIndicator className="col-start-1">
-                      <CheckIcon className="size-3" />
+                      <CheckIcon />
                     </Combobox.ItemIndicator>
                     <span className="col-start-2">{country.label}</span>
                   </Combobox.Item>
@@ -56,7 +56,16 @@ export default function ExamplePopoverCombobox() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
       <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -65,7 +74,16 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
index f6db10f1a35..a48c45fddef 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
@@ -154,11 +154,6 @@
   }
 }
 
-.ChipRemoveIcon {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .Input {
   flex: 1;
   box-sizing: border-box;
@@ -298,12 +293,6 @@
   grid-column-start: 1;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .ItemName {
   font-weight: 700;
   color: inherit;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
index 39e326aa161..8ab8ba8d4a1 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
@@ -28,7 +28,7 @@ export default function ExampleMultipleCombobox() {
                         className={styles.ChipRemove}
                         aria-label={`Remove ${language.value}`}
                       >
-                        <XIcon className={styles.ChipRemoveIcon} />
+                        <XIcon />
                       </Combobox.ChipRemove>
                     </Combobox.Chip>
                   ))}
@@ -54,7 +54,7 @@ export default function ExampleMultipleCombobox() {
               {(language: ProgrammingLanguage) => (
                 <Combobox.Item key={language.id} className={styles.Item} value={language}>
                   <Combobox.ItemIndicator className={styles.ItemIndicator}>
-                    <CheckIcon className={styles.ItemIndicatorIcon} />
+                    <CheckIcon />
                   </Combobox.ItemIndicator>
                   <span className={styles.ItemText}>{language.value}</span>
                 </Combobox.Item>
@@ -69,7 +69,16 @@ export default function ExampleMultipleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -77,7 +86,16 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
index 97edd432c4d..adc1e8ae753 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
@@ -30,7 +30,7 @@ export default function ExampleMultipleCombobox() {
                         className="flex size-4 items-center justify-center border-0 bg-transparent p-0 text-inherit hover:bg-neutral-200 group-focus-within:hover:bg-neutral-700 dark:hover:bg-neutral-700 dark:group-focus-within:hover:bg-neutral-200"
                         aria-label={`Remove ${language.value}`}
                       >
-                        <XIcon className="size-3" />
+                        <XIcon />
                       </Combobox.ChipRemove>
                     </Combobox.Chip>
                   ))}
@@ -62,7 +62,7 @@ export default function ExampleMultipleCombobox() {
                   value={language}
                 >
                   <Combobox.ItemIndicator className="col-start-1">
-                    <CheckIcon className="size-3" />
+                    <CheckIcon />
                   </Combobox.ItemIndicator>
                   <span className="col-start-2">{language.value}</span>
                 </Combobox.Item>
@@ -77,7 +77,16 @@ export default function ExampleMultipleCombobox() {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -85,7 +94,16 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
index 21d1984c39e..4547bdce742 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
@@ -138,12 +138,6 @@
   grid-column-start: 1;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .Empty {
   box-sizing: border-box;
   font-size: 0.875rem;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
index 92509b91867..36ade052151 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
@@ -127,7 +127,7 @@ function VirtualizedList({
               }}
             >
               <Combobox.ItemIndicator className={styles.ItemIndicator}>
-                <CheckIcon className={styles.ItemIndicatorIcon} />
+                <CheckIcon />
               </Combobox.ItemIndicator>
               <span className={styles.ItemText}>{item.name}</span>
             </Combobox.Item>
@@ -140,7 +140,16 @@ function VirtualizedList({
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
index ded236fb7ed..9648b144ce6 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
@@ -130,7 +130,7 @@ function VirtualizedList({
               }}
             >
               <Combobox.ItemIndicator className="col-start-1">
-                <CheckIcon className="size-3" />
+                <CheckIcon />
               </Combobox.ItemIndicator>
               <span className="col-start-2">{item.name}</span>
             </Combobox.Item>
@@ -143,7 +143,16 @@ function VirtualizedList({
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
index f26efbc994b..1cc04054c24 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
@@ -185,11 +185,6 @@
   justify-content: space-between;
   gap: 1rem;
   padding-right: 1rem;
-
-  & svg {
-    width: 0.75rem;
-    height: 0.75rem;
-  }
 }
 
 .Separator {
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.tsx
index 26d239e21d9..293f1caa58b 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.tsx
@@ -49,7 +49,15 @@ export default function ExampleContextMenu() {
 
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
index fb373115df4..de6f4002940 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
@@ -21,7 +21,7 @@ export default function ExampleContextMenu() {
 
             <ContextMenu.SubmenuRoot>
               <ContextMenu.SubmenuTrigger className={submenuTriggerClass}>
-                Add to Playlist <ChevronRightIcon className="size-3" />
+                Add to Playlist <ChevronRightIcon />
               </ContextMenu.SubmenuTrigger>
               <ContextMenu.Portal>
                 <ContextMenu.Positioner className="outline-hidden" alignOffset={-4} sideOffset={-4}>
@@ -52,7 +52,15 @@ export default function ExampleContextMenu() {
 
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
index 3e2c51dddba..b36f14f60d5 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
@@ -258,11 +258,6 @@
   }
 }
 
-.CloseIcon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
 .Body {
   display: flex;
   flex-direction: column;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx
index 35ec71d9388..c0a127c5aa1 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx
@@ -23,7 +23,7 @@ export default function OutsideScrollDialog() {
                       past the bottom edge.
                     </Dialog.Description>
                     <Dialog.Close className={styles.Close} aria-label="Close">
-                      <XIcon className={styles.CloseIcon} />
+                      <XIcon />
                     </Dialog.Close>
                   </div>
 
@@ -63,7 +63,16 @@ export default function OutsideScrollDialog() {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index c5687579679..ff558e86de2 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -34,7 +34,7 @@ export default function OutsideScrollDialog() {
                       aria-label="Close"
                       className="absolute -top-1 -right-1 inline-flex items-center justify-center w-8 h-8 border-none bg-transparent p-0 text-neutral-950 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                     >
-                      <XIcon className="h-5 w-5" />
+                      <XIcon />
                     </Dialog.Close>
                   </div>
 
@@ -79,7 +79,16 @@ export default function OutsideScrollDialog() {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
index d2104c0fd6a..61a9022eb63 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
@@ -197,8 +197,3 @@
     }
   }
 }
-
-.CloseIcon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx
index 20b87a22b24..c14d6556858 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx
@@ -10,7 +10,7 @@ export default function ExampleUncontainedDialog() {
         <Dialog.Viewport className={styles.Viewport}>
           <Dialog.Popup className={styles.PopupRoot}>
             <Dialog.Close className={styles.Close} aria-label="Close">
-              <XIcon className={styles.CloseIcon} />
+              <XIcon />
             </Dialog.Close>
             <div className={styles.Popup} />
           </Dialog.Popup>
@@ -22,7 +22,16 @@ export default function ExampleUncontainedDialog() {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
index 36f59b72d1f..408d5a9f93c 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleUncontainedDialog() {
               className="absolute right-0 -top-10 flex h-8 w-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 xl:top-0 xl:h-10 xl:w-10 pointer-events-auto focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
               aria-label="Close"
             >
-              <XIcon className="h-5 w-5" />
+              <XIcon />
             </Dialog.Close>
             <div className="pointer-events-auto h-full w-full max-w-[70rem] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-starting-style/popup:scale-105" />
           </Dialog.Popup>
@@ -26,7 +26,16 @@ export default function ExampleUncontainedDialog() {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
index 722163be60b..ef0040fdae3 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
@@ -264,11 +264,6 @@
   }
 }
 
-.CloseIcon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
 .Title {
   margin: 0 0 0.25rem;
   font-size: 1rem;
@@ -287,10 +282,6 @@
   }
 }
 
-.ScrollArea {
-  padding-bottom: 2rem;
-}
-
 .List {
   list-style: none;
   padding: 0;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.tsx
index e678bc04b58..4c45e70a859 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.tsx
@@ -67,7 +67,7 @@ export default function ExampleDrawerMobileNav() {
                       <div aria-hidden className={styles.HeaderSpacer} />
                       <div className={styles.Handle} />
                       <Drawer.Close aria-label="Close menu" className={styles.CloseButton}>
-                        <XIcon className={styles.CloseIcon} />
+                        <XIcon />
                       </Drawer.Close>
                     </div>
 
@@ -115,7 +115,16 @@ export default function ExampleDrawerMobileNav() {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
index 585eb8d8fca..799d29258e7 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
@@ -77,7 +77,7 @@ export default function ExampleDrawerMobileNav() {
                         aria-label="Close menu"
                         className="flex h-9 w-9 items-center justify-center justify-self-end border-0 bg-transparent text-neutral-950 hover:bg-neutral-100 active:bg-neutral-200 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                       >
-                        <XIcon className="size-5" />
+                        <XIcon />
                       </Drawer.Close>
                     </div>
 
@@ -134,7 +134,16 @@ export default function ExampleDrawerMobileNav() {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
index 92008e03098..3cb202be91a 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
@@ -66,11 +66,6 @@
   }
 }
 
-.Icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
 .Container {
   display: flex;
   align-items: center;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
index 206f8474b3d..cfda48abbfb 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
@@ -5,7 +5,7 @@
   justify-content: center;
   gap: 0.375rem;
   height: 2rem;
-  padding: 0 0.75rem;
+  padding: 0 0.5rem 0 0.75rem;
   margin: 0;
   outline: 0;
   border: 1px solid var(--color-neutral-950);
@@ -71,12 +71,6 @@
   }
 }
 
-.ButtonIcon {
-  width: 0.75rem;
-  height: 0.75rem;
-  margin-right: -0.25rem;
-}
-
 .Positioner {
   outline: 0;
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.tsx
index e74507ddbe8..1b6a809a0a4 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.tsx
@@ -7,7 +7,7 @@ export default function MenuArrowDemo() {
   return (
     <Menu.Root>
       <Menu.Trigger className={styles.Button}>
-        Song <ChevronDownIcon className={styles.ButtonIcon} />
+        Song <ChevronDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner
@@ -33,7 +33,15 @@ export default function MenuArrowDemo() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
index ac9db7fb86c..a8c95125903 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
@@ -8,8 +8,8 @@ const itemClass =
 export default function MenuArrowDemo() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
-        Song <ChevronDownIcon className="size-3 -mr-1" />
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        Song <ChevronDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner
@@ -35,7 +35,15 @@ export default function MenuArrowDemo() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
index 27ce728eeb7..9fdd3a984a1 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
@@ -5,7 +5,7 @@
   justify-content: center;
   gap: 0.375rem;
   height: 2rem;
-  padding: 0 0.75rem;
+  padding: 0 0.5rem 0 0.75rem;
   margin: 0;
   outline: 0;
   border: 1px solid var(--color-neutral-950);
@@ -71,12 +71,6 @@
   }
 }
 
-.ButtonIcon {
-  width: 0.75rem;
-  height: 0.75rem;
-  margin-right: -0.25rem;
-}
-
 .Positioner {
   outline: 0;
 }
@@ -161,12 +155,6 @@
   grid-column-start: 1;
 }
 
-.CheckboxItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .CheckboxItemText {
   grid-column-start: 2;
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
index 7d87b550ac7..1b62d68ec06 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
@@ -11,7 +11,7 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className={styles.Button}>
-        Workspace <ChevronDownIcon className={styles.ButtonIcon} />
+        Workspace <ChevronDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
@@ -22,7 +22,7 @@ export default function ExampleMenu() {
               className={styles.CheckboxItem}
             >
               <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                <CheckboxCheckIcon className={styles.CheckboxItemIndicatorIcon} />
+                <CheckboxCheckIcon />
               </Menu.CheckboxItemIndicator>
               <span className={styles.CheckboxItemText}>Minimap</span>
             </Menu.CheckboxItem>
@@ -32,7 +32,7 @@ export default function ExampleMenu() {
               className={styles.CheckboxItem}
             >
               <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                <CheckboxCheckIcon className={styles.CheckboxItemIndicatorIcon} />
+                <CheckboxCheckIcon />
               </Menu.CheckboxItemIndicator>
               <span className={styles.CheckboxItemText}>Search</span>
             </Menu.CheckboxItem>
@@ -42,7 +42,7 @@ export default function ExampleMenu() {
               className={styles.CheckboxItem}
             >
               <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                <CheckboxCheckIcon className={styles.CheckboxItemIndicatorIcon} />
+                <CheckboxCheckIcon />
               </Menu.CheckboxItemIndicator>
               <span className={styles.CheckboxItemText}>Sidebar</span>
             </Menu.CheckboxItem>
@@ -55,7 +55,15 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -63,7 +71,16 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckboxCheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index 12b7023165d..ad4ae582dd1 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -12,8 +12,8 @@ export default function ExampleMenu() {
 
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
-        Workspace <ChevronDownIcon className="size-3 -mr-1" />
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        Workspace <ChevronDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
@@ -24,7 +24,7 @@ export default function ExampleMenu() {
               className={checkboxItemClass}
             >
               <Menu.CheckboxItemIndicator className="col-start-1">
-                <CheckboxCheckIcon className="size-3" />
+                <CheckboxCheckIcon />
               </Menu.CheckboxItemIndicator>
               <span className="col-start-2">Minimap</span>
             </Menu.CheckboxItem>
@@ -34,7 +34,7 @@ export default function ExampleMenu() {
               className={checkboxItemClass}
             >
               <Menu.CheckboxItemIndicator className="col-start-1">
-                <CheckboxCheckIcon className="size-3" />
+                <CheckboxCheckIcon />
               </Menu.CheckboxItemIndicator>
               <span className="col-start-2">Search</span>
             </Menu.CheckboxItem>
@@ -44,7 +44,7 @@ export default function ExampleMenu() {
               className={checkboxItemClass}
             >
               <Menu.CheckboxItemIndicator className="col-start-1">
-                <CheckboxCheckIcon className="size-3" />
+                <CheckboxCheckIcon />
               </Menu.CheckboxItemIndicator>
               <span className="col-start-2">Sidebar</span>
             </Menu.CheckboxItem>
@@ -57,7 +57,15 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -65,7 +73,16 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckboxCheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx
index 76280395a4d..cd19aa03c21 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx
@@ -9,7 +9,7 @@ export default function MenuDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
       <Menu.Trigger className={styles.IconButton} handle={demoMenu} aria-label="Project actions">
-        <DotsIcon className={styles.Icon} />
+        <DotsIcon />
       </Menu.Trigger>
 
       <Menu.Root handle={demoMenu}>
@@ -32,7 +32,16 @@ export default function MenuDetachedTriggersSimpleDemo() {
 
 function DotsIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1} {...props}>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1}
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <circle cx="5" cy="12" r="1" fill="currentColor" vectorEffect="non-scaling-stroke" />
       <circle cx="12" cy="12" r="1" fill="currentColor" vectorEffect="non-scaling-stroke" />
       <circle cx="19" cy="12" r="1" fill="currentColor" vectorEffect="non-scaling-stroke" />
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
index a80c4ecca38..ae66d54fba2 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
@@ -46,6 +46,7 @@ function DotsIcon(props: React.ComponentProps<'svg'>) {
       stroke="currentColor"
       strokeWidth={1}
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
       <circle cx="5" cy="12" r="1" fill="currentColor" vectorEffect="non-scaling-stroke" />
       <circle cx="12" cy="12" r="1" fill="currentColor" vectorEffect="non-scaling-stroke" />
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
index 53b77208d9d..80945556b8a 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
@@ -5,7 +5,7 @@
   justify-content: center;
   gap: 0.375rem;
   height: 2rem;
-  padding: 0 0.75rem;
+  padding: 0 0.5rem 0 0.75rem;
   margin: 0;
   outline: 0;
   border: 1px solid var(--color-neutral-950);
@@ -71,12 +71,6 @@
   }
 }
 
-.ButtonIcon {
-  width: 0.75rem;
-  height: 0.75rem;
-  margin-right: -0.25rem;
-}
-
 .Positioner {
   outline: 0;
 }
@@ -162,13 +156,6 @@
   grid-column-start: 1;
 }
 
-.CheckboxItemIndicatorIcon,
-.RadioItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .CheckboxItemText,
 .RadioItemText {
   grid-column-start: 2;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
index 25f751ca05f..b5c3c1249df 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className={styles.Button}>
-        View <ChevronDownIcon className={styles.ButtonIcon} />
+        View <ChevronDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
@@ -22,19 +22,19 @@ export default function ExampleMenu() {
               <Menu.RadioGroup value={value} onValueChange={setValue}>
                 <Menu.RadioItem className={styles.RadioItem} value="date">
                   <Menu.RadioItemIndicator className={styles.RadioItemIndicator}>
-                    <CheckboxCheckIcon className={styles.RadioItemIndicatorIcon} />
+                    <CheckboxCheckIcon />
                   </Menu.RadioItemIndicator>
                   <span className={styles.RadioItemText}>Date</span>
                 </Menu.RadioItem>
                 <Menu.RadioItem className={styles.RadioItem} value="name">
                   <Menu.RadioItemIndicator className={styles.RadioItemIndicator}>
-                    <CheckboxCheckIcon className={styles.RadioItemIndicatorIcon} />
+                    <CheckboxCheckIcon />
                   </Menu.RadioItemIndicator>
                   <span className={styles.RadioItemText}>Name</span>
                 </Menu.RadioItem>
                 <Menu.RadioItem className={styles.RadioItem} value="type">
                   <Menu.RadioItemIndicator className={styles.RadioItemIndicator}>
-                    <CheckboxCheckIcon className={styles.RadioItemIndicatorIcon} />
+                    <CheckboxCheckIcon />
                   </Menu.RadioItemIndicator>
                   <span className={styles.RadioItemText}>Type</span>
                 </Menu.RadioItem>
@@ -51,7 +51,7 @@ export default function ExampleMenu() {
                 className={styles.CheckboxItem}
               >
                 <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                  <CheckboxCheckIcon className={styles.CheckboxItemIndicatorIcon} />
+                  <CheckboxCheckIcon />
                 </Menu.CheckboxItemIndicator>
                 <span className={styles.CheckboxItemText}>Minimap</span>
               </Menu.CheckboxItem>
@@ -61,7 +61,7 @@ export default function ExampleMenu() {
                 className={styles.CheckboxItem}
               >
                 <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                  <CheckboxCheckIcon className={styles.CheckboxItemIndicatorIcon} />
+                  <CheckboxCheckIcon />
                 </Menu.CheckboxItemIndicator>
                 <span className={styles.CheckboxItemText}>Search</span>
               </Menu.CheckboxItem>
@@ -71,7 +71,7 @@ export default function ExampleMenu() {
                 className={styles.CheckboxItem}
               >
                 <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                  <CheckboxCheckIcon className={styles.CheckboxItemIndicatorIcon} />
+                  <CheckboxCheckIcon />
                 </Menu.CheckboxItemIndicator>
                 <span className={styles.CheckboxItemText}>Sidebar</span>
               </Menu.CheckboxItem>
@@ -85,7 +85,15 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -93,7 +101,16 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckboxCheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index 0a3d3a5cf05..fe0336e3403 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -13,8 +13,8 @@ export default function ExampleMenu() {
 
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
-        View <ChevronDownIcon className="size-3 -mr-1" />
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        View <ChevronDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
@@ -26,19 +26,19 @@ export default function ExampleMenu() {
               <Menu.RadioGroup value={value} onValueChange={setValue}>
                 <Menu.RadioItem value="date" className={itemClass}>
                   <Menu.RadioItemIndicator className="col-start-1">
-                    <CheckboxCheckIcon className="size-3" />
+                    <CheckboxCheckIcon />
                   </Menu.RadioItemIndicator>
                   <span className="col-start-2">Date</span>
                 </Menu.RadioItem>
                 <Menu.RadioItem value="name" className={itemClass}>
                   <Menu.RadioItemIndicator className="col-start-1">
-                    <CheckboxCheckIcon className="size-3" />
+                    <CheckboxCheckIcon />
                   </Menu.RadioItemIndicator>
                   <span className="col-start-2">Name</span>
                 </Menu.RadioItem>
                 <Menu.RadioItem value="type" className={itemClass}>
                   <Menu.RadioItemIndicator className="col-start-1">
-                    <CheckboxCheckIcon className="size-3" />
+                    <CheckboxCheckIcon />
                   </Menu.RadioItemIndicator>
                   <span className="col-start-2">Type</span>
                 </Menu.RadioItem>
@@ -57,7 +57,7 @@ export default function ExampleMenu() {
                 className={itemClass}
               >
                 <Menu.CheckboxItemIndicator className="col-start-1">
-                  <CheckboxCheckIcon className="size-3" />
+                  <CheckboxCheckIcon />
                 </Menu.CheckboxItemIndicator>
                 <span className="col-start-2">Minimap</span>
               </Menu.CheckboxItem>
@@ -67,7 +67,7 @@ export default function ExampleMenu() {
                 className={itemClass}
               >
                 <Menu.CheckboxItemIndicator className="col-start-1">
-                  <CheckboxCheckIcon className="size-3" />
+                  <CheckboxCheckIcon />
                 </Menu.CheckboxItemIndicator>
                 <span className="col-start-2">Search</span>
               </Menu.CheckboxItem>
@@ -77,7 +77,7 @@ export default function ExampleMenu() {
                 className={itemClass}
               >
                 <Menu.CheckboxItemIndicator className="col-start-1">
-                  <CheckboxCheckIcon className="size-3" />
+                  <CheckboxCheckIcon />
                 </Menu.CheckboxItemIndicator>
                 <span className="col-start-2">Sidebar</span>
               </Menu.CheckboxItem>
@@ -91,7 +91,15 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -99,7 +107,16 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckboxCheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
index 3e43bcf3965..5f10ae4a6e4 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
@@ -5,7 +5,7 @@
   justify-content: center;
   gap: 0.375rem;
   height: 2rem;
-  padding: 0 0.75rem;
+  padding: 0 0.5rem 0 0.75rem;
   margin: 0;
   outline: 0;
   border: 1px solid var(--color-neutral-950);
@@ -71,12 +71,6 @@
   }
 }
 
-.ButtonIcon {
-  width: 0.75rem;
-  height: 0.75rem;
-  margin-right: -0.25rem;
-}
-
 .Positioner {
   outline: 0;
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx
index c4b1082ce93..f7184b22c35 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className={styles.Button}>
-        Song <ChevronDownIcon className={styles.ButtonIcon} />
+        Song <ChevronDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
@@ -28,7 +28,15 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
index 8900a3119b8..8e907436467 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
@@ -7,8 +7,8 @@ const itemClass =
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
-        Song <ChevronDownIcon className="size-3 -mr-1" />
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        Song <ChevronDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
@@ -30,7 +30,15 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
index 3e43bcf3965..5f10ae4a6e4 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
@@ -5,7 +5,7 @@
   justify-content: center;
   gap: 0.375rem;
   height: 2rem;
-  padding: 0 0.75rem;
+  padding: 0 0.5rem 0 0.75rem;
   margin: 0;
   outline: 0;
   border: 1px solid var(--color-neutral-950);
@@ -71,12 +71,6 @@
   }
 }
 
-.ButtonIcon {
-  width: 0.75rem;
-  height: 0.75rem;
-  margin-right: -0.25rem;
-}
-
 .Positioner {
   outline: 0;
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx
index db9f3208ac5..78e23b94463 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger openOnHover className={styles.Button}>
-        Add to playlist <ChevronDownIcon className={styles.ButtonIcon} />
+        Add to playlist <ChevronDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
@@ -25,7 +25,15 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
index 755511d8e8d..15e6d6d8d21 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
@@ -9,9 +9,9 @@ export default function ExampleMenu() {
     <Menu.Root>
       <Menu.Trigger
         openOnHover
-        className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+        className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
-        Add to playlist <ChevronDownIcon className="size-3 -mr-1" />
+        Add to playlist <ChevronDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
@@ -30,7 +30,15 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
index 556a043357e..8c63a0fc660 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
@@ -5,7 +5,7 @@
   justify-content: center;
   gap: 0.375rem;
   height: 2rem;
-  padding: 0 0.75rem;
+  padding: 0 0.5rem 0 0.75rem;
   margin: 0;
   outline: 0;
   border: 1px solid var(--color-neutral-950);
@@ -71,12 +71,6 @@
   }
 }
 
-.ButtonIcon {
-  width: 0.75rem;
-  height: 0.75rem;
-  margin-right: -0.25rem;
-}
-
 .Positioner {
   outline: 0;
 }
@@ -160,12 +154,6 @@
   grid-column-start: 1;
 }
 
-.RadioItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .RadioItemText {
   grid-column-start: 2;
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
index 28c015954b0..dd6014a406f 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className={styles.Button}>
-        Sort <ChevronDownIcon className={styles.ButtonIcon} />
+        Sort <ChevronDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
@@ -16,19 +16,19 @@ export default function ExampleMenu() {
             <Menu.RadioGroup value={value} onValueChange={setValue}>
               <Menu.RadioItem className={styles.RadioItem} value="date">
                 <Menu.RadioItemIndicator className={styles.RadioItemIndicator}>
-                  <CheckIcon className={styles.RadioItemIndicatorIcon} />
+                  <CheckIcon />
                 </Menu.RadioItemIndicator>
                 <span className={styles.RadioItemText}>Date</span>
               </Menu.RadioItem>
               <Menu.RadioItem className={styles.RadioItem} value="name">
                 <Menu.RadioItemIndicator className={styles.RadioItemIndicator}>
-                  <CheckIcon className={styles.RadioItemIndicatorIcon} />
+                  <CheckIcon />
                 </Menu.RadioItemIndicator>
                 <span className={styles.RadioItemText}>Name</span>
               </Menu.RadioItem>
               <Menu.RadioItem className={styles.RadioItem} value="type">
                 <Menu.RadioItemIndicator className={styles.RadioItemIndicator}>
-                  <CheckIcon className={styles.RadioItemIndicatorIcon} />
+                  <CheckIcon />
                 </Menu.RadioItemIndicator>
                 <span className={styles.RadioItemText}>Type</span>
               </Menu.RadioItem>
@@ -42,7 +42,15 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -50,7 +58,16 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index bb984296c17..5c8b804f7b1 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -9,8 +9,8 @@ export default function ExampleMenu() {
   const [value, setValue] = React.useState('date');
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
-        Sort <ChevronDownIcon className="size-3 -mr-1" />
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        Sort <ChevronDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
@@ -18,19 +18,19 @@ export default function ExampleMenu() {
             <Menu.RadioGroup value={value} onValueChange={setValue}>
               <Menu.RadioItem value="date" className={radioItemClass}>
                 <Menu.RadioItemIndicator className="col-start-1">
-                  <CheckIcon className="size-3" />
+                  <CheckIcon />
                 </Menu.RadioItemIndicator>
                 <span className="col-start-2">Date</span>
               </Menu.RadioItem>
               <Menu.RadioItem value="name" className={radioItemClass}>
                 <Menu.RadioItemIndicator className="col-start-1">
-                  <CheckIcon className="size-3" />
+                  <CheckIcon />
                 </Menu.RadioItemIndicator>
                 <span className="col-start-2">Name</span>
               </Menu.RadioItem>
               <Menu.RadioItem value="type" className={radioItemClass}>
                 <Menu.RadioItemIndicator className="col-start-1">
-                  <CheckIcon className="size-3" />
+                  <CheckIcon />
                 </Menu.RadioItemIndicator>
                 <span className="col-start-2">Type</span>
               </Menu.RadioItem>
@@ -44,7 +44,15 @@ export default function ExampleMenu() {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -52,7 +60,16 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
index e18043bb86c..3459c3c6786 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
@@ -5,7 +5,7 @@
   justify-content: center;
   gap: 0.375rem;
   height: 2rem;
-  padding: 0 0.75rem;
+  padding: 0 0.5rem 0 0.75rem;
   margin: 0;
   outline: 0;
   border: 1px solid var(--color-neutral-950);
@@ -71,12 +71,6 @@
   }
 }
 
-.ButtonIcon {
-  width: 0.75rem;
-  height: 0.75rem;
-  margin-right: -0.25rem;
-}
-
 .Positioner {
   outline: 0;
 }
@@ -184,11 +178,6 @@
   justify-content: space-between;
   gap: 1rem;
   padding-right: 1rem;
-
-  & svg {
-    width: 0.75rem;
-    height: 0.75rem;
-  }
 }
 
 .Separator {
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx
index 29ad072f0e0..545a9f6ca58 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className={styles.Button}>
-        Song <ChevronDownIcon className={styles.ButtonIcon} />
+        Song <ChevronDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
@@ -55,7 +55,15 @@ function getOffset({ side }: { side: Menu.Positioner.Props['side'] }) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -63,7 +71,15 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
index d7bff846008..5d3250def24 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
@@ -12,8 +12,8 @@ const submenuTriggerClass =
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
-        Song <ChevronDownIcon className="size-3 -mr-1" />
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        Song <ChevronDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
@@ -22,7 +22,7 @@ export default function ExampleMenu() {
 
             <Menu.SubmenuRoot>
               <Menu.SubmenuTrigger className={submenuTriggerClass}>
-                Add to Playlist <ChevronRightIcon className="size-3" />
+                Add to Playlist <ChevronRightIcon />
               </Menu.SubmenuTrigger>
               <Menu.Portal>
                 <Menu.Positioner
@@ -64,7 +64,15 @@ function getOffset({ side }: { side: Menu.Positioner.Props['side'] }) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -72,7 +80,15 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
index c99debd7cd7..ad98a02f5b0 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
@@ -165,11 +165,6 @@
       background-color: white;
     }
   }
-
-  & svg {
-    width: 0.75rem;
-    height: 0.75rem;
-  }
 }
 
 .MenuSeparator {
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
index 4246355e5f5..ff2a20bd9ca 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
@@ -137,7 +137,15 @@ function handleClick(event: React.MouseEvent<HTMLElement>) {
 
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
index f97828218e5..55990fbd505 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
@@ -35,7 +35,7 @@ export default function ExampleMenubar() {
               <Menu.SubmenuRoot>
                 <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white">
                   Export
-                  <ChevronRightIcon className="size-3" />
+                  <ChevronRightIcon />
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
                   <Menu.Positioner className="outline-none" sideOffset={-4} alignOffset={-4}>
@@ -128,7 +128,7 @@ export default function ExampleMenubar() {
               <Menu.SubmenuRoot>
                 <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white">
                   Layout
-                  <ChevronRightIcon className="size-3" />
+                  <ChevronRightIcon />
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
                   <Menu.Positioner className="outline-none" sideOffset={-4} alignOffset={-4}>
@@ -184,7 +184,15 @@ function handleClick(event: React.MouseEvent<HTMLElement>) {
 
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
index c23d8ece45f..f0c80b42790 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
@@ -77,18 +77,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 0.75rem;
-  height: 0.75rem;
   transition: transform 150ms ease;
 
   &[data-popup-open] {
     transform: rotate(180deg);
   }
-
-  & svg {
-    width: 100%;
-    height: 100%;
-  }
 }
 
 .Positioner {
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx
index 999fb53d56f..64ced0a8d1f 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx
@@ -88,7 +88,15 @@ function Link(props: NavigationMenu.Link.Props) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
index f079f96d55b..050e0b3becf 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={triggerClassName}>
             Overview
             <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
-              <ChevronDownIcon className="size-3" />
+              <ChevronDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
@@ -33,7 +33,7 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={triggerClassName}>
             Handbook
             <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
-              <ChevronDownIcon className="size-3" />
+              <ChevronDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
@@ -97,7 +97,15 @@ function Link(props: NavigationMenu.Link.Props) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
index b9dd1db0351..0d46bfb72cf 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
@@ -77,18 +77,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 0.75rem;
-  height: 0.75rem;
   transition: transform 150ms ease;
 
   &[data-popup-open] {
     transform: rotate(180deg);
   }
-
-  & svg {
-    width: 100%;
-    height: 100%;
-  }
 }
 
 .Positioner {
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx
index ff5165595a9..ec63c9b6ba1 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx
@@ -131,7 +131,15 @@ function Link(props: NavigationMenu.Link.Props) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
index 7126aaeed8b..cc0157a562f 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={triggerClassName}>
             Product
             <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
-              <ChevronDownIcon className="size-3" />
+              <ChevronDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
@@ -69,7 +69,7 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={triggerClassName}>
             Learn
             <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
-              <ChevronDownIcon className="size-3" />
+              <ChevronDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
@@ -147,7 +147,15 @@ function Link(props: NavigationMenu.Link.Props) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
index 2aedd19f5b3..e7315019bfc 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
@@ -77,18 +77,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 0.75rem;
-  height: 0.75rem;
   transition: transform 150ms ease;
 
   &[data-popup-open] {
     transform: rotate(180deg);
   }
-
-  & svg {
-    width: 100%;
-    height: 100%;
-  }
 }
 
 .Positioner {
@@ -360,17 +353,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 0.6rem;
-  height: 0.6rem;
   margin-top: -0.3rem;
   transition: transform 0.2s ease;
 
   &[data-popup-open] {
     transform: rotate(180deg);
   }
-
-  & svg {
-    width: 100%;
-    height: 100%;
-  }
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx
index edf6a231ccf..3306cc4d9c0 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx
@@ -101,7 +101,15 @@ function Link(props: NavigationMenu.Link.Props) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -109,7 +117,15 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.5 1L7.5 5L3.5 9" stroke="currentColor" strokeWidth="1" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
index b2dc6f9184c..7adf8f7fa66 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={triggerClassName}>
             Overview
             <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
-              <ChevronDownIcon className="size-3" />
+              <ChevronDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
@@ -33,8 +33,8 @@ export default function ExampleNavigationMenu() {
                       <p className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
                         How to use Base UI effectively.
                       </p>
-                      <NavigationMenu.Icon className="absolute top-1/2 right-2.5 flex h-2.5 w-2.5 -translate-y-1/2 items-center justify-center transition-transform duration-200 ease-in-out data-popup-open:rotate-180">
-                        <ChevronRightIcon className="size-2.5" />
+                      <NavigationMenu.Icon className="absolute top-1/2 right-2.5 flex -translate-y-1/2 items-center justify-center transition-transform duration-200 ease-in-out data-popup-open:rotate-180">
+                        <ChevronRightIcon />
                       </NavigationMenu.Icon>
                     </NavigationMenu.Trigger>
                     <NavigationMenu.Content className={contentClassName}>
@@ -115,7 +115,15 @@ function Link(props: NavigationMenu.Link.Props) {
 
 function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -123,7 +131,15 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.5 1L7.5 5L3.5 9" stroke="currentColor" strokeWidth="1" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
index 9846ca0ea39..4122798f18d 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
@@ -123,11 +123,6 @@
       border-color: var(--color-neutral-400);
     }
   }
-
-  svg {
-    width: 0.75rem;
-    height: 0.75rem;
-  }
 }
 
 .Decrement {
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx
index b124e5d61d8..6818f8814b2 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx
@@ -30,7 +30,15 @@ export default function ExampleNumberField() {
 
 function CursorGrowIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="26" height="14" viewBox="0 0 24 14" fill="black" stroke="white" {...props}>
+    <svg
+      width="26"
+      height="14"
+      viewBox="0 0 24 14"
+      fill="black"
+      stroke="white"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z" />
     </svg>
   );
@@ -38,7 +46,16 @@ function CursorGrowIcon(props: React.ComponentProps<'svg'>) {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
       <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -47,7 +64,16 @@ function PlusIcon(props: React.ComponentProps<'svg'>) {
 
 function MinusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
index 5dd13f8cc9e..007043178aa 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
@@ -22,11 +22,11 @@ export default function ExampleNumberField() {
 
       <NumberField.Group className="flex h-8">
         <NumberField.Decrement className={`${stepperClasses} border-r-0`}>
-          <MinusIcon className="size-3" />
+          <MinusIcon />
         </NumberField.Decrement>
         <NumberField.Input className="h-full w-[7ch] border border-neutral-950 rounded-none bg-white px-2 text-left text-sm any-pointer-coarse:text-base font-normal text-neutral-950 tabular-nums focus:z-1 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:bg-neutral-950 dark:text-white" />
         <NumberField.Increment className={`${stepperClasses} border-l-0`}>
-          <PlusIcon className="size-3" />
+          <PlusIcon />
         </NumberField.Increment>
       </NumberField.Group>
     </NumberField.Root>
@@ -35,7 +35,15 @@ export default function ExampleNumberField() {
 
 function CursorGrowIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="26" height="14" viewBox="0 0 24 14" fill="black" stroke="white" {...props}>
+    <svg
+      width="26"
+      height="14"
+      viewBox="0 0 24 14"
+      fill="black"
+      stroke="white"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z" />
     </svg>
   );
@@ -43,7 +51,16 @@ function CursorGrowIcon(props: React.ComponentProps<'svg'>) {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
       <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -52,7 +69,16 @@ function PlusIcon(props: React.ComponentProps<'svg'>) {
 
 function MinusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index 98f13f6637b..0ac7d399655 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -101,11 +101,6 @@
 
 .SelectIcon {
   display: flex;
-
-  & svg {
-    width: 0.75rem;
-    height: 0.75rem;
-  }
 }
 
 .Positioner {
@@ -145,7 +140,7 @@
     transition: none;
     transform: translateY(1px);
     opacity: 1;
-    min-width: calc(var(--anchor-width) + 1rem);
+    min-width: calc(var(--anchor-width) + 1.5rem);
   }
 }
 
@@ -194,10 +189,6 @@
   cursor: default;
   user-select: none;
 
-  [data-side='none'] & {
-    padding-right: 3rem;
-  }
-
   &[data-highlighted] {
     background-color: var(--color-neutral-950);
     color: white;
@@ -213,12 +204,6 @@
   grid-column-start: 1;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .ItemText {
   grid-column-start: 2;
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
index 0487857fe5a..5f5e61dd022 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
@@ -30,7 +30,7 @@ export default function ExampleSelectGrouped() {
                       {group.items.map((item) => (
                         <Select.Item key={item.value} value={item.value} className={styles.Item}>
                           <Select.ItemIndicator className={styles.ItemIndicator}>
-                            <CheckIcon className={styles.ItemIndicatorIcon} />
+                            <CheckIcon />
                           </Select.ItemIndicator>
                           <Select.ItemText className={styles.ItemText}>
                             {item.label}
@@ -55,7 +55,16 @@ export default function ExampleSelectGrouped() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
       <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -64,7 +73,16 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index 354354d8eaa..eb09a93158c 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -19,7 +19,7 @@ export default function ExampleSelectGrouped() {
             placeholder="Select produce"
           />
           <Select.Icon className="flex">
-            <ChevronUpDownIcon className="size-3" />
+            <ChevronUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
@@ -42,7 +42,7 @@ export default function ExampleSelectGrouped() {
                           className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none group-data-[side=none]:pr-12 data-highlighted:bg-neutral-950 data-highlighted:text-white dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
                         >
                           <Select.ItemIndicator className="col-start-1">
-                            <CheckIcon className="size-3" />
+                            <CheckIcon />
                           </Select.ItemIndicator>
                           <Select.ItemText className="col-start-2">{item.label}</Select.ItemText>
                         </Select.Item>
@@ -67,7 +67,16 @@ export default function ExampleSelectGrouped() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
       <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -76,7 +85,16 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
index fe1a5ee00c3..5a634227a5c 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
@@ -101,11 +101,6 @@
 
 .SelectIcon {
   display: flex;
-
-  & svg {
-    width: 0.75rem;
-    height: 0.75rem;
-  }
 }
 
 .Positioner {
@@ -188,12 +183,6 @@
   grid-column-start: 1;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .ItemText {
   grid-column-start: 2;
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
index 8105c97af91..c64654b6297 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
@@ -29,7 +29,7 @@ export default function ExampleSelect() {
                 {apples.map(({ label, value }) => (
                   <Select.Item key={label} value={value} className={styles.Item}>
                     <Select.ItemIndicator className={styles.ItemIndicator}>
-                      <CheckIcon className={styles.ItemIndicatorIcon} />
+                      <CheckIcon />
                     </Select.ItemIndicator>
                     <Select.ItemText className={styles.ItemText}>{label}</Select.ItemText>
                   </Select.Item>
@@ -46,7 +46,16 @@ export default function ExampleSelect() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
       <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -55,7 +64,16 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index 35d4e26f926..b8c04bb07a9 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -22,7 +22,7 @@ export default function ExampleSelect() {
             placeholder="Select apple"
           />
           <Select.Icon className="flex">
-            <ChevronUpDownIcon className="size-3" />
+            <ChevronUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
@@ -39,7 +39,7 @@ export default function ExampleSelect() {
                     className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none data-highlighted:bg-neutral-950 data-highlighted:text-white dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
                   >
                     <Select.ItemIndicator className="col-start-1">
-                      <CheckIcon className="size-3" />
+                      <CheckIcon />
                     </Select.ItemIndicator>
                     <Select.ItemText className="col-start-2">{label}</Select.ItemText>
                   </Select.Item>
@@ -58,7 +58,16 @@ export default function ExampleSelect() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
       <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -67,7 +76,16 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
index 0d9789e1113..a904696f864 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
@@ -101,11 +101,6 @@
 
 .SelectIcon {
   display: flex;
-
-  & svg {
-    width: 0.75rem;
-    height: 0.75rem;
-  }
 }
 
 .Positioner {
@@ -184,12 +179,6 @@
   grid-column-start: 1;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .ItemText {
   grid-column-start: 2;
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
index 44230242190..437af3a0b28 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
@@ -51,7 +51,7 @@ export default function MultiSelectExample() {
               {values.map((value) => (
                 <Select.Item key={value} value={value} className={styles.Item}>
                   <Select.ItemIndicator className={styles.ItemIndicator}>
-                    <CheckIcon className={styles.ItemIndicatorIcon} />
+                    <CheckIcon />
                   </Select.ItemIndicator>
                   <Select.ItemText className={styles.ItemText}>{languages[value]}</Select.ItemText>
                 </Select.Item>
@@ -66,7 +66,16 @@ export default function MultiSelectExample() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
       <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -75,7 +84,16 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index 91457a62b02..f6c48e1101a 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -41,7 +41,7 @@ export default function MultiSelectExample() {
             {renderValue}
           </Select.Value>
           <Select.Icon className="flex">
-            <ChevronUpDownIcon className="size-3" />
+            <ChevronUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
@@ -58,7 +58,7 @@ export default function MultiSelectExample() {
                   className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-2.5 pl-2.5 text-sm outline-hidden select-none scroll-my-1 [@media(hover:hover)]:data-highlighted:bg-neutral-950 [@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:bg-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950"
                 >
                   <Select.ItemIndicator className="col-start-1">
-                    <CheckIcon className="size-3" />
+                    <CheckIcon />
                   </Select.ItemIndicator>
                   <Select.ItemText className="col-start-2">{languages[value]}</Select.ItemText>
                 </Select.Item>
@@ -73,7 +73,16 @@ export default function MultiSelectExample() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
       <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -82,7 +91,16 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
index cfefd50ef23..89c6a124fc5 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
@@ -118,11 +118,6 @@
   display: flex;
   align-items: center;
   align-self: center;
-
-  & svg {
-    width: 0.75rem;
-    height: 0.75rem;
-  }
 }
 
 .Positioner {
@@ -221,12 +216,6 @@
   top: 0.4em;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .ItemText {
   grid-column-start: 2;
   display: flex;
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
index 681f5040d0b..1aa3abe7ef4 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
@@ -31,7 +31,7 @@ export default function ObjectValueSelect() {
                 {shippingMethods.map((method) => (
                   <Select.Item key={method.id} value={method} className={styles.Item}>
                     <Select.ItemIndicator className={styles.ItemIndicator}>
-                      <CheckIcon className={styles.ItemIndicatorIcon} />
+                      <CheckIcon />
                     </Select.ItemIndicator>
                     <Select.ItemText className={styles.ItemText}>
                       <span className={styles.ItemLabel}>{method.name}</span>
@@ -53,7 +53,16 @@ export default function ObjectValueSelect() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
       <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -62,7 +71,16 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index 33797553420..2733ae243b9 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -21,7 +21,7 @@ export default function ObjectValueSelect() {
             )}
           </Select.Value>
           <Select.Icon className="flex items-center self-center">
-            <ChevronUpDownIcon className="size-3" />
+            <ChevronUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
@@ -38,7 +38,7 @@ export default function ObjectValueSelect() {
                     className="group/item grid cursor-default grid-cols-[0.75rem_1fr] items-start gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none [@media(hover:hover)]:data-highlighted:bg-neutral-950 [@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:bg-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950"
                   >
                     <Select.ItemIndicator className="col-start-1 flex items-center justify-center self-start relative top-[0.4em]">
-                      <CheckIcon className="size-3" />
+                      <CheckIcon />
                     </Select.ItemIndicator>
                     <Select.ItemText className="col-start-2 flex flex-col gap-0.5">
                       <span className="text-sm">{method.name}</span>
@@ -62,7 +62,16 @@ export default function ObjectValueSelect() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
       <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -71,7 +80,16 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
index 84cf9864e36..c788fe22e93 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
@@ -293,6 +293,7 @@
 
 .Arrow {
   display: block;
+  position: relative;
   width: 12px;
   height: 6px;
   overflow: clip;
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
index 12ddcdc5018..2080fd9adf9 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
@@ -70,7 +70,7 @@ function CopyButton() {
         aria-label="Copy to clipboard"
         render={<Button disabled={copied} focusableWhenDisabled />}
       >
-        {copied ? <CheckIcon className={styles.Icon} /> : <ClipboardIcon className={styles.Icon} />}
+        {copied ? <CheckIcon /> : <ClipboardIcon />}
       </Tooltip.Trigger>
       <Tooltip.Portal>
         <Tooltip.Positioner sideOffset={10}>
@@ -127,7 +127,16 @@ function StackedToasts() {
 
 function ClipboardIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
       <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
     </svg>
@@ -136,7 +145,16 @@ function ClipboardIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index 23f35bb8f89..2dc78ba654e 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -73,7 +73,7 @@ function CopyButton() {
         aria-label="Copy to clipboard"
         render={<Button disabled={copied} focusableWhenDisabled />}
       >
-        {copied ? <CheckIcon className="h-4 w-4" /> : <ClipboardIcon className="h-4 w-4" />}
+        {copied ? <CheckIcon /> : <ClipboardIcon />}
       </Tooltip.Trigger>
       <Tooltip.Portal>
         <Tooltip.Positioner sideOffset={10}>
@@ -143,7 +143,16 @@ function StackedToasts() {
 
 function ClipboardIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
       <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
     </svg>
@@ -152,7 +161,16 @@ function ClipboardIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
index d89019d426e..2f04ebacb65 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
@@ -77,8 +77,3 @@
     }
   }
 }
-
-.Icon {
-  width: 1rem;
-  height: 1rem;
-}
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.tsx
index b88676bd4fe..ffd1cd4ee33 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.tsx
@@ -7,13 +7,13 @@ export default function ExampleToggleGroup() {
   return (
     <ToggleGroup defaultValue={['left']} className={styles.Panel}>
       <Toggle aria-label="Align left" value="left" className={styles.Button}>
-        <AlignLeftIcon className={styles.Icon} />
+        <AlignLeftIcon />
       </Toggle>
       <Toggle aria-label="Align center" value="center" className={styles.Button}>
-        <AlignCenterIcon className={styles.Icon} />
+        <AlignCenterIcon />
       </Toggle>
       <Toggle aria-label="Align right" value="right" className={styles.Button}>
-        <AlignRightIcon className={styles.Icon} />
+        <AlignRightIcon />
       </Toggle>
     </ToggleGroup>
   );
@@ -21,7 +21,14 @@ export default function ExampleToggleGroup() {
 
 function AlignLeftIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" stroke="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M2.5 3.5H13.5" />
       <path d="M2.5 9.5H13.5" />
       <path d="M2.5 6.5H10.5" />
@@ -32,7 +39,14 @@ function AlignLeftIcon(props: React.ComponentProps<'svg'>) {
 
 function AlignCenterIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" stroke="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3 3.5H14" />
       <path d="M3 9.5H14" />
       <path d="M4.5 6.5H12.5" />
@@ -43,7 +57,14 @@ function AlignCenterIcon(props: React.ComponentProps<'svg'>) {
 
 function AlignRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" stroke="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M2.5 3.5H13.5" />
       <path d="M2.5 9.5H13.5" />
       <path d="M5.5 6.5H13.5" />
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
index ecb4c9d2661..d6006bd5cae 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
@@ -13,21 +13,21 @@ export default function ExampleToggleGroup() {
         value="left"
         className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
-        <AlignLeftIcon className="size-4" />
+        <AlignLeftIcon />
       </Toggle>
       <Toggle
         aria-label="Align center"
         value="center"
         className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
-        <AlignCenterIcon className="size-4" />
+        <AlignCenterIcon />
       </Toggle>
       <Toggle
         aria-label="Align right"
         value="right"
         className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
-        <AlignRightIcon className="size-4" />
+        <AlignRightIcon />
       </Toggle>
     </ToggleGroup>
   );
@@ -35,7 +35,14 @@ export default function ExampleToggleGroup() {
 
 function AlignLeftIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" stroke="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M2.5 3.5H13.5" />
       <path d="M2.5 9.5H13.5" />
       <path d="M2.5 6.5H10.5" />
@@ -46,7 +53,14 @@ function AlignLeftIcon(props: React.ComponentProps<'svg'>) {
 
 function AlignCenterIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" stroke="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3 3.5H14" />
       <path d="M3 9.5H14" />
       <path d="M4.5 6.5H12.5" />
@@ -57,7 +71,14 @@ function AlignCenterIcon(props: React.ComponentProps<'svg'>) {
 
 function AlignRightIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" stroke="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M2.5 3.5H13.5" />
       <path d="M2.5 9.5H13.5" />
       <path d="M5.5 6.5H13.5" />
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
index d89019d426e..2f04ebacb65 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
@@ -77,8 +77,3 @@
     }
   }
 }
-
-.Icon {
-  width: 1rem;
-  height: 1rem;
-}
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.tsx
index 7bf15377475..ac5d5041ace 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.tsx
@@ -11,13 +11,13 @@ export default function ExampleToggleGroupMultiple() {
       className={styles.Panel}
     >
       <Toggle aria-label="Bold" value="bold" className={styles.Button}>
-        <BoldIcon className={styles.Icon} />
+        <BoldIcon />
       </Toggle>
       <Toggle aria-label="Italic" value="italic" className={styles.Button}>
-        <ItalicIcon className={styles.Icon} />
+        <ItalicIcon />
       </Toggle>
       <Toggle aria-label="Underline" value="underline" className={styles.Button}>
-        <UnderlineIcon className={styles.Icon} />
+        <UnderlineIcon />
       </Toggle>
     </ToggleGroup>
   );
@@ -25,7 +25,14 @@ export default function ExampleToggleGroupMultiple() {
 
 function BoldIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.73353 2.13333C3.4386 2.13333 3.2002 2.37226 3.2002 2.66666C3.2002 2.96106 3.4386 3.2 3.73353 3.2H4.26686V12.8H3.73353C3.4386 12.8 3.2002 13.0389 3.2002 13.3333C3.2002 13.6277 3.4386 13.8667 3.73353 13.8667H9.86686C11.7783 13.8667 13.3335 12.3115 13.3335 10.4C13.3335 8.9968 12.4945 7.78881 11.2929 7.24375C11.8897 6.70615 12.2669 5.93066 12.2669 5.06666C12.2669 3.44906 10.9506 2.13333 9.33353 2.13333H3.73353ZM6.93353 3.2H8.26686C9.29619 3.2 10.1335 4.03733 10.1335 5.06666C10.1335 6.096 9.29619 6.93333 8.26686 6.93333H6.93353V3.2ZM6.93353 8H7.73353H8.26686C9.59006 8 10.6669 9.0768 10.6669 10.4C10.6669 11.7232 9.59006 12.8 8.26686 12.8H6.93353V8Z" />
     </svg>
   );
@@ -33,7 +40,14 @@ function BoldIcon(props: React.ComponentProps<'svg'>) {
 
 function ItalicIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M8.52599 2.12186C8.48583 2.12267 8.44578 2.1265 8.4062 2.13332H6.93328C6.86261 2.13232 6.79244 2.14538 6.72686 2.17173C6.66127 2.19808 6.60158 2.23721 6.55125 2.28683C6.50092 2.33646 6.46096 2.39559 6.43368 2.46079C6.4064 2.526 6.39235 2.59597 6.39235 2.66665C6.39235 2.73733 6.4064 2.80731 6.43368 2.87251C6.46096 2.93772 6.50092 2.99685 6.55125 3.04647C6.60158 3.0961 6.66127 3.13522 6.72686 3.16157C6.79244 3.18793 6.86261 3.20099 6.93328 3.19999H7.70099L6.69057 12.8H5.86661C5.79594 12.799 5.72577 12.812 5.66019 12.8384C5.59461 12.8648 5.53492 12.9039 5.48459 12.9535C5.43425 13.0031 5.39429 13.0623 5.36701 13.1275C5.33973 13.1927 5.32568 13.2626 5.32568 13.3333C5.32568 13.404 5.33973 13.474 5.36701 13.5392C5.39429 13.6044 5.43425 13.6635 5.48459 13.7131C5.53492 13.7628 5.59461 13.8019 5.66019 13.8282C5.72577 13.8546 5.79594 13.8677 5.86661 13.8667H9.06661C9.13729 13.8677 9.20745 13.8546 9.27304 13.8282C9.33862 13.8019 9.39831 13.7628 9.44864 13.7131C9.49897 13.6635 9.53894 13.6044 9.56622 13.5392C9.5935 13.474 9.60754 13.404 9.60754 13.3333C9.60754 13.2626 9.5935 13.1927 9.56622 13.1275C9.53894 13.0623 9.49897 13.0031 9.44864 12.9535C9.39831 12.9039 9.33862 12.8648 9.27304 12.8384C9.20745 12.812 9.13729 12.799 9.06661 12.8H8.2989L9.30932 3.19999H10.1333C10.204 3.20099 10.2741 3.18793 10.3397 3.16157C10.4053 3.13522 10.465 3.0961 10.5153 3.04647C10.5656 2.99685 10.6056 2.93772 10.6329 2.87251C10.6602 2.80731 10.6742 2.73733 10.6742 2.66665C10.6742 2.59597 10.6602 2.526 10.6329 2.46079C10.6056 2.39559 10.5656 2.33646 10.5153 2.28683C10.465 2.23721 10.4053 2.19808 10.3397 2.17173C10.2741 2.14538 10.204 2.13232 10.1333 2.13332H8.66349C8.61807 2.12555 8.57207 2.12171 8.52599 2.12186Z" />
     </svg>
   );
@@ -41,7 +55,14 @@ function ItalicIcon(props: React.ComponentProps<'svg'>) {
 
 function UnderlineIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.73331 2.13332C3.66264 2.13232 3.59247 2.14538 3.52689 2.17173C3.46131 2.19809 3.40161 2.23721 3.35128 2.28684C3.30095 2.33646 3.26099 2.39559 3.23371 2.4608C3.20643 2.526 3.19238 2.59598 3.19238 2.66666C3.19238 2.73734 3.20643 2.80731 3.23371 2.87252C3.26099 2.93772 3.30095 2.99685 3.35128 3.04648C3.40161 3.0961 3.46131 3.13523 3.52689 3.16158C3.59247 3.18793 3.66264 3.20099 3.73331 3.19999V7.99999C3.73331 10.224 5.55144 12.2667 7.99998 12.2667C10.4485 12.2667 12.2666 10.224 12.2666 7.99999V3.19999C12.3373 3.20099 12.4075 3.18793 12.4731 3.16158C12.5386 3.13523 12.5983 3.0961 12.6487 3.04648C12.699 2.99685 12.739 2.93772 12.7662 2.87252C12.7935 2.80731 12.8076 2.73734 12.8076 2.66666C12.8076 2.59598 12.7935 2.526 12.7662 2.4608C12.739 2.39559 12.699 2.33646 12.6487 2.28684C12.5983 2.23721 12.5386 2.19809 12.4731 2.17173C12.4075 2.14538 12.3373 2.13232 12.2666 2.13332H10.1333C10.0626 2.13232 9.99247 2.14538 9.92689 2.17173C9.8613 2.19809 9.80161 2.23721 9.75128 2.28684C9.70095 2.33646 9.66099 2.39559 9.63371 2.4608C9.60643 2.526 9.59238 2.59598 9.59238 2.66666C9.59238 2.73734 9.60643 2.80731 9.63371 2.87252C9.66099 2.93772 9.70095 2.99685 9.75128 3.04648C9.80161 3.0961 9.8613 3.13523 9.92689 3.16158C9.99247 3.18793 10.0626 3.20099 10.1333 3.19999V8.97187C10.1333 10.0855 9.32179 11.0818 8.21352 11.1896C6.94152 11.3138 5.86665 10.3136 5.86665 9.06666V3.19999C5.93732 3.20099 6.00748 3.18793 6.07307 3.16158C6.13865 3.13523 6.19834 3.0961 6.24867 3.04648C6.299 2.99685 6.33897 2.93772 6.36625 2.87252C6.39353 2.80731 6.40757 2.73734 6.40757 2.66666C6.40757 2.59598 6.39353 2.526 6.36625 2.4608C6.33897 2.39559 6.299 2.33646 6.24867 2.28684C6.19834 2.23721 6.13865 2.19809 6.07307 2.17173C6.00748 2.14538 5.93732 2.13232 5.86665 2.13332H3.73331ZM3.73331 13.3333C3.66264 13.3323 3.59247 13.3454 3.52689 13.3717C3.46131 13.3981 3.40161 13.4372 3.35128 13.4868C3.30095 13.5365 3.26099 13.5956 3.23371 13.6608C3.20643 13.726 3.19238 13.796 3.19238 13.8667C3.19238 13.9373 3.20643 14.0073 3.23371 14.0725C3.26099 14.1377 3.30095 14.1969 3.35128 14.2465C3.40161 14.2961 3.46131 14.3352 3.52689 14.3616C3.59247 14.3879 3.66264 14.401 3.73331 14.4H12.2666C12.3373 14.401 12.4075 14.3879 12.4731 14.3616C12.5386 14.3352 12.5983 14.2961 12.6487 14.2465C12.699 14.1969 12.739 14.1377 12.7662 14.0725C12.7935 14.0073 12.8076 13.9373 12.8076 13.8667C12.8076 13.796 12.7935 13.726 12.7662 13.6608C12.739 13.5956 12.699 13.5365 12.6487 13.4868C12.5983 13.4372 12.5386 13.3981 12.4731 13.3717C12.4075 13.3454 12.3373 13.3323 12.2666 13.3333H3.73331Z" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
index 82fc2390500..10133d6a0ee 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
@@ -14,21 +14,21 @@ export default function ExampleToggleGroupMultiple() {
         value="bold"
         className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
-        <BoldIcon className="size-4" />
+        <BoldIcon />
       </Toggle>
       <Toggle
         aria-label="Italic"
         value="italic"
         className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
-        <ItalicIcon className="size-4" />
+        <ItalicIcon />
       </Toggle>
       <Toggle
         aria-label="Underline"
         value="underline"
         className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
-        <UnderlineIcon className="size-4" />
+        <UnderlineIcon />
       </Toggle>
     </ToggleGroup>
   );
@@ -36,7 +36,14 @@ export default function ExampleToggleGroupMultiple() {
 
 function BoldIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.73353 2.13333C3.4386 2.13333 3.2002 2.37226 3.2002 2.66666C3.2002 2.96106 3.4386 3.2 3.73353 3.2H4.26686V12.8H3.73353C3.4386 12.8 3.2002 13.0389 3.2002 13.3333C3.2002 13.6277 3.4386 13.8667 3.73353 13.8667H9.86686C11.7783 13.8667 13.3335 12.3115 13.3335 10.4C13.3335 8.9968 12.4945 7.78881 11.2929 7.24375C11.8897 6.70615 12.2669 5.93066 12.2669 5.06666C12.2669 3.44906 10.9506 2.13333 9.33353 2.13333H3.73353ZM6.93353 3.2H8.26686C9.29619 3.2 10.1335 4.03733 10.1335 5.06666C10.1335 6.096 9.29619 6.93333 8.26686 6.93333H6.93353V3.2ZM6.93353 8H7.73353H8.26686C9.59006 8 10.6669 9.0768 10.6669 10.4C10.6669 11.7232 9.59006 12.8 8.26686 12.8H6.93353V8Z" />
     </svg>
   );
@@ -44,7 +51,14 @@ function BoldIcon(props: React.ComponentProps<'svg'>) {
 
 function ItalicIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M8.52599 2.12186C8.48583 2.12267 8.44578 2.1265 8.4062 2.13332H6.93328C6.86261 2.13232 6.79244 2.14538 6.72686 2.17173C6.66127 2.19808 6.60158 2.23721 6.55125 2.28683C6.50092 2.33646 6.46096 2.39559 6.43368 2.46079C6.4064 2.526 6.39235 2.59597 6.39235 2.66665C6.39235 2.73733 6.4064 2.80731 6.43368 2.87251C6.46096 2.93772 6.50092 2.99685 6.55125 3.04647C6.60158 3.0961 6.66127 3.13522 6.72686 3.16157C6.79244 3.18793 6.86261 3.20099 6.93328 3.19999H7.70099L6.69057 12.8H5.86661C5.79594 12.799 5.72577 12.812 5.66019 12.8384C5.59461 12.8648 5.53492 12.9039 5.48459 12.9535C5.43425 13.0031 5.39429 13.0623 5.36701 13.1275C5.33973 13.1927 5.32568 13.2626 5.32568 13.3333C5.32568 13.404 5.33973 13.474 5.36701 13.5392C5.39429 13.6044 5.43425 13.6635 5.48459 13.7131C5.53492 13.7628 5.59461 13.8019 5.66019 13.8282C5.72577 13.8546 5.79594 13.8677 5.86661 13.8667H9.06661C9.13729 13.8677 9.20745 13.8546 9.27304 13.8282C9.33862 13.8019 9.39831 13.7628 9.44864 13.7131C9.49897 13.6635 9.53894 13.6044 9.56622 13.5392C9.5935 13.474 9.60754 13.404 9.60754 13.3333C9.60754 13.2626 9.5935 13.1927 9.56622 13.1275C9.53894 13.0623 9.49897 13.0031 9.44864 12.9535C9.39831 12.9039 9.33862 12.8648 9.27304 12.8384C9.20745 12.812 9.13729 12.799 9.06661 12.8H8.2989L9.30932 3.19999H10.1333C10.204 3.20099 10.2741 3.18793 10.3397 3.16157C10.4053 3.13522 10.465 3.0961 10.5153 3.04647C10.5656 2.99685 10.6056 2.93772 10.6329 2.87251C10.6602 2.80731 10.6742 2.73733 10.6742 2.66665C10.6742 2.59597 10.6602 2.526 10.6329 2.46079C10.6056 2.39559 10.5656 2.33646 10.5153 2.28683C10.465 2.23721 10.4053 2.19808 10.3397 2.17173C10.2741 2.14538 10.204 2.13232 10.1333 2.13332H8.66349C8.61807 2.12555 8.57207 2.12171 8.52599 2.12186Z" />
     </svg>
   );
@@ -52,7 +66,14 @@ function ItalicIcon(props: React.ComponentProps<'svg'>) {
 
 function UnderlineIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.73331 2.13332C3.66264 2.13232 3.59247 2.14538 3.52689 2.17173C3.46131 2.19809 3.40161 2.23721 3.35128 2.28684C3.30095 2.33646 3.26099 2.39559 3.23371 2.4608C3.20643 2.526 3.19238 2.59598 3.19238 2.66666C3.19238 2.73734 3.20643 2.80731 3.23371 2.87252C3.26099 2.93772 3.30095 2.99685 3.35128 3.04648C3.40161 3.0961 3.46131 3.13523 3.52689 3.16158C3.59247 3.18793 3.66264 3.20099 3.73331 3.19999V7.99999C3.73331 10.224 5.55144 12.2667 7.99998 12.2667C10.4485 12.2667 12.2666 10.224 12.2666 7.99999V3.19999C12.3373 3.20099 12.4075 3.18793 12.4731 3.16158C12.5386 3.13523 12.5983 3.0961 12.6487 3.04648C12.699 2.99685 12.739 2.93772 12.7662 2.87252C12.7935 2.80731 12.8076 2.73734 12.8076 2.66666C12.8076 2.59598 12.7935 2.526 12.7662 2.4608C12.739 2.39559 12.699 2.33646 12.6487 2.28684C12.5983 2.23721 12.5386 2.19809 12.4731 2.17173C12.4075 2.14538 12.3373 2.13232 12.2666 2.13332H10.1333C10.0626 2.13232 9.99247 2.14538 9.92689 2.17173C9.8613 2.19809 9.80161 2.23721 9.75128 2.28684C9.70095 2.33646 9.66099 2.39559 9.63371 2.4608C9.60643 2.526 9.59238 2.59598 9.59238 2.66666C9.59238 2.73734 9.60643 2.80731 9.63371 2.87252C9.66099 2.93772 9.70095 2.99685 9.75128 3.04648C9.80161 3.0961 9.8613 3.13523 9.92689 3.16158C9.99247 3.18793 10.0626 3.20099 10.1333 3.19999V8.97187C10.1333 10.0855 9.32179 11.0818 8.21352 11.1896C6.94152 11.3138 5.86665 10.3136 5.86665 9.06666V3.19999C5.93732 3.20099 6.00748 3.18793 6.07307 3.16158C6.13865 3.13523 6.19834 3.0961 6.24867 3.04648C6.299 2.99685 6.33897 2.93772 6.36625 2.87252C6.39353 2.80731 6.40757 2.73734 6.40757 2.66666C6.40757 2.59598 6.39353 2.526 6.36625 2.4608C6.33897 2.39559 6.299 2.33646 6.24867 2.28684C6.19834 2.23721 6.13865 2.19809 6.07307 2.17173C6.00748 2.14538 5.93732 2.13232 5.86665 2.13332H3.73331ZM3.73331 13.3333C3.66264 13.3323 3.59247 13.3454 3.52689 13.3717C3.46131 13.3981 3.40161 13.4372 3.35128 13.4868C3.30095 13.5365 3.26099 13.5956 3.23371 13.6608C3.20643 13.726 3.19238 13.796 3.19238 13.8667C3.19238 13.9373 3.20643 14.0073 3.23371 14.0725C3.26099 14.1377 3.30095 14.1969 3.35128 14.2465C3.40161 14.2961 3.46131 14.3352 3.52689 14.3616C3.59247 14.3879 3.66264 14.401 3.73331 14.4H12.2666C12.3373 14.401 12.4075 14.3879 12.4731 14.3616C12.5386 14.3352 12.5983 14.2961 12.6487 14.2465C12.699 14.1969 12.739 14.1377 12.7662 14.0725C12.7935 14.0073 12.8076 13.9373 12.8076 13.8667C12.8076 13.796 12.7935 13.726 12.7662 13.6608C12.739 13.5956 12.699 13.5365 12.6487 13.4868C12.5983 13.4372 12.5386 13.3981 12.4731 13.3717C12.4075 13.3454 12.3373 13.3323 12.2666 13.3333H3.73331Z" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
index 69499d3459c..44759cdf5d2 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
@@ -52,8 +52,3 @@
     }
   }
 }
-
-.Icon {
-  width: 1rem;
-  height: 1rem;
-}
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.tsx
index de9fe6c9d3e..08d6ee14328 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.tsx
@@ -13,14 +13,14 @@ export default function ExampleToggle() {
           if (state.pressed) {
             return (
               <button type="button" {...props}>
-                <HeartFilledIcon className={styles.Icon} />
+                <HeartFilledIcon />
               </button>
             );
           }
 
           return (
             <button type="button" {...props}>
-              <HeartOutlineIcon className={styles.Icon} />
+              <HeartOutlineIcon />
             </button>
           );
         }}
@@ -31,7 +31,14 @@ export default function ExampleToggle() {
 
 function HeartFilledIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M7.99961 13.8667C7.88761 13.8667 7.77561 13.8315 7.68121 13.7611C7.43321 13.5766 1.59961 9.1963 1.59961 5.8667C1.59961 3.80856 3.27481 2.13336 5.33294 2.13336C6.59054 2.13336 7.49934 2.81176 7.99961 3.3131C8.49988 2.81176 9.40868 2.13336 10.6663 2.13336C12.7244 2.13336 14.3996 3.80803 14.3996 5.8667C14.3996 9.1963 8.56601 13.5766 8.31801 13.7616C8.22361 13.8315 8.11161 13.8667 7.99961 13.8667Z" />
     </svg>
   );
@@ -39,7 +46,14 @@ function HeartFilledIcon(props: React.ComponentProps<'svg'>) {
 
 function HeartOutlineIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
index f3c66986ce0..fbe16ee31ce 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
@@ -11,14 +11,14 @@ export default function ExampleToggle() {
         if (state.pressed) {
           return (
             <button type="button" {...props}>
-              <HeartFilledIcon className="size-4" />
+              <HeartFilledIcon />
             </button>
           );
         }
 
         return (
           <button type="button" {...props}>
-            <HeartOutlineIcon className="size-4" />
+            <HeartOutlineIcon />
           </button>
         );
       }}
@@ -28,7 +28,14 @@ export default function ExampleToggle() {
 
 function HeartFilledIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M7.99961 13.8667C7.88761 13.8667 7.77561 13.8315 7.68121 13.7611C7.43321 13.5766 1.59961 9.1963 1.59961 5.8667C1.59961 3.80856 3.27481 2.13336 5.33294 2.13336C6.59054 2.13336 7.49934 2.81176 7.99961 3.3131C8.49988 2.81176 9.40868 2.13336 10.6663 2.13336C12.7244 2.13336 14.3996 3.80803 14.3996 5.8667C14.3996 9.1963 8.56601 13.5766 8.31801 13.7616C8.22361 13.8315 8.11161 13.8667 7.99961 13.8667Z" />
     </svg>
   );
@@ -36,7 +43,14 @@ function HeartFilledIcon(props: React.ComponentProps<'svg'>) {
 
 function HeartOutlineIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
index d004b5b5839..83eff048f9c 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
@@ -156,11 +156,6 @@
 
 .SelectIcon {
   display: flex;
-
-  & svg {
-    width: 0.75rem;
-    height: 0.75rem;
-  }
 }
 
 .Positioner {
@@ -240,12 +235,6 @@
   grid-column-start: 1;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .ItemText {
   grid-column-start: 2;
 }
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
index a6d1408b996..ea13dcb37c7 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
@@ -48,13 +48,13 @@ export default function ExampleToolbar() {
             <Select.Popup className={styles.Popup}>
               <Select.Item className={styles.Item} value="Helvetica">
                 <Select.ItemIndicator className={styles.ItemIndicator}>
-                  <CheckIcon className={styles.ItemIndicatorIcon} />
+                  <CheckIcon />
                 </Select.ItemIndicator>
                 <Select.ItemText className={styles.ItemText}>Helvetica</Select.ItemText>
               </Select.Item>
               <Select.Item className={styles.Item} value="Arial">
                 <Select.ItemIndicator className={styles.ItemIndicator}>
-                  <CheckIcon className={styles.ItemIndicatorIcon} />
+                  <CheckIcon />
                 </Select.ItemIndicator>
                 <Select.ItemText className={styles.ItemText}>Arial</Select.ItemText>
               </Select.Item>
@@ -72,7 +72,16 @@ export default function ExampleToolbar() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
       <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -81,7 +90,16 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
index aacb63b7b1b..4863780e819 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
@@ -48,7 +48,7 @@ export default function ExampleToolbar() {
         >
           <Select.Value />
           <Select.Icon className="flex">
-            <ChevronUpDownIcon className="size-3" />
+            <ChevronUpDownIcon />
           </Select.Icon>
         </Toolbar.Button>
         <Select.Portal>
@@ -59,7 +59,7 @@ export default function ExampleToolbar() {
                 className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none data-highlighted:bg-neutral-950 data-highlighted:text-white pointer-coarse:py-2.5 dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
               >
                 <Select.ItemIndicator className="col-start-1">
-                  <CheckIcon className="block size-3" />
+                  <CheckIcon />
                 </Select.ItemIndicator>
                 <Select.ItemText className="col-start-2">Helvetica</Select.ItemText>
               </Select.Item>
@@ -68,7 +68,7 @@ export default function ExampleToolbar() {
                 className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none data-highlighted:bg-neutral-950 data-highlighted:text-white pointer-coarse:py-2.5 dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
               >
                 <Select.ItemIndicator className="col-start-1">
-                  <CheckIcon className="block size-3" />
+                  <CheckIcon />
                 </Select.ItemIndicator>
                 <Select.ItemText className="col-start-2">Arial</Select.ItemText>
               </Select.Item>
@@ -89,7 +89,16 @@ export default function ExampleToolbar() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
       <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -98,7 +107,16 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx
index d96ce7540e5..0b06b070e62 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx
@@ -19,15 +19,15 @@ export default function TooltipDetachedTriggersControlledDemo() {
       <div className={styles.Container}>
         <div className={styles.ButtonGroup}>
           <Tooltip.Trigger className={styles.IconButton} handle={demoTooltip} id="trigger-1">
-            <InfoIcon aria-label="Controlled tooltip" className={styles.Icon} />
+            <InfoIcon aria-label="Controlled tooltip" />
           </Tooltip.Trigger>
 
           <Tooltip.Trigger className={styles.IconButton} handle={demoTooltip} id="trigger-2">
-            <InfoIcon aria-label="Controlled tooltip" className={styles.Icon} />
+            <InfoIcon aria-label="Controlled tooltip" />
           </Tooltip.Trigger>
 
           <Tooltip.Trigger className={styles.IconButton} handle={demoTooltip} id="trigger-3">
-            <InfoIcon aria-label="Controlled tooltip" className={styles.Icon} />
+            <InfoIcon aria-label="Controlled tooltip" />
           </Tooltip.Trigger>
         </div>
 
@@ -65,6 +65,8 @@ export default function TooltipDetachedTriggersControlledDemo() {
 function InfoIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
+      width="20"
+      height="20"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
@@ -72,6 +74,7 @@ function InfoIcon(props: React.ComponentProps<'svg'>) {
       strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
       <circle cx="12" cy="12" r="10" />
       <path d="M12 16v-4" />
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
index 009cf53afb4..ac87ec0a7cb 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -31,7 +31,7 @@ export default function TooltipDetachedTriggersControlledDemo() {
       <div className="flex gap-2 flex-wrap justify-center">
         <div className="flex">
           <Tooltip.Trigger className={iconButtonClass} handle={demoTooltip} id="trigger-1">
-            <InfoIcon className="size-5" aria-label="Controlled tooltip" />
+            <InfoIcon aria-label="Controlled tooltip" />
           </Tooltip.Trigger>
 
           <Tooltip.Trigger
@@ -39,7 +39,7 @@ export default function TooltipDetachedTriggersControlledDemo() {
             handle={demoTooltip}
             id="trigger-2"
           >
-            <InfoIcon className="size-5" aria-label="Controlled tooltip" />
+            <InfoIcon aria-label="Controlled tooltip" />
           </Tooltip.Trigger>
 
           <Tooltip.Trigger
@@ -47,7 +47,7 @@ export default function TooltipDetachedTriggersControlledDemo() {
             handle={demoTooltip}
             id="trigger-3"
           >
-            <InfoIcon className="size-5" aria-label="Controlled tooltip" />
+            <InfoIcon aria-label="Controlled tooltip" />
           </Tooltip.Trigger>
         </div>
 
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
index 53d0d5e3503..8e7c05ef2db 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
@@ -76,11 +76,6 @@
   }
 }
 
-.Icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
 .Positioner {
   height: var(--positioner-height);
   width: var(--positioner-width);
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx
index c30379852b5..499b262b304 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx
@@ -10,15 +10,15 @@ export default function TooltipDetachedTriggersFullDemo() {
     <Tooltip.Provider>
       <div className={styles.ButtonGroup}>
         <Tooltip.Trigger className={styles.Button} handle={demoTooltip} payload={InfoContent}>
-          <InfoIcon aria-label="This is information about the feature" className={styles.Icon} />
+          <InfoIcon aria-label="This is information about the feature" />
         </Tooltip.Trigger>
 
         <Tooltip.Trigger className={styles.Button} handle={demoTooltip} payload={HelpContent}>
-          <HelpIcon aria-label="Need help?" className={styles.Icon} />
+          <HelpIcon aria-label="Need help?" />
         </Tooltip.Trigger>
 
         <Tooltip.Trigger className={styles.Button} handle={demoTooltip} payload={AlertContent}>
-          <AlertIcon aria-label="Warning: This action cannot be undone" className={styles.Icon} />
+          <AlertIcon aria-label="Warning: This action cannot be undone" />
         </Tooltip.Trigger>
       </div>
 
@@ -56,6 +56,8 @@ function AlertContent() {
 function InfoIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
+      width="20"
+      height="20"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
@@ -63,6 +65,7 @@ function InfoIcon(props: React.ComponentProps<'svg'>) {
       strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
       <circle cx="12" cy="12" r="10" />
       <path d="M12 16v-4" />
@@ -74,6 +77,8 @@ function InfoIcon(props: React.ComponentProps<'svg'>) {
 function HelpIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
+      width="20"
+      height="20"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
@@ -81,6 +86,7 @@ function HelpIcon(props: React.ComponentProps<'svg'>) {
       strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
       <circle cx="12" cy="12" r="10" vectorEffect="non-scaling-stroke" />
       <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" vectorEffect="non-scaling-stroke" />
@@ -92,6 +98,8 @@ function HelpIcon(props: React.ComponentProps<'svg'>) {
 function AlertIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
+      width="20"
+      height="20"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
@@ -99,6 +107,7 @@ function AlertIcon(props: React.ComponentProps<'svg'>) {
       strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
       <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
       <path d="M12 9v4" />
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
index 603cbdd13c3..c12ac39980b 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function TooltipDetachedTriggersFullDemo() {
     <Tooltip.Provider>
       <div className="flex">
         <Tooltip.Trigger className={triggerClass} handle={demoTooltip} payload={InfoContent}>
-          <InfoIcon aria-label="This is information about the feature" className="size-5" />
+          <InfoIcon aria-label="This is information about the feature" />
         </Tooltip.Trigger>
 
         <Tooltip.Trigger
@@ -24,7 +24,7 @@ export default function TooltipDetachedTriggersFullDemo() {
           handle={demoTooltip}
           payload={HelpContent}
         >
-          <HelpIcon aria-label="Need help?" className="size-5" />
+          <HelpIcon aria-label="Need help?" />
         </Tooltip.Trigger>
 
         <Tooltip.Trigger
@@ -32,7 +32,7 @@ export default function TooltipDetachedTriggersFullDemo() {
           handle={demoTooltip}
           payload={AlertContent}
         >
-          <AlertIcon aria-label="Warning: This action cannot be undone" className="size-5" />
+          <AlertIcon aria-label="Warning: This action cannot be undone" />
         </Tooltip.Trigger>
       </div>
 
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx
index 3ba82ed59b9..9c7a89b2914 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx
@@ -9,7 +9,7 @@ export default function TooltipDetachedTriggersSimpleDemo() {
   return (
     <Tooltip.Provider>
       <Tooltip.Trigger className={styles.IconButton} handle={demoTooltip}>
-        <InfoIcon aria-label="This is a detached tooltip" className={styles.Icon} />
+        <InfoIcon aria-label="This is a detached tooltip" />
       </Tooltip.Trigger>
 
       <Tooltip.Root handle={demoTooltip}>
@@ -29,6 +29,8 @@ export default function TooltipDetachedTriggersSimpleDemo() {
 function InfoIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
+      width="20"
+      height="20"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
@@ -36,6 +38,7 @@ function InfoIcon(props: React.ComponentProps<'svg'>) {
       strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
       <circle cx="12" cy="12" r="10" />
       <path d="M12 16v-4" />
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
index 852df57d684..d8663c4a4fc 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function TooltipDetachedTriggersSimpleDemo() {
   return (
     <Tooltip.Provider>
       <Tooltip.Trigger className={triggerClass} handle={demoTooltip}>
-        <InfoIcon className="size-5" aria-label="This is a detached tooltip" />
+        <InfoIcon aria-label="This is a detached tooltip" />
       </Tooltip.Trigger>
 
       <Tooltip.Root handle={demoTooltip}>
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
index 36682261ab0..ee4daadfbae 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
@@ -64,11 +64,6 @@
   }
 }
 
-.Icon {
-  width: 1rem;
-  height: 1rem;
-}
-
 .Popup {
   box-sizing: border-box;
   font-size: 0.875rem;
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.tsx
index df8af302d62..961399b1733 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleTooltip() {
       <div className={styles.Panel}>
         <Tooltip.Root>
           <Tooltip.Trigger className={styles.Button}>
-            <BoldIcon className={styles.Icon} aria-label="Bold" />
+            <BoldIcon aria-label="Bold" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
             <Tooltip.Positioner sideOffset={11}>
@@ -22,7 +22,7 @@ export default function ExampleTooltip() {
 
         <Tooltip.Root>
           <Tooltip.Trigger className={styles.Button}>
-            <ItalicIcon className={styles.Icon} aria-label="Italic" />
+            <ItalicIcon aria-label="Italic" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
             <Tooltip.Positioner sideOffset={11}>
@@ -36,7 +36,7 @@ export default function ExampleTooltip() {
 
         <Tooltip.Root>
           <Tooltip.Trigger className={styles.Button}>
-            <UnderlineIcon className={styles.Icon} aria-label="Underline" />
+            <UnderlineIcon aria-label="Underline" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
             <Tooltip.Positioner sideOffset={11}>
@@ -54,7 +54,14 @@ export default function ExampleTooltip() {
 
 function BoldIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.73353 2.13333C3.4386 2.13333 3.2002 2.37226 3.2002 2.66666C3.2002 2.96106 3.4386 3.2 3.73353 3.2H4.26686V12.8H3.73353C3.4386 12.8 3.2002 13.0389 3.2002 13.3333C3.2002 13.6277 3.4386 13.8667 3.73353 13.8667H9.86686C11.7783 13.8667 13.3335 12.3115 13.3335 10.4C13.3335 8.9968 12.4945 7.78881 11.2929 7.24375C11.8897 6.70615 12.2669 5.93066 12.2669 5.06666C12.2669 3.44906 10.9506 2.13333 9.33353 2.13333H3.73353ZM6.93353 3.2H8.26686C9.29619 3.2 10.1335 4.03733 10.1335 5.06666C10.1335 6.096 9.29619 6.93333 8.26686 6.93333H6.93353V3.2ZM6.93353 8H7.73353H8.26686C9.59006 8 10.6669 9.0768 10.6669 10.4C10.6669 11.7232 9.59006 12.8 8.26686 12.8H6.93353V8Z" />
     </svg>
   );
@@ -62,7 +69,14 @@ function BoldIcon(props: React.ComponentProps<'svg'>) {
 
 function ItalicIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M8.52599 2.12186C8.48583 2.12267 8.44578 2.1265 8.4062 2.13332H6.93328C6.86261 2.13232 6.79244 2.14538 6.72686 2.17173C6.66127 2.19808 6.60158 2.23721 6.55125 2.28683C6.50092 2.33646 6.46096 2.39559 6.43368 2.46079C6.4064 2.526 6.39235 2.59597 6.39235 2.66665C6.39235 2.73733 6.4064 2.80731 6.43368 2.87251C6.46096 2.93772 6.50092 2.99685 6.55125 3.04647C6.60158 3.0961 6.66127 3.13522 6.72686 3.16157C6.79244 3.18793 6.86261 3.20099 6.93328 3.19999H7.70099L6.69057 12.8H5.86661C5.79594 12.799 5.72577 12.812 5.66019 12.8384C5.59461 12.8648 5.53492 12.9039 5.48459 12.9535C5.43425 13.0031 5.39429 13.0623 5.36701 13.1275C5.33973 13.1927 5.32568 13.2626 5.32568 13.3333C5.32568 13.404 5.33973 13.474 5.36701 13.5392C5.39429 13.6044 5.43425 13.6635 5.48459 13.7131C5.53492 13.7628 5.59461 13.8019 5.66019 13.8282C5.72577 13.8546 5.79594 13.8677 5.86661 13.8667H9.06661C9.13729 13.8677 9.20745 13.8546 9.27304 13.8282C9.33862 13.8019 9.39831 13.7628 9.44864 13.7131C9.49897 13.6635 9.53894 13.6044 9.56622 13.5392C9.5935 13.474 9.60754 13.404 9.60754 13.3333C9.60754 13.2626 9.5935 13.1927 9.56622 13.1275C9.53894 13.0623 9.49897 13.0031 9.44864 12.9535C9.39831 12.9039 9.33862 12.8648 9.27304 12.8384C9.20745 12.812 9.13729 12.799 9.06661 12.8H8.2989L9.30932 3.19999H10.1333C10.204 3.20099 10.2741 3.18793 10.3397 3.16157C10.4053 3.13522 10.465 3.0961 10.5153 3.04647C10.5656 2.99685 10.6056 2.93772 10.6329 2.87251C10.6602 2.80731 10.6742 2.73733 10.6742 2.66665C10.6742 2.59597 10.6602 2.526 10.6329 2.46079C10.6056 2.39559 10.5656 2.33646 10.5153 2.28683C10.465 2.23721 10.4053 2.19808 10.3397 2.17173C10.2741 2.14538 10.204 2.13232 10.1333 2.13332H8.66349C8.61807 2.12555 8.57207 2.12171 8.52599 2.12186Z" />
     </svg>
   );
@@ -70,7 +84,14 @@ function ItalicIcon(props: React.ComponentProps<'svg'>) {
 
 function UnderlineIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.73331 2.13332C3.66264 2.13232 3.59247 2.14538 3.52689 2.17173C3.46131 2.19809 3.40161 2.23721 3.35128 2.28684C3.30095 2.33646 3.26099 2.39559 3.23371 2.4608C3.20643 2.526 3.19238 2.59598 3.19238 2.66666C3.19238 2.73734 3.20643 2.80731 3.23371 2.87252C3.26099 2.93772 3.30095 2.99685 3.35128 3.04648C3.40161 3.0961 3.46131 3.13523 3.52689 3.16158C3.59247 3.18793 3.66264 3.20099 3.73331 3.19999V7.99999C3.73331 10.224 5.55144 12.2667 7.99998 12.2667C10.4485 12.2667 12.2666 10.224 12.2666 7.99999V3.19999C12.3373 3.20099 12.4075 3.18793 12.4731 3.16158C12.5386 3.13523 12.5983 3.0961 12.6487 3.04648C12.699 2.99685 12.739 2.93772 12.7662 2.87252C12.7935 2.80731 12.8076 2.73734 12.8076 2.66666C12.8076 2.59598 12.7935 2.526 12.7662 2.4608C12.739 2.39559 12.699 2.33646 12.6487 2.28684C12.5983 2.23721 12.5386 2.19809 12.4731 2.17173C12.4075 2.14538 12.3373 2.13232 12.2666 2.13332H10.1333C10.0626 2.13232 9.99247 2.14538 9.92689 2.17173C9.8613 2.19809 9.80161 2.23721 9.75128 2.28684C9.70095 2.33646 9.66099 2.39559 9.63371 2.4608C9.60643 2.526 9.59238 2.59598 9.59238 2.66666C9.59238 2.73734 9.60643 2.80731 9.63371 2.87252C9.66099 2.93772 9.70095 2.99685 9.75128 3.04648C9.80161 3.0961 9.8613 3.13523 9.92689 3.16158C9.99247 3.18793 10.0626 3.20099 10.1333 3.19999V8.97187C10.1333 10.0855 9.32179 11.0818 8.21352 11.1896C6.94152 11.3138 5.86665 10.3136 5.86665 9.06666V3.19999C5.93732 3.20099 6.00748 3.18793 6.07307 3.16158C6.13865 3.13523 6.19834 3.0961 6.24867 3.04648C6.299 2.99685 6.33897 2.93772 6.36625 2.87252C6.39353 2.80731 6.40757 2.73734 6.40757 2.66666C6.40757 2.59598 6.39353 2.526 6.36625 2.4608C6.33897 2.39559 6.299 2.33646 6.24867 2.28684C6.19834 2.23721 6.13865 2.19809 6.07307 2.17173C6.00748 2.14538 5.93732 2.13232 5.86665 2.13332H3.73331ZM3.73331 13.3333C3.66264 13.3323 3.59247 13.3454 3.52689 13.3717C3.46131 13.3981 3.40161 13.4372 3.35128 13.4868C3.30095 13.5365 3.26099 13.5956 3.23371 13.6608C3.20643 13.726 3.19238 13.796 3.19238 13.8667C3.19238 13.9373 3.20643 14.0073 3.23371 14.0725C3.26099 14.1377 3.30095 14.1969 3.35128 14.2465C3.40161 14.2961 3.46131 14.3352 3.52689 14.3616C3.59247 14.3879 3.66264 14.401 3.73331 14.4H12.2666C12.3373 14.401 12.4075 14.3879 12.4731 14.3616C12.5386 14.3352 12.5983 14.2961 12.6487 14.2465C12.699 14.1969 12.739 14.1377 12.7662 14.0725C12.7935 14.0073 12.8076 13.9373 12.8076 13.8667C12.8076 13.796 12.7935 13.726 12.7662 13.6608C12.739 13.5956 12.699 13.5365 12.6487 13.4868C12.5983 13.4372 12.5386 13.3981 12.4731 13.3717C12.4075 13.3454 12.3373 13.3323 12.2666 13.3333H3.73331Z" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
index 6a18548410c..9bf3df210cc 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function ExampleTooltip() {
       <div className="flex border border-neutral-950 bg-white dark:border-white dark:bg-neutral-950">
         <Tooltip.Root>
           <Tooltip.Trigger className={triggerClass}>
-            <BoldIcon aria-label="Bold" className="size-4" />
+            <BoldIcon aria-label="Bold" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
             <Tooltip.Positioner sideOffset={11}>
@@ -30,7 +30,7 @@ export default function ExampleTooltip() {
 
         <Tooltip.Root>
           <Tooltip.Trigger className={triggerClass}>
-            <ItalicIcon aria-label="Italic" className="size-4" />
+            <ItalicIcon aria-label="Italic" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
             <Tooltip.Positioner sideOffset={11}>
@@ -44,7 +44,7 @@ export default function ExampleTooltip() {
 
         <Tooltip.Root>
           <Tooltip.Trigger className={triggerClass}>
-            <UnderlineIcon aria-label="Underline" className="size-4" />
+            <UnderlineIcon aria-label="Underline" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
             <Tooltip.Positioner sideOffset={11}>
@@ -62,7 +62,14 @@ export default function ExampleTooltip() {
 
 function BoldIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.73353 2.13333C3.4386 2.13333 3.2002 2.37226 3.2002 2.66666C3.2002 2.96106 3.4386 3.2 3.73353 3.2H4.26686V12.8H3.73353C3.4386 12.8 3.2002 13.0389 3.2002 13.3333C3.2002 13.6277 3.4386 13.8667 3.73353 13.8667H9.86686C11.7783 13.8667 13.3335 12.3115 13.3335 10.4C13.3335 8.9968 12.4945 7.78881 11.2929 7.24375C11.8897 6.70615 12.2669 5.93066 12.2669 5.06666C12.2669 3.44906 10.9506 2.13333 9.33353 2.13333H3.73353ZM6.93353 3.2H8.26686C9.29619 3.2 10.1335 4.03733 10.1335 5.06666C10.1335 6.096 9.29619 6.93333 8.26686 6.93333H6.93353V3.2ZM6.93353 8H7.73353H8.26686C9.59006 8 10.6669 9.0768 10.6669 10.4C10.6669 11.7232 9.59006 12.8 8.26686 12.8H6.93353V8Z" />
     </svg>
   );
@@ -70,7 +77,14 @@ function BoldIcon(props: React.ComponentProps<'svg'>) {
 
 function ItalicIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M8.52599 2.12186C8.48583 2.12267 8.44578 2.1265 8.4062 2.13332H6.93328C6.86261 2.13232 6.79244 2.14538 6.72686 2.17173C6.66127 2.19808 6.60158 2.23721 6.55125 2.28683C6.50092 2.33646 6.46096 2.39559 6.43368 2.46079C6.4064 2.526 6.39235 2.59597 6.39235 2.66665C6.39235 2.73733 6.4064 2.80731 6.43368 2.87251C6.46096 2.93772 6.50092 2.99685 6.55125 3.04647C6.60158 3.0961 6.66127 3.13522 6.72686 3.16157C6.79244 3.18793 6.86261 3.20099 6.93328 3.19999H7.70099L6.69057 12.8H5.86661C5.79594 12.799 5.72577 12.812 5.66019 12.8384C5.59461 12.8648 5.53492 12.9039 5.48459 12.9535C5.43425 13.0031 5.39429 13.0623 5.36701 13.1275C5.33973 13.1927 5.32568 13.2626 5.32568 13.3333C5.32568 13.404 5.33973 13.474 5.36701 13.5392C5.39429 13.6044 5.43425 13.6635 5.48459 13.7131C5.53492 13.7628 5.59461 13.8019 5.66019 13.8282C5.72577 13.8546 5.79594 13.8677 5.86661 13.8667H9.06661C9.13729 13.8677 9.20745 13.8546 9.27304 13.8282C9.33862 13.8019 9.39831 13.7628 9.44864 13.7131C9.49897 13.6635 9.53894 13.6044 9.56622 13.5392C9.5935 13.474 9.60754 13.404 9.60754 13.3333C9.60754 13.2626 9.5935 13.1927 9.56622 13.1275C9.53894 13.0623 9.49897 13.0031 9.44864 12.9535C9.39831 12.9039 9.33862 12.8648 9.27304 12.8384C9.20745 12.812 9.13729 12.799 9.06661 12.8H8.2989L9.30932 3.19999H10.1333C10.204 3.20099 10.2741 3.18793 10.3397 3.16157C10.4053 3.13522 10.465 3.0961 10.5153 3.04647C10.5656 2.99685 10.6056 2.93772 10.6329 2.87251C10.6602 2.80731 10.6742 2.73733 10.6742 2.66665C10.6742 2.59597 10.6602 2.526 10.6329 2.46079C10.6056 2.39559 10.5656 2.33646 10.5153 2.28683C10.465 2.23721 10.4053 2.19808 10.3397 2.17173C10.2741 2.14538 10.204 2.13232 10.1333 2.13332H8.66349C8.61807 2.12555 8.57207 2.12171 8.52599 2.12186Z" />
     </svg>
   );
@@ -78,7 +92,14 @@ function ItalicIcon(props: React.ComponentProps<'svg'>) {
 
 function UnderlineIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M3.73331 2.13332C3.66264 2.13232 3.59247 2.14538 3.52689 2.17173C3.46131 2.19809 3.40161 2.23721 3.35128 2.28684C3.30095 2.33646 3.26099 2.39559 3.23371 2.4608C3.20643 2.526 3.19238 2.59598 3.19238 2.66666C3.19238 2.73734 3.20643 2.80731 3.23371 2.87252C3.26099 2.93772 3.30095 2.99685 3.35128 3.04648C3.40161 3.0961 3.46131 3.13523 3.52689 3.16158C3.59247 3.18793 3.66264 3.20099 3.73331 3.19999V7.99999C3.73331 10.224 5.55144 12.2667 7.99998 12.2667C10.4485 12.2667 12.2666 10.224 12.2666 7.99999V3.19999C12.3373 3.20099 12.4075 3.18793 12.4731 3.16158C12.5386 3.13523 12.5983 3.0961 12.6487 3.04648C12.699 2.99685 12.739 2.93772 12.7662 2.87252C12.7935 2.80731 12.8076 2.73734 12.8076 2.66666C12.8076 2.59598 12.7935 2.526 12.7662 2.4608C12.739 2.39559 12.699 2.33646 12.6487 2.28684C12.5983 2.23721 12.5386 2.19809 12.4731 2.17173C12.4075 2.14538 12.3373 2.13232 12.2666 2.13332H10.1333C10.0626 2.13232 9.99247 2.14538 9.92689 2.17173C9.8613 2.19809 9.80161 2.23721 9.75128 2.28684C9.70095 2.33646 9.66099 2.39559 9.63371 2.4608C9.60643 2.526 9.59238 2.59598 9.59238 2.66666C9.59238 2.73734 9.60643 2.80731 9.63371 2.87252C9.66099 2.93772 9.70095 2.99685 9.75128 3.04648C9.80161 3.0961 9.8613 3.13523 9.92689 3.16158C9.99247 3.18793 10.0626 3.20099 10.1333 3.19999V8.97187C10.1333 10.0855 9.32179 11.0818 8.21352 11.1896C6.94152 11.3138 5.86665 10.3136 5.86665 9.06666V3.19999C5.93732 3.20099 6.00748 3.18793 6.07307 3.16158C6.13865 3.13523 6.19834 3.0961 6.24867 3.04648C6.299 2.99685 6.33897 2.93772 6.36625 2.87252C6.39353 2.80731 6.40757 2.73734 6.40757 2.66666C6.40757 2.59598 6.39353 2.526 6.36625 2.4608C6.33897 2.39559 6.299 2.33646 6.24867 2.28684C6.19834 2.23721 6.13865 2.19809 6.07307 2.17173C6.00748 2.14538 5.93732 2.13232 5.86665 2.13332H3.73331ZM3.73331 13.3333C3.66264 13.3323 3.59247 13.3454 3.52689 13.3717C3.46131 13.3981 3.40161 13.4372 3.35128 13.4868C3.30095 13.5365 3.26099 13.5956 3.23371 13.6608C3.20643 13.726 3.19238 13.796 3.19238 13.8667C3.19238 13.9373 3.20643 14.0073 3.23371 14.0725C3.26099 14.1377 3.30095 14.1969 3.35128 14.2465C3.40161 14.2961 3.46131 14.3352 3.52689 14.3616C3.59247 14.3879 3.66264 14.401 3.73331 14.4H12.2666C12.3373 14.401 12.4075 14.3879 12.4731 14.3616C12.5386 14.3352 12.5983 14.2961 12.6487 14.2465C12.699 14.1969 12.739 14.1377 12.7662 14.0725C12.7935 14.0073 12.8076 13.9373 12.8076 13.8667C12.8076 13.796 12.7935 13.726 12.7662 13.6608C12.739 13.5956 12.699 13.5365 12.6487 13.4868C12.5983 13.4372 12.5386 13.3981 12.4731 13.3717C12.4075 13.3454 12.3373 13.3323 12.2666 13.3333H3.73331Z" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx
index f937e4d2002..1caf67d0f5e 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx
@@ -3,6 +3,8 @@ import * as React from 'react';
 export function InfoIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
+      width="20"
+      height="20"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
@@ -10,6 +12,7 @@ export function InfoIcon(props: React.ComponentProps<'svg'>) {
       strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
       <circle cx="12" cy="12" r="10" />
       <path d="M12 16v-4" />
@@ -20,6 +23,8 @@ export function InfoIcon(props: React.ComponentProps<'svg'>) {
 export function HelpIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
+      width="20"
+      height="20"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
@@ -27,6 +32,7 @@ export function HelpIcon(props: React.ComponentProps<'svg'>) {
       strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
       <circle cx="12" cy="12" r="10" vectorEffect="non-scaling-stroke" />
       <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" vectorEffect="non-scaling-stroke" />
@@ -38,6 +44,8 @@ export function HelpIcon(props: React.ComponentProps<'svg'>) {
 export function AlertIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
+      width="20"
+      height="20"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
@@ -45,6 +53,7 @@ export function AlertIcon(props: React.ComponentProps<'svg'>) {
       strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
+      style={{ display: 'block', ...props.style }}
     >
       <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
       <path d="M12 9v4" />
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
index de1040c8427..5fb2e12e905 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
@@ -79,11 +79,6 @@
   }
 }
 
-.Icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
 .Positioner {
   height: var(--positioner-height);
   width: var(--positioner-width);
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
index b32a4511ffb..990b13bf353 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
@@ -63,11 +63,6 @@
 
 .SelectIcon {
   display: flex;
-
-  & svg {
-    width: 0.75rem;
-    height: 0.75rem;
-  }
 }
 
 .Value[data-placeholder] {
@@ -194,12 +189,6 @@
   grid-column-start: 1;
 }
 
-.ItemIndicatorIcon {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
 .ItemText {
   grid-column-start: 2;
 }
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
index 51fb9b5a794..337accffb1c 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
@@ -59,7 +59,7 @@ export default function AnimatedSelectMotionDemo() {
                   {fonts.map(({ label, value }) => (
                     <Select.Item key={label} value={value} className={styles.Item}>
                       <Select.ItemIndicator className={styles.ItemIndicator}>
-                        <CheckIcon className={styles.ItemIndicatorIcon} />
+                        <CheckIcon />
                       </Select.ItemIndicator>
                       <Select.ItemText className={styles.ItemText}>{label}</Select.ItemText>
                     </Select.Item>
@@ -77,7 +77,16 @@ export default function AnimatedSelectMotionDemo() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
       <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -86,7 +95,16 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
index 9294b2c55ab..7297fcc0f7a 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
@@ -43,7 +43,7 @@ export function Clear({ className, ...props }: Combobox.Clear.Props) {
       )}
       {...props}
     >
-      <XIcon className="size-4" />
+      <XIcon />
     </Combobox.Clear>
   );
 }
@@ -129,7 +129,15 @@ export function ItemIndicator({ className, ...props }: Combobox.ItemIndicator.Pr
 
 export function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 10 10" fill="none" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 10 10"
+      fill="none"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -137,7 +145,16 @@ export function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
index b5010cd37f9..e12cb443002 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
@@ -23,7 +23,7 @@ function Toasts() {
           className="absolute top-2 right-2 flex size-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700"
           aria-label="Close"
         >
-          <XIcon className="size-5" />
+          <XIcon />
         </Toast.Close>
       </Toast.Content>
     </Toast.Root>
@@ -47,7 +47,16 @@ export const useToastManager = Toast.useToastManager;
 
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
       <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
     </svg>
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
index e56517cd6bf..440acc3eedd 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
@@ -51,7 +51,7 @@ function ExampleForm() {
               <div className="absolute right-0 bottom-0 inline-flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
                 <Combobox.Clear />
                 <Combobox.Trigger>
-                  <Combobox.ChevronDownIcon className="size-3" />
+                  <Combobox.ChevronDownIcon />
                 </Combobox.Trigger>
               </div>
             </Combobox.InputGroup>
@@ -65,7 +65,7 @@ function ExampleForm() {
                     return (
                       <Combobox.Item key={region} value={region}>
                         <Combobox.ItemIndicator>
-                          <CheckIcon className="size-3" />
+                          <CheckIcon />
                         </Combobox.ItemIndicator>
                         <span className="col-start-2">{region}</span>
                       </Combobox.Item>
@@ -118,7 +118,7 @@ function ExampleForm() {
             <Select.Trigger className="w-48">
               <Select.Value />
               <Select.Icon>
-                <ChevronUpDownIcon className="size-3" />
+                <ChevronUpDownIcon />
               </Select.Icon>
             </Select.Trigger>
           </div>
@@ -131,7 +131,7 @@ function ExampleForm() {
                     return (
                       <Select.Item key={value} value={value}>
                         <Select.ItemIndicator>
-                          <CheckIcon className="size-3" />
+                          <CheckIcon />
                         </Select.ItemIndicator>
                         <Select.ItemText>{label}</Select.ItemText>
                       </Select.Item>
@@ -151,11 +151,11 @@ function ExampleForm() {
           <Field.Label>Number of instances</Field.Label>
           <NumberField.Group>
             <NumberField.Decrement>
-              <MinusIcon className="size-3" />
+              <MinusIcon />
             </NumberField.Decrement>
             <NumberField.Input />
             <NumberField.Increment>
-              <PlusIcon className="size-3" />
+              <PlusIcon />
             </NumberField.Increment>
           </NumberField.Group>
         </NumberField.Root>
@@ -233,7 +233,7 @@ function ExampleForm() {
                   <Field.Label className="uppercase">
                     <Checkbox.Root value={val}>
                       <Checkbox.Indicator>
-                        <CheckIcon className="size-3" />
+                        <CheckIcon />
                       </Checkbox.Indicator>
                     </Checkbox.Root>
                     {val}
@@ -262,7 +262,16 @@ export default function App() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
       <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -271,7 +280,16 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -279,7 +297,16 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
       <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -288,7 +315,16 @@ function PlusIcon(props: React.ComponentProps<'svg'>) {
 
 function MinusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
index ceae5735080..8c949cb6d99 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
@@ -101,7 +101,7 @@ function ReactHookForm() {
                   <div className="absolute right-0 bottom-0 inline-flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
                     <Combobox.Clear />
                     <Combobox.Trigger>
-                      <Combobox.ChevronDownIcon className="size-3" />
+                      <Combobox.ChevronDownIcon />
                     </Combobox.Trigger>
                   </div>
                 </Combobox.InputGroup>
@@ -115,7 +115,7 @@ function ReactHookForm() {
                         return (
                           <Combobox.Item key={region} value={region}>
                             <Combobox.ItemIndicator>
-                              <CheckIcon className="size-3" />
+                              <CheckIcon />
                             </Combobox.ItemIndicator>
                             <span className="col-start-2">{region}</span>
                           </Combobox.Item>
@@ -197,7 +197,7 @@ function ReactHookForm() {
                 <Select.Trigger className="w-48" onBlur={onBlur}>
                   <Select.Value />
                   <Select.Icon>
-                    <ChevronUpDownIcon className="size-3" />
+                    <ChevronUpDownIcon />
                   </Select.Icon>
                 </Select.Trigger>
               </div>
@@ -210,7 +210,7 @@ function ReactHookForm() {
                         return (
                           <Select.Item key={serverType} value={serverType}>
                             <Select.ItemIndicator>
-                              <CheckIcon className="size-3" />
+                              <CheckIcon />
                             </Select.ItemIndicator>
                             <Select.ItemText>{label}</Select.ItemText>
                           </Select.Item>
@@ -242,11 +242,11 @@ function ReactHookForm() {
               <Field.Label>Number of instances</Field.Label>
               <NumberField.Group>
                 <NumberField.Decrement>
-                  <MinusIcon className="size-3" />
+                  <MinusIcon />
                 </NumberField.Decrement>
                 <NumberField.Input ref={ref} onBlur={onBlur} />
                 <NumberField.Increment>
-                  <PlusIcon className="size-3" />
+                  <PlusIcon />
                 </NumberField.Increment>
               </NumberField.Group>
             </NumberField.Root>
@@ -385,7 +385,7 @@ function ReactHookForm() {
                           onBlur={onBlur}
                         >
                           <Checkbox.Indicator>
-                            <CheckIcon className="size-3" />
+                            <CheckIcon />
                           </Checkbox.Indicator>
                         </Checkbox.Root>
                         {val}
@@ -416,7 +416,16 @@ export default function App() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
       <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -425,7 +434,16 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -433,7 +451,16 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
       <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -442,7 +469,16 @@ function PlusIcon(props: React.ComponentProps<'svg'>) {
 
 function MinusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
index 26d8a6aec8e..528b26ea1cb 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
@@ -136,7 +136,7 @@ function TanstackForm() {
                     <div className="absolute right-0 bottom-0 inline-flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
                       <Combobox.Clear />
                       <Combobox.Trigger>
-                        <Combobox.ChevronDownIcon className="size-3" />
+                        <Combobox.ChevronDownIcon />
                       </Combobox.Trigger>
                     </div>
                   </Combobox.InputGroup>
@@ -150,7 +150,7 @@ function TanstackForm() {
                           return (
                             <Combobox.Item key={region} value={region}>
                               <Combobox.ItemIndicator>
-                                <CheckIcon className="size-3" />
+                                <CheckIcon />
                               </Combobox.ItemIndicator>
                               <span className="col-start-2">{region}</span>
                             </Combobox.Item>
@@ -240,7 +240,7 @@ function TanstackForm() {
                   <Select.Trigger className="w-48" onBlur={field.handleBlur}>
                     <Select.Value />
                     <Select.Icon>
-                      <ChevronUpDownIcon className="size-3" />
+                      <ChevronUpDownIcon />
                     </Select.Icon>
                   </Select.Trigger>
                 </div>
@@ -253,7 +253,7 @@ function TanstackForm() {
                           return (
                             <Select.Item key={value} value={value}>
                               <Select.ItemIndicator>
-                                <CheckIcon className="size-3" />
+                                <CheckIcon />
                               </Select.ItemIndicator>
                               <Select.ItemText>{label}</Select.ItemText>
                             </Select.Item>
@@ -292,11 +292,11 @@ function TanstackForm() {
                 <Field.Label>Number of instances</Field.Label>
                 <NumberField.Group>
                   <NumberField.Decrement>
-                    <MinusIcon className="size-3" />
+                    <MinusIcon />
                   </NumberField.Decrement>
                   <NumberField.Input onBlur={field.handleBlur} />
                   <NumberField.Increment>
-                    <PlusIcon className="size-3" />
+                    <PlusIcon />
                   </NumberField.Increment>
                 </NumberField.Group>
               </NumberField.Root>
@@ -453,7 +453,7 @@ function TanstackForm() {
                         <Field.Label className="uppercase">
                           <Checkbox.Root value={checkboxValue} onBlur={field.handleBlur}>
                             <Checkbox.Indicator>
-                              <CheckIcon className="size-3" />
+                              <CheckIcon />
                             </Checkbox.Indicator>
                           </Checkbox.Root>
                           {checkboxValue}
@@ -488,7 +488,16 @@ export default function App() {
 
 function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
       <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -497,7 +506,16 @@ function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
 
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
@@ -505,7 +523,16 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
       <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
@@ -514,7 +541,16 @@ function PlusIcon(props: React.ComponentProps<'svg'>) {
 
 function MinusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
index 68740561120..f2d643734da 100644
--- a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
@@ -59,11 +59,6 @@
   }
 }
 
-.Icon {
-  width: 1rem;
-  height: 1rem;
-}
-
 .Button {
   box-sizing: border-box;
   display: flex;
diff --git a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.tsx b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.tsx
index f31792dd51f..f76f8c26b7c 100644
--- a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.tsx
@@ -26,11 +26,7 @@ export default function ExamplePreventBaseUIHandler() {
           className={styles.Toggle}
           render={(props, state) => (
             <button type="button" {...getToggleProps(props)}>
-              {state.pressed ? (
-                <HeartFilledIcon className={styles.Icon} />
-              ) : (
-                <HeartOutlineIcon className={styles.Icon} />
-              )}
+              {state.pressed ? <HeartFilledIcon /> : <HeartOutlineIcon />}
             </button>
           )}
         />
@@ -45,7 +41,14 @@ export default function ExamplePreventBaseUIHandler() {
 
 function HeartFilledIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path d="M7.99961 13.8667C7.88761 13.8667 7.77561 13.8315 7.68121 13.7611C7.43321 13.5766 1.59961 9.1963 1.59961 5.8667C1.59961 3.80856 3.27481 2.13336 5.33294 2.13336C6.59054 2.13336 7.49934 2.81176 7.99961 3.3131C8.49988 2.81176 9.40868 2.13336 10.6663 2.13336C12.7244 2.13336 14.3996 3.80803 14.3996 5.8667C14.3996 9.1963 8.56601 13.5766 8.31801 13.7616C8.22361 13.8315 8.11161 13.8667 7.99961 13.8667Z" />
     </svg>
   );
@@ -53,7 +56,14 @@ function HeartFilledIcon(props: React.ComponentProps<'svg'>) {
 
 function HeartOutlineIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
       <path
         fillRule="evenodd"
         clipRule="evenodd"

From fe4d984ce0e8e0b244d9302ec87a9fd327d7e759 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 13 May 2026 15:26:35 +0200
Subject: [PATCH 184/257] Remove unnecessary icon wrapper class names

---
 .../autocomplete/demos/grid/css-modules/index.module.css  | 4 ----
 .../demos/input-inside-popup/css-modules/index.module.css | 1 -
 .../combobox/demos/input-inside-popup/tailwind/index.tsx  | 2 +-
 .../select/demos/grouped/css-modules/index.module.css     | 4 ----
 .../components/select/demos/grouped/css-modules/index.tsx | 2 +-
 .../components/select/demos/grouped/tailwind/index.tsx    | 2 +-
 .../select/demos/hero/css-modules/index.module.css        | 4 ----
 .../components/select/demos/hero/css-modules/index.tsx    | 2 +-
 .../react/components/select/demos/hero/tailwind/index.tsx | 2 +-
 .../select/demos/multiple/css-modules/index.module.css    | 4 ----
 .../select/demos/multiple/css-modules/index.tsx           | 2 +-
 .../components/select/demos/multiple/tailwind/index.tsx   | 2 +-
 .../demos/object-values/css-modules/index.module.css      | 8 +-------
 .../select/demos/object-values/css-modules/index.tsx      | 2 +-
 .../select/demos/object-values/tailwind/index.tsx         | 4 ++--
 .../toolbar/demos/hero/css-modules/index.module.css       | 4 ----
 .../components/toolbar/demos/hero/css-modules/index.tsx   | 2 +-
 .../components/toolbar/demos/hero/tailwind/index.tsx      | 2 +-
 .../animated-select-motion/css-modules/index.module.css   | 4 ----
 .../demos/animated-select-motion/css-modules/index.tsx    | 2 +-
 .../react/handbook/forms/demos/components/select.tsx      | 4 ++--
 21 files changed, 16 insertions(+), 47 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
index 9aee6360ff9..c8514981df7 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
@@ -163,10 +163,6 @@
   }
 }
 
-.TriggerIcon {
-  display: flex;
-}
-
 .InputContainer {
   box-sizing: border-box;
   position: relative;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
index afc634c25df..4f637b90098 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
@@ -79,7 +79,6 @@
 }
 
 .TriggerIcon {
-  display: flex;
   color: var(--color-neutral-950);
 
   @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index eef7e1ec8e6..e85a3b967ef 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -11,7 +11,7 @@ export default function ExamplePopoverCombobox() {
         </Combobox.Label>
         <Combobox.Trigger className="flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white px-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 data-popup-open:bg-neutral-100 data-placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:data-placeholder:text-neutral-400 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800">
           <Combobox.Value placeholder="Select country" />
-          <Combobox.Icon className="flex text-neutral-950 dark:text-white">
+          <Combobox.Icon className="text-neutral-950 dark:text-white">
             <ChevronUpDownIcon />
           </Combobox.Icon>
         </Combobox.Trigger>
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index 0ac7d399655..2034a85114d 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -99,10 +99,6 @@
   }
 }
 
-.SelectIcon {
-  display: flex;
-}
-
 .Positioner {
   outline: none;
   z-index: 10;
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
index 5f5e61dd022..2e2600be1df 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleSelectGrouped() {
       <Select.Root items={groupedProduce}>
         <Select.Trigger className={styles.Select}>
           <Select.Value className={styles.Value} placeholder="Select produce" />
-          <Select.Icon className={styles.SelectIcon}>
+          <Select.Icon>
             <ChevronUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index eb09a93158c..1ad2ed521e2 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function ExampleSelectGrouped() {
             className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400"
             placeholder="Select produce"
           />
-          <Select.Icon className="flex">
+          <Select.Icon>
             <ChevronUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
index 5a634227a5c..e90930f26b2 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
@@ -99,10 +99,6 @@
   }
 }
 
-.SelectIcon {
-  display: flex;
-}
-
 .Positioner {
   outline: none;
   z-index: 10;
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
index c64654b6297..264408a298d 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
@@ -17,7 +17,7 @@ export default function ExampleSelect() {
         <Select.Label className={styles.Label}>Apple</Select.Label>
         <Select.Trigger className={styles.Select}>
           <Select.Value className={styles.Value} placeholder="Select apple" />
-          <Select.Icon className={styles.SelectIcon}>
+          <Select.Icon>
             <ChevronUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index b8c04bb07a9..65590d56bad 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -21,7 +21,7 @@ export default function ExampleSelect() {
             className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400"
             placeholder="Select apple"
           />
-          <Select.Icon className="flex">
+          <Select.Icon>
             <ChevronUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
index a904696f864..8bd74e85416 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
@@ -99,10 +99,6 @@
   }
 }
 
-.SelectIcon {
-  display: flex;
-}
-
 .Positioner {
   outline: none;
   z-index: 10;
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
index 437af3a0b28..877cee9ec09 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
@@ -37,7 +37,7 @@ export default function MultiSelectExample() {
         <Select.Label className={styles.Label}>Languages</Select.Label>
         <Select.Trigger className={styles.Select}>
           <Select.Value className={styles.Value}>{renderValue}</Select.Value>
-          <Select.Icon className={styles.SelectIcon}>
+          <Select.Icon>
             <ChevronUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index f6c48e1101a..b531d914c05 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -40,7 +40,7 @@ export default function MultiSelectExample() {
           <Select.Value className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400">
             {renderValue}
           </Select.Value>
-          <Select.Icon className="flex">
+          <Select.Icon>
             <ChevronUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
index 89c6a124fc5..314aabed7ec 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
@@ -20,7 +20,7 @@
 .Select {
   box-sizing: border-box;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
   min-height: 2rem;
@@ -114,12 +114,6 @@
   }
 }
 
-.SelectIcon {
-  display: flex;
-  align-items: center;
-  align-self: center;
-}
-
 .Positioner {
   outline: none;
   z-index: 10;
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
index 1aa3abe7ef4..627ea37839a 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
@@ -19,7 +19,7 @@ export default function ObjectValueSelect() {
               </span>
             )}
           </Select.Value>
-          <Select.Icon className={styles.SelectIcon}>
+          <Select.Icon>
             <ChevronUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index 2733ae243b9..4fa30bf6a2b 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ObjectValueSelect() {
         <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Shipping method
         </Select.Label>
-        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-start justify-between gap-3 pl-2 pr-2 py-1.5 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-center justify-between gap-3 pl-2 pr-2 py-1.5 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           <Select.Value>
             {(method: ShippingMethod) => (
               <span className="flex flex-col items-start gap-0.5">
@@ -20,7 +20,7 @@ export default function ObjectValueSelect() {
               </span>
             )}
           </Select.Value>
-          <Select.Icon className="flex items-center self-center">
+          <Select.Icon>
             <ChevronUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
index 83eff048f9c..4e0005cfd12 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
@@ -154,10 +154,6 @@
   }
 }
 
-.SelectIcon {
-  display: flex;
-}
-
 .Positioner {
   outline: none;
   user-select: none;
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
index ea13dcb37c7..5d195b96b16 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
@@ -39,7 +39,7 @@ export default function ExampleToolbar() {
       <Select.Root defaultValue="Helvetica">
         <Toolbar.Button render={<Select.Trigger />} className={styles.Button}>
           <Select.Value />
-          <Select.Icon className={styles.SelectIcon}>
+          <Select.Icon>
             <ChevronUpDownIcon />
           </Select.Icon>
         </Toolbar.Button>
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
index 4863780e819..1d31f368235 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
@@ -47,7 +47,7 @@ export default function ExampleToolbar() {
           className="flex h-8 min-w-32 cursor-default items-center justify-between gap-2 border-0 bg-transparent px-2 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:not-data-pressed:bg-neutral-200 data-pressed:bg-neutral-950 data-pressed:text-white data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white data-popup-open:bg-neutral-100 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 dark:data-popup-open:bg-neutral-800 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         >
           <Select.Value />
-          <Select.Icon className="flex">
+          <Select.Icon>
             <ChevronUpDownIcon />
           </Select.Icon>
         </Toolbar.Button>
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
index 990b13bf353..16328c0ac0a 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
@@ -61,10 +61,6 @@
   }
 }
 
-.SelectIcon {
-  display: flex;
-}
-
 .Value[data-placeholder] {
   color: var(--color-neutral-500);
 
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
index 337accffb1c..7f05c35dcae 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
@@ -45,7 +45,7 @@ export default function AnimatedSelectMotionDemo() {
     <Select.Root items={fonts} open={open} onOpenChange={setOpen}>
       <Select.Trigger className={styles.Select}>
         <Select.Value className={styles.Value} />
-        <Select.Icon className={styles.SelectIcon}>
+        <Select.Icon>
           <ChevronUpDownIcon />
         </Select.Icon>
       </Select.Trigger>
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
index d067518bf5a..4add39ca232 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
@@ -42,8 +42,8 @@ export function Value({ className, ...props }: Select.Value.Props) {
   );
 }
 
-export function Icon({ className, ...props }: Select.Icon.Props) {
-  return <Select.Icon className={clsx('flex', className)} {...props} />;
+export function Icon(props: Select.Icon.Props) {
+  return <Select.Icon {...props} />;
 }
 
 export function Portal(props: Select.Portal.Props) {

From dac18a61edd7fe1bcaac68feca2441f8222c0d31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Wed, 13 May 2026 15:43:59 +0200
Subject: [PATCH 185/257] Drawer: remove radius on iOS

---
 .../components/drawer/demos/hero/css-modules/index.module.css   | 1 -
 .../react/components/drawer/demos/hero/tailwind/index.tsx       | 2 +-
 .../components/drawer/demos/nested/css-modules/index.module.css | 1 -
 .../react/components/drawer/demos/nested/tailwind/index.tsx     | 2 +-
 .../drawer/demos/non-modal/css-modules/index.module.css         | 1 -
 .../react/components/drawer/demos/non-modal/tailwind/index.tsx  | 2 +-
 .../drawer/demos/swipe-area/css-modules/index.module.css        | 1 -
 .../react/components/drawer/demos/swipe-area/tailwind/index.tsx | 2 +-
 8 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
index 3a068eb77b7..743e5262ce8 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
@@ -158,7 +158,6 @@
     @media (prefers-color-scheme: dark) {
       border: 1px solid white;
     }
-    border-radius: 10px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
index e08de0b962a..a71eb32ee28 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleDrawer() {
       <Drawer.Portal>
         <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] fixed inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
         <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] fixed inset-0 flex items-stretch justify-end p-(--viewport-padding)">
-          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Drawer.Content className="mx-auto w-full max-w-[32rem]">
               <Drawer.Title className="mb-1 text-base font-bold">Drawer</Drawer.Title>
               <Drawer.Description className="mb-6 text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
index 9c42773af27..77135b7ed4b 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
@@ -168,7 +168,6 @@
     content: '';
     inset: 0;
     position: absolute;
-    border-radius: inherit;
     background-color: transparent;
     pointer-events: none;
     transition: background-color 450ms cubic-bezier(0.32, 0.72, 0, 1);
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
index 6171b3ae97f..624b2b787b8 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
@@ -127,7 +127,7 @@ export default function ExampleDrawerNested() {
 }
 
 const popupClassName =
-  "[--bleed:3rem] [--peek:1rem] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))] group/popup relative -mx-px -mb-[3rem] w-[calc(100%+2px)] max-h-[calc(80vh+3rem)] [height:var(--drawer-height,auto)] border border-neutral-950 border-b-0 bg-white px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform-origin:50%_calc(100%-var(--bleed))] [transform:translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-transparent after:content-[''] after:transition-[background-color] after:duration-[450ms] after:ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-swiping:duration-0 data-nested-drawer-swiping:duration-0 data-starting-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-open:h-[calc(var(--height)+var(--bleed))] data-nested-drawer-open:overflow-hidden data-nested-drawer-open:after:bg-black/5 dark:border-white dark:border-b-0 dark:bg-neutral-950 dark:text-white dark:shadow-none [transition:transform_450ms_cubic-bezier(0.32,0.72,0,1),height_450ms_cubic-bezier(0.32,0.72,0,1),opacity_450ms_cubic-bezier(0.32,0.72,0,1)]";
+  "[--bleed:3rem] [--peek:1rem] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))-var(--bleed)))] group/popup relative -mx-px -mb-[3rem] w-[calc(100%+2px)] max-h-[calc(80vh+3rem)] [height:var(--drawer-height,auto)] border border-neutral-950 border-b-0 bg-white px-6 pt-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform-origin:50%_calc(100%-var(--bleed))] [transform:translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] after:pointer-events-none after:absolute after:inset-0 after:bg-transparent after:content-[''] after:transition-[background-color] after:duration-[450ms] after:ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-swiping:duration-0 data-nested-drawer-swiping:duration-0 data-starting-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:[transform:translateY(calc(100%-var(--bleed)+2px))] data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-open:h-[calc(var(--height)+var(--bleed))] data-nested-drawer-open:overflow-hidden data-nested-drawer-open:after:bg-black/5 dark:border-white dark:border-b-0 dark:bg-neutral-950 dark:text-white dark:shadow-none [transition:transform_450ms_cubic-bezier(0.32,0.72,0,1),height_450ms_cubic-bezier(0.32,0.72,0,1),opacity_450ms_cubic-bezier(0.32,0.72,0,1)]";
 
 const contentClassName =
   'mx-auto w-full max-w-[32rem] transition-opacity duration-[300ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] group-data-nested-drawer-open/popup:opacity-0 group-data-nested-drawer-swiping/popup:opacity-100';
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
index 4875a096d41..eff7b8bd941 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
@@ -163,7 +163,6 @@
     @media (prefers-color-scheme: dark) {
       border: 1px solid white;
     }
-    border-radius: 10px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
index f2d6e7eb02e..fb0972313a1 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleDrawer() {
       </Drawer.Trigger>
       <Drawer.Portal>
         <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] fixed inset-0 flex items-stretch justify-end p-(--viewport-padding) pointer-events-none">
-          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] pointer-events-auto h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:shadow-[0.25rem_0.25rem_0] data-ending-style:shadow-black/0 data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:shadow-[0.25rem_0.25rem_0] data-starting-style:shadow-black/0 data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] pointer-events-auto h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-[transform,box-shadow] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:shadow-[0.25rem_0.25rem_0] data-ending-style:shadow-black/0 data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:shadow-[0.25rem_0.25rem_0] data-starting-style:shadow-black/0 data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Drawer.Content className="mx-auto w-full max-w-[32rem]">
               <Drawer.Title className="mb-1 text-base font-bold">Non-modal drawer</Drawer.Title>
               <Drawer.Description className="mb-6 text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
index aa5f1dd4d77..888d79000e6 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
@@ -227,7 +227,6 @@
     @media (prefers-color-scheme: dark) {
       border: 1px solid white;
     }
-    border-radius: 10px;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
index ccaa3240d1b..9629d5bdff1 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleDrawerSwipeArea() {
         <Drawer.Portal container={portalContainer}>
           <Drawer.Backdrop className="[--backdrop-opacity:0.2] [--bleed:3rem] dark:[--backdrop-opacity:0.7] absolute inset-0 min-h-dvh bg-black opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:absolute" />
           <Drawer.Viewport className="[--viewport-padding:0px] supports-[-webkit-touch-callout:none]:[--viewport-padding:0.625rem] absolute inset-0 z-20 flex items-stretch justify-end p-(--viewport-padding)">
-            <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Drawer.Popup className="[--bleed:3rem] supports-[-webkit-touch-callout:none]:[--bleed:0px] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] border-l border-neutral-950 bg-white p-6 pr-[calc(1.5rem+3rem)] text-neutral-950 outline-none shadow-[0.25rem_0.25rem_0] shadow-black/12 overflow-y-auto touch-auto [transform:translateX(var(--drawer-swipe-movement-x))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-ending-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-starting-style:[transform:translateX(calc(100%-var(--bleed)+var(--viewport-padding)+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-3rem)] supports-[-webkit-touch-callout:none]:border supports-[-webkit-touch-callout:none]:pr-6 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Drawer.Content className="mx-auto w-full max-w-[32rem]">
                 <Drawer.Title className="mb-1 text-base font-bold">Library</Drawer.Title>
                 <Drawer.Description className="mb-6 text-sm text-neutral-600 dark:text-neutral-400">

From 12f056ab7c191b1b0b6bffcbf1b255ee97316b70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 14 May 2026 00:17:32 +0200
Subject: [PATCH 186/257] Tooltip: standardize scale instead of transform

---
 .../demos/anchored/css-modules/index.module.css    | 14 +++++++++-----
 .../toast/demos/anchored/tailwind/index.tsx        |  8 ++++----
 .../tailwind/index.tsx                             |  2 +-
 .../css-modules/index.module.css                   |  4 ++--
 .../detached-triggers-full/tailwind/index.tsx      |  6 +++---
 .../detached-triggers-simple/tailwind/index.tsx    |  2 +-
 .../demos/hero/css-modules/index.module.css        |  4 ++--
 .../tooltip/demos/hero/tailwind/index.tsx          |  2 +-
 .../components/tooltip/demos/index.module.css      |  4 ++--
 9 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
index c788fe22e93..d8d19836942 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
@@ -21,7 +21,7 @@
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
-    transform 100ms ease-out,
+    scale 100ms ease-out,
     opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
@@ -34,7 +34,11 @@
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.98);
+    scale: 0.98;
+  }
+
+  &[data-instant] {
+    transition: none;
   }
 
   &:focus-visible {
@@ -266,7 +270,7 @@
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
-    transform 100ms ease-out,
+    scale 100ms ease-out,
     opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
@@ -279,11 +283,11 @@
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.98);
+    scale: 0.98;
   }
 
   &[data-instant] {
-    transition-duration: 0ms;
+    transition: none;
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index 2dc78ba654e..495641293e5 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -77,8 +77,8 @@ function CopyButton() {
       </Tooltip.Trigger>
       <Tooltip.Portal>
         <Tooltip.Positioner sideOffset={10}>
-          <Tooltip.Popup className="relative flex origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-instant:duration-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
-            <Tooltip.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
+          <Tooltip.Popup className="relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Tooltip.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             Copy
           </Tooltip.Popup>
         </Tooltip.Positioner>
@@ -100,9 +100,9 @@ function AnchoredToasts() {
           >
             <Toast.Root
               toast={toast}
-              className="relative flex w-max origin-[var(--transform-origin)] flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:[transform:scale(0.98)] data-ending-style:opacity-0 data-starting-style:[transform:scale(0.98)] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+              className="relative flex flex-col w-max border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
             >
-              <Toast.Arrow className="relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-neutral-950 before:bg-white before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)] dark:before:border-white dark:before:bg-neutral-950" />
+              <Toast.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Toast.Content>
                 <Toast.Description />
               </Toast.Content>
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
index ac87ec0a7cb..84a0580c83e 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -12,7 +12,7 @@ const buttonClass =
   'flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
 
 const popupClass =
-  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
+  'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:[transform:scale(0.98)] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:[transform:scale(0.98)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
 
 const arrowClass =
   "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
index 8e7c05ef2db..d3aa60c0d5e 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
@@ -109,7 +109,7 @@
     width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
     height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
     opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
-    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+    scale 0.35s cubic-bezier(0.22, 1, 0.36, 1);
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
@@ -121,7 +121,7 @@
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.9);
+    scale: 0.9;
   }
 
   &[data-instant] {
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
index c12ac39980b..2f29004ac9e 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
@@ -59,12 +59,12 @@ export default function TooltipDetachedTriggersFullDemo() {
                   text-sm text-neutral-950 dark:text-white
                   origin-[var(--transform-origin)]
                   shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none
-                  transition-[width,height,opacity,scale]
+                  transition-[width,height,opacity,transform]
                   duration-[0.35s]
                   ease-[cubic-bezier(0.22,1,0.36,1)]
-                  data-ending-style:opacity-0 data-ending-style:scale-90
+                  data-ending-style:opacity-0 data-ending-style:[transform:scale(0.9)]
                   data-instant:transition-none
-                  data-starting-style:opacity-0 data-starting-style:scale-90"
+                  data-starting-style:opacity-0 data-starting-style:[transform:scale(0.9)]"
               >
                 <Tooltip.Arrow className={arrowClass} />
 
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
index d8663c4a4fc..c81848d0935 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
@@ -9,7 +9,7 @@ const triggerClass =
   'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
 
 const popupClass =
-  'relative border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
+  'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:[transform:scale(0.98)] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:[transform:scale(0.98)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
 
 const arrowClass =
   "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
index ee4daadfbae..8a029f9c477 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
@@ -78,7 +78,7 @@
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
-    transform 100ms ease-out,
+    scale 100ms ease-out,
     opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
@@ -91,7 +91,7 @@
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.98);
+    scale: 0.98;
   }
 
   &[data-instant] {
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
index 9bf3df210cc..a20c854e92b 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
@@ -5,7 +5,7 @@ const triggerClass =
   'flex size-8 items-center justify-center border-0 bg-transparent text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-100 active:bg-neutral-200 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
 
 const popupClass =
-  'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
+  'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:[transform:scale(0.98)] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:[transform:scale(0.98)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
 
 const arrowClass =
   "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
index 5fb2e12e905..5824df1b53c 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
@@ -97,7 +97,7 @@
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
-    transform 100ms ease-out,
+    scale 100ms ease-out,
     opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
@@ -110,7 +110,7 @@
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.98);
+    scale: 0.98;
   }
 
   &[data-instant] {

From 96985e77e3b9e381f67214d07bacba8b45706359 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 14 May 2026 15:43:10 +0200
Subject: [PATCH 187/257] mergeProps: fix buttons styles

---
 .../css-modules/index.module.css              | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
index f2d643734da..bf4a9465e8c 100644
--- a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
@@ -49,6 +49,14 @@
     }
   }
 
+  &:active:not([data-disabled]) {
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-neutral-700);
+    }
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;
@@ -67,30 +75,41 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: none;
-  background-color: var(--color-neutral-200);
+  border: 1px solid var(--color-neutral-950);
+  border-radius: 0;
+  background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.25rem;
+  line-height: 1;
+  white-space: nowrap;
   color: var(--color-neutral-950);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-800);
+    border: 1px solid white;
+    background-color: var(--color-neutral-950);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-300);
+      background-color: var(--color-neutral-100);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-700);
+        background-color: var(--color-neutral-800);
       }
     }
   }
 
+  &:active {
+    background-color: var(--color-neutral-200);
+
+    @media (prefers-color-scheme: dark) {
+        background-color: var(--color-neutral-700);
+    }
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
     outline-offset: -2px;

From 2114ae1e96cc898fa68c8e22c939b91f0d4a63dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 14 May 2026 18:40:31 +0200
Subject: [PATCH 188/257] All: change focus rings

---
 .../accordion/demos/_index.module.css         |  1 +
 .../accordion/demos/hero/tailwind/index.tsx   |  6 ++---
 .../demos/multiple/tailwind/index.tsx         |  6 ++---
 .../alert-dialog/demos/_index.module.css      |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../demos/hero/css-modules/index.module.css   |  2 +-
 .../demos/hero/tailwind/index.tsx             |  2 +-
 .../demos/async/css-modules/index.module.css  |  2 +-
 .../demos/async/tailwind/index.tsx            |  2 +-
 .../css-modules/index.module.css              |  2 +-
 .../demos/auto-highlight/tailwind/index.tsx   |  2 +-
 .../css-modules/index.module.css              | 23 +++++++++++--------
 .../demos/command-palette/tailwind/index.tsx  | 18 +++++++--------
 .../css-modules/index.module.css              |  2 +-
 .../demos/fuzzy-matching/tailwind/index.tsx   |  2 +-
 .../demos/grid/css-modules/index.module.css   |  8 +++----
 .../demos/grid/tailwind/index.tsx             |  6 ++---
 .../grouped/css-modules/index.module.css      |  2 +-
 .../demos/grouped/tailwind/index.tsx          |  2 +-
 .../demos/hero/css-modules/index.module.css   |  2 +-
 .../demos/hero/tailwind/index.tsx             |  2 +-
 .../demos/inline/css-modules/index.module.css |  2 +-
 .../demos/inline/tailwind/index.tsx           |  2 +-
 .../demos/limit/css-modules/index.module.css  |  2 +-
 .../demos/limit/tailwind/index.tsx            |  2 +-
 .../virtualized/css-modules/index.module.css  |  2 +-
 .../demos/virtualized/tailwind/index.tsx      |  2 +-
 .../demos/hero/css-modules/index.module.css   |  2 +-
 .../button/demos/hero/tailwind/index.tsx      |  2 +-
 .../loading/css-modules/index.module.css      |  2 +-
 .../button/demos/loading/tailwind/index.tsx   |  2 +-
 .../demos/hero/css-modules/index.module.css   |  2 +-
 .../collapsible/demos/hero/tailwind/index.tsx |  2 +-
 .../css-modules/index.module.css              |  2 +-
 .../demos/async-multiple/tailwind/index.tsx   |  2 +-
 .../async-single/css-modules/index.module.css |  2 +-
 .../demos/async-single/tailwind/index.tsx     |  2 +-
 .../creatable/css-modules/index.module.css    |  6 ++---
 .../demos/creatable/tailwind/index.tsx        |  8 +++----
 .../grouped/css-modules/index.module.css      |  2 +-
 .../combobox/demos/grouped/tailwind/index.tsx |  2 +-
 .../demos/hero/css-modules/index.module.css   |  2 +-
 .../combobox/demos/hero/tailwind/index.tsx    |  2 +-
 .../css-modules/index.module.css              |  3 +--
 .../input-inside-popup/tailwind/index.tsx     |  4 ++--
 .../multiple/css-modules/index.module.css     |  2 +-
 .../demos/multiple/tailwind/index.tsx         |  2 +-
 .../virtualized/css-modules/index.module.css  |  2 +-
 .../demos/virtualized/tailwind/index.tsx      |  2 +-
 .../demos/hero/css-modules/index.module.css   |  9 --------
 .../demos/hero/tailwind/index.tsx             |  2 +-
 .../submenu/css-modules/index.module.css      |  9 --------
 .../demos/submenu/tailwind/index.tsx          |  2 +-
 .../components/dialog/demos/_index.module.css |  2 +-
 .../css-modules/index.module.css              |  4 ++--
 .../close-confirmation/tailwind/index.tsx     | 12 +++++-----
 .../tailwind/index.tsx                        | 10 ++++----
 .../tailwind/index.tsx                        |  4 ++--
 .../demos/hero/css-modules/index.module.css   |  2 +-
 .../dialog/demos/hero/tailwind/index.tsx      |  4 ++--
 .../css-modules/index.module.css              |  4 ++--
 .../demos/inside-scroll/tailwind/index.tsx    |  6 ++---
 .../demos/nested/css-modules/index.module.css |  4 ++--
 .../dialog/demos/nested/tailwind/index.tsx    |  6 ++---
 .../css-modules/index.module.css              |  4 ++--
 .../demos/outside-scroll/tailwind/index.tsx   |  4 ++--
 .../uncontained/css-modules/index.module.css  |  4 ++--
 .../demos/uncontained/tailwind/index.tsx      |  4 ++--
 .../demos/hero/css-modules/index.module.css   |  2 +-
 .../drawer/demos/hero/tailwind/index.tsx      |  4 ++--
 .../css-modules/index.module.css              |  2 +-
 .../demos/indent-provider/tailwind/index.tsx  |  4 ++--
 .../mobile-nav/css-modules/index.module.css   |  6 ++---
 .../demos/mobile-nav/tailwind/index.tsx       |  8 +++----
 .../demos/nested/css-modules/index.module.css |  8 +++----
 .../drawer/demos/nested/tailwind/index.tsx    | 16 ++++++-------
 .../non-modal/css-modules/index.module.css    |  2 +-
 .../drawer/demos/non-modal/tailwind/index.tsx |  4 ++--
 .../position/css-modules/index.module.css     |  2 +-
 .../drawer/demos/position/tailwind/index.tsx  |  4 ++--
 .../snap-points/css-modules/index.module.css  |  2 +-
 .../demos/snap-points/tailwind/index.tsx      |  4 ++--
 .../swipe-area/css-modules/index.module.css   |  2 +-
 .../demos/swipe-area/tailwind/index.tsx       |  2 +-
 .../uncontained/css-modules/index.module.css  |  2 +-
 .../demos/uncontained/tailwind/index.tsx      |  2 +-
 .../demos/hero/css-modules/index.module.css   |  2 +-
 .../field/demos/hero/tailwind/index.tsx       |  2 +-
 .../demos/hero/css-modules/index.module.css   |  2 +-
 .../fieldset/demos/hero/tailwind/index.tsx    |  4 ++--
 .../form-action/css-modules/index.module.css  |  4 ++--
 .../form/demos/form-action/tailwind/index.tsx |  4 ++--
 .../demos/hero/css-modules/index.module.css   |  4 ++--
 .../form/demos/hero/tailwind/index.tsx        |  4 ++--
 .../demos/zod/css-modules/index.module.css    |  4 ++--
 .../form/demos/zod/tailwind/index.tsx         |  6 ++---
 .../demos/hero/css-modules/index.module.css   |  2 +-
 .../input/demos/hero/tailwind/index.tsx       |  2 +-
 .../components/menu/demos/_index.module.css   |  4 ++--
 .../demos/arrow/css-modules/index.module.css  |  2 +-
 .../menu/demos/arrow/tailwind/index.tsx       |  2 +-
 .../css-modules/index.module.css              |  2 +-
 .../demos/checkbox-items/tailwind/index.tsx   |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../detached-triggers-full/tailwind/index.tsx |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../group-labels/css-modules/index.module.css |  2 +-
 .../demos/group-labels/tailwind/index.tsx     |  2 +-
 .../demos/hero/css-modules/index.module.css   |  2 +-
 .../menu/demos/hero/tailwind/index.tsx        |  2 +-
 .../css-modules/index.module.css              |  2 +-
 .../demos/open-on-hover/tailwind/index.tsx    |  2 +-
 .../radio-items/css-modules/index.module.css  |  2 +-
 .../menu/demos/radio-items/tailwind/index.tsx |  2 +-
 .../submenu/css-modules/index.module.css      |  2 +-
 .../menu/demos/submenu/tailwind/index.tsx     |  2 +-
 .../demos/hero/css-modules/index.module.css   |  2 +-
 .../menubar/demos/hero/tailwind/index.tsx     |  8 +++----
 .../demos/hero/css-modules/index.module.css   |  4 ++--
 .../demos/hero/tailwind/index.tsx             |  4 ++--
 .../css-modules/index.module.css              |  8 +++----
 .../demos/nested-inline/tailwind/index.tsx    |  8 +++----
 .../demos/nested/css-modules/index.module.css |  4 ++--
 .../demos/nested/tailwind/index.tsx           |  4 ++--
 .../alphanumeric/css-modules/index.module.css |  2 +-
 .../demos/alphanumeric/tailwind/index.tsx     |  2 +-
 .../css-modules/index.module.css              | 10 ++++----
 .../css-modules/index.module.css              |  2 +-
 .../focused-placeholder/tailwind/index.tsx    |  2 +-
 .../grouped/css-modules/index.module.css      |  2 +-
 .../demos/grouped/tailwind/index.tsx          |  4 ++--
 .../demos/hero/css-modules/index.module.css   |  2 +-
 .../otp-field/demos/hero/tailwind/index.tsx   |  2 +-
 .../password/css-modules/index.module.css     |  2 +-
 .../demos/password/tailwind/index.tsx         |  2 +-
 .../popover/demos/_index.module.css           |  4 ++--
 .../tailwind/index.tsx                        |  6 ++---
 .../css-modules/index.module.css              |  1 +
 .../detached-triggers-full/tailwind/index.tsx |  4 ++--
 .../tailwind/index.tsx                        |  4 ++--
 .../popover/demos/hero/tailwind/index.tsx     |  4 ++--
 .../demos/open-on-hover/tailwind/index.tsx    |  4 ++--
 .../tailwind/index.tsx                        |  2 +-
 .../preview-card/demos/index.module.css       |  2 +-
 .../demos/both/css-modules/index.module.css   |  2 +-
 .../scroll-area/demos/both/tailwind/index.tsx |  2 +-
 .../demos/hero/css-modules/index.module.css   |  2 +-
 .../scroll-area/demos/hero/tailwind/index.tsx |  2 +-
 .../grouped/css-modules/index.module.css      |  2 +-
 .../select/demos/grouped/tailwind/index.tsx   |  2 +-
 .../demos/hero/css-modules/index.module.css   |  2 +-
 .../select/demos/hero/tailwind/index.tsx      |  2 +-
 .../multiple/css-modules/index.module.css     |  2 +-
 .../select/demos/multiple/tailwind/index.tsx  |  2 +-
 .../css-modules/index.module.css              |  2 +-
 .../demos/object-values/tailwind/index.tsx    |  2 +-
 .../demos/hero/css-modules/index.module.css   |  4 ++--
 .../tabs/demos/hero/tailwind/index.tsx        |  4 ++--
 .../demos/hero/css-modules/index.module.css   |  2 +-
 .../toggle/demos/hero/tailwind/index.tsx      |  2 +-
 .../tailwind/index.tsx                        |  4 ++--
 .../css-modules/index.module.css              |  3 ++-
 .../detached-triggers-full/tailwind/index.tsx |  2 +-
 .../tailwind/index.tsx                        |  2 +-
 .../demos/hero/css-modules/index.module.css   |  1 -
 .../tooltip/demos/hero/tailwind/index.tsx     |  2 +-
 .../components/tooltip/demos/index.module.css |  6 +++--
 .../css-modules/index.module.css              |  3 ++-
 .../css-modules/index.module.css              |  4 ++--
 .../css-modules/index.module.css              |  2 +-
 .../forms/demos/components/autocomplete.tsx   |  2 +-
 .../forms/demos/components/button.tsx         |  2 +-
 .../forms/demos/components/combobox.tsx       |  2 +-
 .../handbook/forms/demos/components/field.tsx |  2 +-
 .../forms/demos/components/number-field.tsx   |  4 ++--
 .../forms/demos/components/select.tsx         |  2 +-
 .../forms/demos/components/slider.tsx         |  2 +-
 .../handbook/forms/demos/components/toast.tsx |  2 +-
 .../(docs)/react/handbook/styling/page.mdx    |  2 +-
 .../css-modules/index.module.css              |  6 ++---
 .../css-modules/index.module.css              |  3 +--
 182 files changed, 303 insertions(+), 313 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
index b1b7fa6cabc..854772623d8 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
@@ -62,6 +62,7 @@
   }
 
   &:focus-visible {
+    position: relative;
     outline: 2px solid var(--color-neutral-950);
     z-index: 1;
 
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
index faf7bdc8439..a8908ae47f6 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleAccordion() {
     <Accordion.Root className="flex w-80 max-w-full flex-col border border-neutral-950 text-neutral-950 dark:border-white dark:text-white">
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             What is Base UI?
             <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -21,7 +21,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             How do I get started?
             <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -36,7 +36,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             Can I use it for my project?
             <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
index d95f45bebb2..ceba9049096 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleAccordion() {
     >
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             What is Base UI?
             <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -24,7 +24,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             How do I get started?
             <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
@@ -39,7 +39,7 @@ export default function ExampleAccordion() {
 
       <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             Can I use it for my project?
             <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
index ad6e24aa34e..196fec4ca99 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
@@ -43,7 +43,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index 96c8b53aefe..fa0210be608 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -7,7 +7,7 @@ type AlertPayload = { message: string };
 const demoAlertDialog = AlertDialog.createHandle<AlertPayload>();
 
 const buttonClasses =
-  'flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
+  'flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
index c266aea6ef8..b863dcec53b 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { AlertDialog } from '@base-ui/react/alert-dialog';
 const demoAlertDialog = AlertDialog.createHandle();
 
 const buttonClasses =
-  'flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
+  'flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
index e2bb559431c..97fa5bea30e 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
@@ -51,7 +51,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
index c3c60653710..cbb9dc6808d 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/tailwind/index.tsx
@@ -1,7 +1,7 @@
 import { AlertDialog } from '@base-ui/react/alert-dialog';
 
 const buttonClasses =
-  'flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
+  'flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400';
 
 const dangerButtonClasses = `${buttonClasses} text-red-700 dark:text-red-400`;
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
index a8dbf980cb6..5dc5419ef35 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
@@ -35,7 +35,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
index 7a4d1add598..f1917f83ac3 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
@@ -81,7 +81,7 @@ export default function ExampleAsyncAutocomplete() {
         Search movies by name or year
         <Autocomplete.Input
           placeholder="e.g. Pulp Fiction or 1994"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
index 5d324012680..58af7248d70 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
@@ -35,7 +35,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
index 65f0323f65b..8ffd2377efa 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleAutocompleteAutoHighlight() {
         Auto highlight on type
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
index fa5026bc507..245f397a697 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
@@ -45,7 +45,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -68,6 +68,10 @@
   &[data-ending-style] {
     opacity: 0;
   }
+
+  @supports (-webkit-touch-callout: none) {
+    position: absolute;
+  }
 }
 
 .Viewport {
@@ -93,7 +97,6 @@
   max-height: min(36rem, calc(100dvh - 5rem));
   display: flex;
   flex-direction: column;
-
   border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
@@ -113,10 +116,11 @@
 
 .Input {
   box-sizing: border-box;
+  position: relative;
+  z-index: 1;
   padding: 0 0.75rem;
   margin: 0;
   border: none;
-  border-bottom: 1px solid var(--color-neutral-950);
   width: 100%;
   height: 2.5rem;
   border-radius: 0;
@@ -126,7 +130,6 @@
   font-weight: 400;
   background-color: white;
   color: var(--color-neutral-950);
-  letter-spacing: 0.016em;
   outline: none;
 
   @media (any-pointer: coarse) {
@@ -135,7 +138,6 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    border-bottom: 1px solid white;
     background-color: var(--color-neutral-950);
     color: white;
   }
@@ -150,7 +152,6 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -165,6 +166,11 @@
   min-height: 0;
   max-height: min(60dvh, 24rem);
   overflow: hidden;
+  border-top: 1px solid var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    border-color: white;
+  }
 }
 
 .ListViewport {
@@ -176,7 +182,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -207,6 +213,7 @@
   display: flex;
   align-items: center;
   min-height: 2rem;
+  margin: 0;
   padding: 0 1.5rem 0 0.75rem;
   font-size: 0.875rem;
   line-height: 1;
@@ -231,7 +238,6 @@
   gap: 0.5rem;
   align-items: center;
   font-size: 0.875rem;
-  letter-spacing: 0.016em;
   line-height: 1.25;
   font-weight: 400;
 
@@ -255,7 +261,6 @@
 .ItemType {
   font-size: 0.875rem;
   color: var(--color-neutral-500);
-  letter-spacing: 0.00625em;
   white-space: nowrap;
 
   @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
index 02b54d09234..a3cf92495e6 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleAutocompleteCommandPalette() {
 
   return (
     <Dialog.Root open={open} onOpenChange={setOpen}>
-      <Dialog.Trigger className="flex h-8 cursor-default items-center justify-center border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700">
+      <Dialog.Trigger className="flex h-8 cursor-default items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700">
         Open command palette
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -31,13 +31,13 @@ export default function ExampleAutocompleteCommandPalette() {
               keepHighlight
             >
               <Autocomplete.Input
-                className="h-10 w-full border-0 border-b border-neutral-950 bg-white px-4 text-sm any-pointer-coarse:text-base font-normal tracking-[0.016em] text-neutral-950 outline-none placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400"
+                className="relative z-1 h-10 w-full border-0 bg-white px-3 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400"
                 placeholder="Search for apps and commands…"
               />
               <Dialog.Close className="sr-only">Close command palette</Dialog.Close>
 
-              <ScrollArea.Root className="relative flex max-h-[min(60dvh,24rem)] min-h-0 flex-[0_1_auto] overflow-hidden">
-                <ScrollArea.Viewport className="min-h-0 flex-1 overscroll-contain [scroll-padding-block:0.25rem] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+              <ScrollArea.Root className="relative flex max-h-[min(60dvh,24rem)] min-h-0 flex-[0_1_auto] overflow-hidden border-t border-neutral-950 dark:border-t-white">
+                <ScrollArea.Viewport className="min-h-0 flex-1 overscroll-contain [scroll-padding-block:0.25rem] focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                   <ScrollArea.Content style={{ minWidth: '100%' }}>
                     <Autocomplete.Empty>
                       <div className="flex min-h-32 items-center justify-start py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
@@ -52,7 +52,7 @@ export default function ExampleAutocompleteCommandPalette() {
                           items={group.items}
                           className="not-last:mb-1"
                         >
-                          <Autocomplete.GroupLabel className="m-0 flex min-h-8 items-center pr-6 pl-4 text-sm leading-none font-normal text-neutral-500 select-none outline-none dark:text-neutral-400">
+                          <Autocomplete.GroupLabel className="flex min-h-8 items-center pr-6 pl-3 text-sm leading-none font-normal text-neutral-500 select-none outline-none dark:text-neutral-400">
                             {group.value}
                           </Autocomplete.GroupLabel>
                           <Autocomplete.Collection>
@@ -61,10 +61,10 @@ export default function ExampleAutocompleteCommandPalette() {
                                 key={item.value}
                                 value={item}
                                 onClick={handleItemClick}
-                                className="group grid min-h-8 cursor-default grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-6 text-sm font-normal leading-[1.25] tracking-[0.016em] outline-none select-none [scroll-margin-block:0.25rem] data-highlighted:bg-neutral-100 dark:data-highlighted:bg-neutral-800"
+                                className="group grid min-h-8 cursor-default grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-6 text-sm font-normal leading-[1.25] outline-none select-none [scroll-margin-block:0.25rem] data-highlighted:bg-neutral-100 dark:data-highlighted:bg-neutral-800"
                               >
                                 <span className="min-w-0 truncate font-normal">{item.label}</span>
-                                <span className="shrink-0 whitespace-nowrap text-[0.875rem] tracking-[0.00625em] text-neutral-500 group-data-highlighted:text-neutral-700 dark:text-neutral-400 dark:group-data-highlighted:text-neutral-300">
+                                <span className="shrink-0 whitespace-nowrap text-sm text-neutral-500 group-data-highlighted:text-neutral-700 dark:text-neutral-400 dark:group-data-highlighted:text-neutral-300">
                                   {group.value === 'Suggestions' ? 'Application' : 'Command'}
                                 </span>
                               </Autocomplete.Item>
@@ -75,12 +75,12 @@ export default function ExampleAutocompleteCommandPalette() {
                     </Autocomplete.List>
                   </ScrollArea.Content>
                 </ScrollArea.Viewport>
-                <ScrollArea.Scrollbar className="flex w-2 justify-center bg-black/12 opacity-0 transition-opacity pointer-events-none data-hovering:opacity-100 data-hovering:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-scrolling:pointer-events-auto dark:bg-white/12">
+                <ScrollArea.Scrollbar className="flex w-2 justify-center bg-black/12 opacity-0 transition-opacity duration-150 pointer-events-none data-hovering:opacity-100 data-hovering:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-scrolling:pointer-events-auto dark:bg-white/12">
                   <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
                 </ScrollArea.Scrollbar>
               </ScrollArea.Root>
 
-              <div className="flex items-center justify-between border-t border-neutral-950 bg-white px-4 py-2.5 text-xs text-neutral-600 dark:border-white dark:bg-neutral-950 dark:text-neutral-400">
+              <div className="flex items-center justify-between border-t border-neutral-950 bg-white px-3 py-2.5 text-xs text-neutral-600 dark:border-white dark:bg-neutral-950 dark:text-neutral-400">
                 <div className="flex items-center gap-1">
                   <span>Activate</span>
                   <kbd className="inline-flex h-5 min-w-5 items-center justify-center border border-neutral-400 bg-neutral-100 px-1 font-mono text-[0.625rem] leading-none font-normal text-neutral-600 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
index 4a23587b57d..8a2dfd368d3 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
@@ -49,7 +49,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
index 0fa32641af3..193c7ad164b 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleFuzzyMatchingAutocomplete() {
         Fuzzy search documentation
         <Autocomplete.Input
           placeholder="e.g. React"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
index c8514981df7..cb04867180d 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
@@ -32,6 +32,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
+    border-right: 0;
     color: white;
     background-color: var(--color-neutral-950);
   }
@@ -47,7 +48,7 @@
   &:focus {
     position: relative;
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -100,7 +101,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -155,7 +156,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -210,7 +211,6 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
index bd6f3c2781c..415b9cdf1c9 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
@@ -35,7 +35,7 @@ export default function ExampleEmojiPicker() {
         <input
           ref={textInputRef}
           type="text"
-          className="-mr-px h-8 border border-r-0 border-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 bg-white dark:bg-neutral-950 focus:relative focus:outline-2 focus:-outline-offset-2 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="-mr-px h-8 border border-r-0 border-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 bg-white dark:bg-neutral-950 focus:relative focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
           placeholder="iMessage"
           value={textValue}
           onChange={(event) => setTextValue(event.target.value)}
@@ -55,7 +55,7 @@ export default function ExampleEmojiPicker() {
           }}
         >
           <Autocomplete.Trigger
-            className="flex size-8 items-center justify-center border border-neutral-950 bg-transparent text-xl leading-none text-neutral-950 outline-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-solid focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-popup-open:bg-neutral-100 dark:border-white dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800"
+            className="flex size-8 items-center justify-center border border-neutral-950 bg-transparent text-xl leading-none text-neutral-950 outline-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-solid focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-popup-open:bg-neutral-100 dark:border-white dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800"
             aria-label="Choose emoji"
           >
             😀
@@ -69,7 +69,7 @@ export default function ExampleEmojiPicker() {
                 <div className="relative z-[2] h-[var(--input-container-height)] w-64 bg-white dark:bg-neutral-950">
                   <Autocomplete.Input
                     placeholder="Search emojis…"
-                    className="h-8 w-full border-0 bg-white px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:bg-neutral-950 dark:text-white"
+                    className="h-8 w-full border-0 bg-white px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:bg-neutral-950 dark:text-white"
                   />
                 </div>
                 <Autocomplete.Empty>
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
index cfdc1ff9de4..66fc7cf8404 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
@@ -35,7 +35,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
index a129194b498..31720cc4494 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleGroupAutocomplete() {
         Select a tag
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
index ea46e54314b..2764385c584 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
@@ -35,7 +35,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
index 2132ce81781..03b4e3063fa 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleAutocomplete() {
         Search tags
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:opacity-100 placeholder:text-neutral-500 placeholder:[-webkit-text-fill-color:var(--color-neutral-500)] dark:placeholder:text-neutral-400 dark:placeholder:[-webkit-text-fill-color:var(--color-neutral-400)] focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:opacity-100 placeholder:text-neutral-500 placeholder:[-webkit-text-fill-color:var(--color-neutral-500)] dark:placeholder:text-neutral-400 dark:placeholder:[-webkit-text-fill-color:var(--color-neutral-400)] focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
index 463ae96ab6f..18d510c4750 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
@@ -41,7 +41,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
index d6bdb008650..3cfe522208a 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleAutocompleteInline() {
         Search tags
         <Autocomplete.Input
           placeholder="e.g. feature"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
index da42e79a5ee..02ba2f1a824 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
@@ -35,7 +35,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
index b72f110dd6a..c935723e261 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
@@ -25,7 +25,7 @@ export default function ExampleAutocompleteLimit() {
         Limit results to 8
         <Autocomplete.Input
           placeholder="e.g. component"
-          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
         />
       </label>
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
index eee28901db8..e066d5cda4f 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
@@ -27,7 +27,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
index 42c7bc046ec..aa25dd9c3a5 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
@@ -32,7 +32,7 @@ export default function ExampleVirtualizedAutocomplete() {
     >
       <label className="flex flex-col gap-1 text-sm font-bold text-neutral-950 dark:text-white">
         Search 10,000 items
-        <Autocomplete.Input className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white" />
+        <Autocomplete.Input className="h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white" />
       </label>
 
       <Autocomplete.Portal>
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
index 65c039125dc..8f9d270c789 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
@@ -54,7 +54,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
index c7d268b4419..10f04745840 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Button } from '@base-ui/react/button';
 
 export default function ExampleButton() {
   return (
-    <Button className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
+    <Button className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
       Submit
     </Button>
   );
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
index 65c039125dc..8f9d270c789 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
@@ -54,7 +54,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
index 51a7b4cb854..e4fcae27ae8 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleButton() {
 
   return (
     <Button
-      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
+      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
       disabled={loading}
       focusableWhenDisabled
       onClick={() => {
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
index 19675440968..cb98e5138fe 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
@@ -61,7 +61,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
index 911366e1a24..d0caa86b691 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Collapsible } from '@base-ui/react/collapsible';
 export default function ExampleCollapsible() {
   return (
     <Collapsible.Root className="flex min-h-36 w-48 flex-col justify-center text-neutral-950 dark:text-white">
-      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
+      <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
         Recovery keys
         <ChevronIcon className="transition-transform duration-100 ease-out group-data-panel-open:rotate-90" />
       </Collapsible.Trigger>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
index 7de2b5d821f..5a48c274409 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
@@ -47,7 +47,7 @@
 
   &:focus-within {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index 094513ee2aa..1a08da9f1cd 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -141,7 +141,7 @@ export default function ExampleAsyncMultipleCombobox() {
         >
           Assign reviewers
         </label>
-        <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-neutral-950 dark:focus-within:outline-white has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
+        <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-neutral-950 dark:focus-within:outline-white has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
           <Combobox.Chips className="flex w-full flex-wrap items-center gap-1">
             <Combobox.Value>
               {(value: DirectoryUser[]) => (
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
index 988ed0ba445..7955a054024 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
@@ -28,7 +28,7 @@
 
   &:focus-within {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index fb2def9b06e..f929407c1bd 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -113,7 +113,7 @@ export default function ExampleAsyncSingleCombobox() {
     >
       <div className="relative flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         <label htmlFor={id}>Assign reviewer</label>
-        <Combobox.InputGroup className="relative h-8 w-64 border border-neutral-950 bg-white dark:bg-neutral-950 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-neutral-950 dark:focus-within:outline-white dark:border-white md:w-80 [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
+        <Combobox.InputGroup className="relative h-8 w-64 border border-neutral-950 bg-white dark:bg-neutral-950 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-neutral-950 dark:focus-within:outline-white dark:border-white md:w-80 [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
           <Combobox.Input
             id={id}
             placeholder="e.g. Michael"
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
index f9419078766..70f336549c4 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
@@ -47,7 +47,7 @@
 
   &:focus-within {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -424,7 +424,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -485,7 +485,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
index 13005bebae5..351f2a766a3 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
@@ -128,7 +128,7 @@ export default function ExampleCreatableCombobox() {
           >
             Labels
           </label>
-          <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-neutral-950 dark:focus-within:outline-white has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
+          <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-neutral-950 dark:focus-within:outline-white has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
             <Combobox.Chips className="flex w-full flex-wrap items-center gap-1">
               <Combobox.Value>
                 {(value: LabelItem[]) => (
@@ -216,17 +216,17 @@ export default function ExampleCreatableCombobox() {
             <form onSubmit={handleCreateSubmit}>
               <input
                 ref={createInputRef}
-                className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:text-white"
+                className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:text-white"
                 placeholder="Label name"
                 defaultValue={pendingQueryRef.current}
               />
               <div className="mt-4 flex justify-end gap-3">
-                <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700">
+                <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700">
                   Cancel
                 </Dialog.Close>
                 <button
                   type="submit"
-                  className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700"
+                  className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700"
                 >
                   Create
                 </button>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
index 8246d2f73bb..efaadb54db7 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
@@ -13,7 +13,7 @@
 
   &:focus-within {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index 4d4bab8fff9..83df43a10cb 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleGroupedCombobox() {
     <Combobox.Root items={groupedProduce}>
       <div className="relative flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         <label htmlFor={id}>Select produce</label>
-        <Combobox.InputGroup className="relative h-8 w-64 border border-neutral-950 bg-white dark:bg-neutral-950 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-neutral-950 dark:focus-within:outline-white dark:border-white [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
+        <Combobox.InputGroup className="relative h-8 w-64 border border-neutral-950 bg-white dark:bg-neutral-950 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-neutral-950 dark:focus-within:outline-white dark:border-white [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
           <Combobox.Input
             placeholder="e.g. Mango"
             id={id}
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
index 66a7bf43dc8..54c6f011d1d 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
@@ -13,7 +13,7 @@
 
   &:focus-within {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
index 7e1384c9ad1..d7a04969964 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleCombobox() {
     <Combobox.Root items={fruits}>
       <div className="relative flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         <label htmlFor={id}>Choose a fruit</label>
-        <Combobox.InputGroup className="relative h-8 w-56 border border-neutral-950 bg-white dark:bg-neutral-950 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-neutral-950 dark:focus-within:outline-white dark:border-white [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
+        <Combobox.InputGroup className="relative h-8 w-56 border border-neutral-950 bg-white dark:bg-neutral-950 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-neutral-950 dark:focus-within:outline-white dark:border-white [&>input]:pr-[calc(0.5rem+2rem)] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]">
           <Combobox.Input
             placeholder="e.g. Apple"
             id={id}
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
index 4f637b90098..742b7706035 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
@@ -62,7 +62,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -135,7 +135,6 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index e85a3b967ef..5923b96db83 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExamplePopoverCombobox() {
         <Combobox.Label className="cursor-default text-sm leading-5 font-bold text-neutral-950 dark:text-white">
           Country
         </Combobox.Label>
-        <Combobox.Trigger className="flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white px-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 data-popup-open:bg-neutral-100 data-placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:data-placeholder:text-neutral-400 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800">
+        <Combobox.Trigger className="flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white px-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 data-popup-open:bg-neutral-100 data-placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:data-placeholder:text-neutral-400 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800">
           <Combobox.Value placeholder="Select country" />
           <Combobox.Icon className="text-neutral-950 dark:text-white">
             <ChevronUpDownIcon />
@@ -24,7 +24,7 @@ export default function ExamplePopoverCombobox() {
               <div className="h-[var(--input-container-height)] w-80 bg-white text-center dark:bg-neutral-950">
                 <Combobox.Input
                   placeholder="e.g. United Kingdom"
-                  className="h-8 w-full min-w-72 border-0 bg-white px-2 dark:bg-neutral-950 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:text-white"
+                  className="h-8 w-full min-w-72 border-0 bg-white px-2 dark:bg-neutral-950 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:text-white"
                 />
               </div>
               <Combobox.Empty>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
index a48c45fddef..c41a0e1bfa9 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
@@ -47,7 +47,7 @@
 
   &:focus-within {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
index adc1e8ae753..1e36512d1bc 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleMultipleCombobox() {
         >
           Programming languages
         </label>
-        <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-neutral-950 dark:focus-within:outline-white has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
+        <Combobox.InputGroup className="flex min-h-8 w-64 cursor-text flex-wrap items-center gap-0.5 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-neutral-950 dark:focus-within:outline-white has-[button]:px-1 dark:border-white min-[32rem]:w-[22rem]">
           <Combobox.Chips className="flex w-full flex-wrap items-center gap-1">
             <Combobox.Value>
               {(value: ProgrammingLanguage[]) => (
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
index 4547bdce742..5834ef81724 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
@@ -27,7 +27,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
index 9648b144ce6..b0a2ca3fa78 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
@@ -34,7 +34,7 @@ export default function ExampleVirtualizedCombobox() {
     >
       <label className="flex flex-col gap-1 text-sm leading-5 font-bold text-neutral-950 dark:text-white">
         Search 10,000 items
-        <Combobox.Input className="h-8 w-64 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white" />
+        <Combobox.Input className="h-8 w-64 border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white" />
       </label>
 
       <Combobox.Portal>
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
index a943f760988..f9816a4d98a 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
@@ -18,15 +18,6 @@
     background-color: var(--color-neutral-950);
     color: white;
   }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
-
-    @media (prefers-color-scheme: dark) {
-      outline-color: white;
-    }
-  }
 }
 
 .Positioner {
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
index 89d0eb6294e..9bbde493d10 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ const itemClass =
 export default function ExampleMenu() {
   return (
     <ContextMenu.Root>
-      <ContextMenu.Trigger className="flex h-[12rem] w-[15rem] items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white">
+      <ContextMenu.Trigger className="flex h-[12rem] w-[15rem] items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none font-normal dark:border-white dark:bg-neutral-950 dark:text-white">
         Right click here
       </ContextMenu.Trigger>
       <ContextMenu.Portal>
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
index 1cc04054c24..b8f8534dcfe 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
@@ -18,15 +18,6 @@
     background-color: var(--color-neutral-950);
     color: white;
   }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
-
-    @media (prefers-color-scheme: dark) {
-      outline-color: white;
-    }
-  }
 }
 
 .Positioner {
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
index de6f4002940..8edc80eac17 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
@@ -11,7 +11,7 @@ const submenuTriggerClass =
 export default function ExampleContextMenu() {
   return (
     <ContextMenu.Root>
-      <ContextMenu.Trigger className="flex h-[12rem] w-[15rem] items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white">
+      <ContextMenu.Trigger className="flex h-[12rem] w-[15rem] items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none font-normal dark:border-white dark:bg-neutral-950 dark:text-white">
         Right click here
       </ContextMenu.Trigger>
       <ContextMenu.Portal>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
index c34a4a05e32..b3577992306 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
@@ -53,7 +53,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
index 7b258011ecc..cb6a4dbb6b3 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
@@ -53,7 +53,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -209,7 +209,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
index d61453bb1d1..0c4df6e1cf9 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleDialog() {
         }
       }}
     >
-      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Tweet
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -44,18 +44,18 @@ export default function ExampleDialog() {
             <textarea
               aria-labelledby={titleId}
               required
-              className="min-h-32 w-full border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 p-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white"
+              className="min-h-32 w-full border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 p-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white"
               placeholder="What’s on your mind?"
               value={textareaValue}
               onChange={(event) => setTextareaValue(event.target.value)}
             />
             <div className="flex justify-end gap-3">
-              <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+              <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                 Cancel
               </Dialog.Close>
               <button
                 type="submit"
-                className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+                className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
               >
                 Tweet
               </button>
@@ -75,12 +75,12 @@ export default function ExampleDialog() {
               </AlertDialog.Description>
             </div>
             <div className="flex justify-end gap-3">
-              <AlertDialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+              <AlertDialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                 Go back
               </AlertDialog.Close>
               <button
                 type="button"
-                className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+                className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                 onClick={() => {
                   setConfirmationOpen(false);
                   setDialogOpen(false);
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
index e551ed340a1..d63e34239c8 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -17,7 +17,7 @@ export default function DialogDetachedTriggersControlledDemo() {
     <React.Fragment>
       <div className="flex flex-wrap gap-2 justify-center">
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           handle={demoDialog}
           id="trigger-1"
           payload={1}
@@ -26,7 +26,7 @@ export default function DialogDetachedTriggersControlledDemo() {
         </Dialog.Trigger>
 
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           handle={demoDialog}
           id="trigger-2"
           payload={2}
@@ -35,7 +35,7 @@ export default function DialogDetachedTriggersControlledDemo() {
         </Dialog.Trigger>
 
         <Dialog.Trigger
-          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           handle={demoDialog}
           id="trigger-3"
           payload={3}
@@ -45,7 +45,7 @@ export default function DialogDetachedTriggersControlledDemo() {
 
         <button
           type="button"
-          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
@@ -70,7 +70,7 @@ export default function DialogDetachedTriggersControlledDemo() {
               )}
 
               <div className="flex justify-end gap-3">
-                <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+                <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                   Close
                 </Dialog.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
index abd5fbe99e1..f4244f56321 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/detached-triggers-simple/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function DialogDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
       <Dialog.Trigger
-        className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+        className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         handle={demoDialog}
       >
         View notifications
@@ -25,7 +25,7 @@ export default function DialogDetachedTriggersSimpleDemo() {
               </Dialog.Description>
             </div>
             <div className="flex justify-end gap-3">
-              <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+              <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                 Close
               </Dialog.Close>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
index aabc23db034..dfe76bff869 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
@@ -53,7 +53,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
index 740f859612a..270515cdb9b 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -16,7 +16,7 @@ export default function ExampleDialog() {
             </Dialog.Description>
           </div>
           <div className="flex justify-end gap-3">
-            <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+            <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
               Close
             </Dialog.Close>
           </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
index c433f2abb8d..de5e7a6f1ab 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
@@ -53,7 +53,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -220,7 +220,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: 0;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
index 73a602b8e2c..15a78badca8 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function InsideScrollDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -19,7 +19,7 @@ export default function InsideScrollDialog() {
               </Dialog.Description>
             </div>
             <ScrollArea.Root className="relative flex min-h-0 flex-auto overflow-hidden border-y border-neutral-950 dark:border-white">
-              <ScrollArea.Viewport className="flex-auto min-h-0 overflow-y-auto overscroll-contain focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+              <ScrollArea.Viewport className="flex-auto min-h-0 overflow-y-auto overscroll-contain focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                 <ScrollArea.Content className="flex flex-col">
                   {CONTENT_SECTIONS.map((item) => (
                     <section className="flex flex-col gap-1 p-4" key={item.title}>
@@ -34,7 +34,7 @@ export default function InsideScrollDialog() {
               </ScrollArea.Scrollbar>
             </ScrollArea.Root>
             <div className="flex justify-end gap-3 p-4">
-              <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+              <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                 Close
               </Dialog.Close>
             </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
index 9542f137cc5..45f91457ba9 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
@@ -53,7 +53,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -95,7 +95,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
index 4bf81e8b984..6cbc6a4467a 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         View notifications
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -17,7 +17,7 @@ export default function ExampleDialog() {
           </div>
           <div className="flex items-center gap-3">
             <Dialog.Root>
-              <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+              <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                 Customize
               </Dialog.Trigger>
               <Dialog.Portal>
@@ -31,7 +31,7 @@ export default function ExampleDialog() {
                     </Dialog.Description>
                   </div>
                   <div className="flex items-center justify-end gap-3">
-                    <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+                    <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                       Close
                     </Dialog.Close>
                   </div>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
index b36f14f60d5..79ad9eef19e 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
@@ -53,7 +53,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -250,7 +250,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index ff558e86de2..06d21294e40 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function OutsideScrollDialog() {
   const popupRef = React.useRef<HTMLDivElement>(null);
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -32,7 +32,7 @@ export default function OutsideScrollDialog() {
                     </Dialog.Description>
                     <Dialog.Close
                       aria-label="Close"
-                      className="absolute -top-1 -right-1 inline-flex items-center justify-center w-8 h-8 border-none bg-transparent p-0 text-neutral-950 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+                      className="absolute -top-1 -right-1 inline-flex items-center justify-center w-8 h-8 border-none bg-transparent p-0 text-neutral-950 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                     >
                       <XIcon />
                     </Dialog.Close>
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
index 61a9022eb63..a9e3b1f653f 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
@@ -53,7 +53,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -190,7 +190,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
index 408d5a9f93c..5937951f6ea 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Dialog } from '@base-ui/react/dialog';
 export default function ExampleUncontainedDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+      <Dialog.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -11,7 +11,7 @@ export default function ExampleUncontainedDialog() {
         <Dialog.Viewport className="fixed inset-0 grid place-items-center px-4 py-12 xl:py-6">
           <Dialog.Popup className="group/popup relative flex h-full w-full max-w-[70rem] xl:max-w-none justify-center pointer-events-none transition-opacity duration-150 data-starting-style:opacity-0 data-ending-style:opacity-0">
             <Dialog.Close
-              className="absolute right-0 -top-10 flex h-8 w-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 xl:top-0 xl:h-10 xl:w-10 pointer-events-auto focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+              className="absolute right-0 -top-10 flex h-8 w-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 xl:top-0 xl:h-10 xl:w-10 pointer-events-auto focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
               aria-label="Close"
             >
               <XIcon />
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
index 743e5262ce8..f84483ebe4d 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
@@ -53,7 +53,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
index a71eb32ee28..186e00a3abe 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawer() {
   return (
     <Drawer.Root swipeDirection="right">
-      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open drawer
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -16,7 +16,7 @@ export default function ExampleDrawer() {
                 This is a drawer that slides in from the side. You can swipe to dismiss it.
               </Drawer.Description>
               <div className="flex justify-end gap-3">
-                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
index b88b9571edb..f6d4fd89e0a 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
@@ -109,7 +109,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
index ec33bfa8e0e..bfe735e0407 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleDrawer() {
         <Drawer.Indent className="[--indent-radius:calc(1rem*(1-var(--drawer-swipe-progress)))] [--indent-transition:calc(1-clamp(0,calc(var(--drawer-swipe-progress)*100000),1))] relative min-h-80 border border-neutral-950 bg-white p-4 text-neutral-950 [transition:transform_0.4s_cubic-bezier(0.32,0.72,0,1),border-radius_0.25s_cubic-bezier(0.32,0.72,0,1)] origin-[center_top] will-change-transform [transform:scale(1)_translateY(0)] [transition-duration:calc(400ms*var(--indent-transition)),calc(250ms*var(--indent-transition))] data-active:transform-[scale(calc(0.98+(0.02*var(--drawer-swipe-progress))))_translateY(calc(0.5rem*(1-var(--drawer-swipe-progress))))] data-active:rounded-tl-(--indent-radius) data-active:rounded-tr-(--indent-radius) dark:border-white dark:bg-neutral-950 dark:text-white">
           <div className="flex min-h-80 items-center justify-center">
             <Drawer.Root modal={false}>
-              <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+              <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                 Open drawer
               </Drawer.Trigger>
               <Drawer.Portal container={portalContainer}>
@@ -28,7 +28,7 @@ export default function ExampleDrawer() {
                         You are all caught up. Good job!
                       </Drawer.Description>
                       <div className="flex justify-center gap-3">
-                        <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+                        <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                           Close
                         </Drawer.Close>
                       </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
index ef0040fdae3..bf59908f3a4 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
@@ -53,7 +53,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -256,7 +256,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -341,7 +341,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
index 799d29258e7..bc7729872f7 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
@@ -53,7 +53,7 @@ const LONG_LIST = [
 export default function ExampleDrawerMobileNav() {
   return (
     <Drawer.Root>
-      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open mobile menu
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -75,7 +75,7 @@ export default function ExampleDrawerMobileNav() {
                       <div className="h-1 w-12 justify-self-center bg-neutral-300 dark:bg-neutral-700" />
                       <Drawer.Close
                         aria-label="Close menu"
-                        className="flex h-9 w-9 items-center justify-center justify-self-end border-0 bg-transparent text-neutral-950 hover:bg-neutral-100 active:bg-neutral-200 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+                        className="flex h-9 w-9 items-center justify-center justify-self-end border-0 bg-transparent text-neutral-950 hover:bg-neutral-100 active:bg-neutral-200 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                       >
                         <XIcon />
                       </Drawer.Close>
@@ -92,7 +92,7 @@ export default function ExampleDrawerMobileNav() {
                           {ITEMS.map((item) => (
                             <li key={item.label} className="flex">
                               <a
-                                className="flex h-12 w-full items-center border border-neutral-950 bg-white px-4 text-sm text-neutral-950 no-underline hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+                                className="flex h-12 w-full items-center border border-neutral-950 bg-white px-4 text-sm text-neutral-950 no-underline hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                                 href={item.href}
                               >
                                 {item.label}
@@ -108,7 +108,7 @@ export default function ExampleDrawerMobileNav() {
                           {LONG_LIST.map((item) => (
                             <li key={item.label} className="flex">
                               <a
-                                className="flex h-12 w-full items-center border border-neutral-950 bg-white px-4 text-sm text-neutral-950 no-underline hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+                                className="flex h-12 w-full items-center border border-neutral-950 bg-white px-4 text-sm text-neutral-950 no-underline hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                                 href={item.href}
                               >
                                 {item.label}
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
index 77135b7ed4b..6c1658ec028 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
@@ -53,7 +53,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -322,7 +322,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -367,7 +367,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -378,7 +378,7 @@
 .Input:focus-visible,
 .Textarea:focus-visible {
   outline: 2px solid var(--color-neutral-950);
-  outline-offset: -2px;
+  outline-offset: -1px;
 
   @media (prefers-color-scheme: dark) {
     outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
index 624b2b787b8..ab0de67ebdc 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawerNested() {
   return (
     <Drawer.Root>
-      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open drawer stack
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -22,7 +22,7 @@ export default function ExampleDrawerNested() {
               <div className="flex items-center justify-end gap-4">
                 <div className="mr-auto">
                   <Drawer.Root>
-                    <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+                    <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                       Security settings
                     </Drawer.Trigger>
                     <Drawer.Portal>
@@ -46,7 +46,7 @@ export default function ExampleDrawerNested() {
                             <div className="flex items-center justify-end gap-4">
                               <div className="mr-auto">
                                 <Drawer.Root>
-                                  <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+                                  <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                                     Advanced options
                                   </Drawer.Trigger>
                                   <Drawer.Portal>
@@ -71,7 +71,7 @@ export default function ExampleDrawerNested() {
                                             </label>
                                             <input
                                               id="device-name-tw"
-                                              className="h-8 w-full border border-neutral-950 bg-white px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+                                              className="h-8 w-full border border-neutral-950 bg-white px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                                               defaultValue="Personal laptop"
                                             />
                                           </div>
@@ -85,14 +85,14 @@ export default function ExampleDrawerNested() {
                                             </label>
                                             <textarea
                                               id="notes-tw"
-                                              className="min-h-32 w-full resize-y border border-neutral-950 bg-white p-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+                                              className="min-h-32 w-full resize-y border border-neutral-950 bg-white p-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                                               defaultValue="Rotate recovery codes and revoke older sessions."
                                               rows={3}
                                             />
                                           </div>
 
                                           <div className="flex justify-end">
-                                            <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+                                            <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                                               Done
                                             </Drawer.Close>
                                           </div>
@@ -103,7 +103,7 @@ export default function ExampleDrawerNested() {
                                 </Drawer.Root>
                               </div>
 
-                              <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+                              <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                                 Close
                               </Drawer.Close>
                             </div>
@@ -114,7 +114,7 @@ export default function ExampleDrawerNested() {
                   </Drawer.Root>
                 </div>
 
-                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
index eff7b8bd941..055c0e8879f 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
@@ -53,7 +53,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
index fb0972313a1..3ca4ceccf4f 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawer() {
   return (
     <Drawer.Root swipeDirection="right" modal={false} disablePointerDismissal>
-      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open non-modal drawer
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -16,7 +16,7 @@ export default function ExampleDrawer() {
                 swipe to dismiss it.
               </Drawer.Description>
               <div className="flex justify-end gap-3">
-                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
index f1db79ab4b6..8d0f05f908f 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
@@ -53,7 +53,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
index f267e603634..ef55b26f599 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { Drawer } from '@base-ui/react/drawer';
 export default function ExampleDrawer() {
   return (
     <Drawer.Root>
-      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open bottom drawer
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -19,7 +19,7 @@ export default function ExampleDrawer() {
                 You are all caught up. Good job!
               </Drawer.Description>
               <div className="flex justify-center gap-3">
-                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+                <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                   Close
                 </Drawer.Close>
               </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
index 487da792562..dc18f74132b 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
@@ -53,7 +53,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
index 79c039fe852..48a4262437f 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/tailwind/index.tsx
@@ -14,7 +14,7 @@ const snapPoints = [...VISIBLE_SNAP_POINTS_REM.map(toViewportSnapPoint), 1];
 export default function ExampleDrawerSnapPoints() {
   return (
     <Drawer.Root snapPoints={snapPoints}>
-      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open snap drawer
       </Drawer.Trigger>
       <Drawer.Portal>
@@ -41,7 +41,7 @@ export default function ExampleDrawerSnapPoints() {
                   ))}
                 </div>
                 <div className="flex items-center justify-end gap-3">
-                  <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+                  <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                     Close
                   </Drawer.Close>
                 </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
index 888d79000e6..cac988ed18b 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
@@ -127,7 +127,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
index 9629d5bdff1..4322d9002bf 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/tailwind/index.tsx
@@ -31,7 +31,7 @@ export default function ExampleDrawerSwipeArea() {
                   Swipe from the edge whenever you want to jump back into your playlists.
                 </Drawer.Description>
                 <div className="flex justify-end gap-3">
-                  <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+                  <Drawer.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                     Close
                   </Drawer.Close>
                 </div>
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
index 953beb8d9f0..c53eb8953b6 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
@@ -53,7 +53,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
index 4cd16350af0..d9be66bb2c1 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleDrawerUncontained() {
 
   return (
     <Drawer.Root open={open} onOpenChange={setOpen}>
-      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+      <Drawer.Trigger className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Open action sheet
       </Drawer.Trigger>
       <Drawer.Portal>
diff --git a/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
index c8e7fb77549..948519d3a9e 100644
--- a/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
@@ -54,7 +54,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
index 9a96d4891fb..cdc721c7db5 100644
--- a/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/field/demos/hero/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleField() {
       <Field.Control
         required
         placeholder="Required"
-        className="h-8 self-stretch border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+        className="h-8 self-stretch border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
       />
       <Field.Error className="text-sm text-red-700 dark:text-red-400" match="valueMissing">
         Please enter your name
diff --git a/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
index 88f0528c56e..14873a41b67 100644
--- a/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
@@ -76,7 +76,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx
index 501bc2eb53d..531b76d5261 100644
--- a/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/fieldset/demos/hero/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleField() {
         </Field.Label>
         <Field.Control
           placeholder="Enter company name"
-          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
       </Field.Root>
 
@@ -24,7 +24,7 @@ export default function ExampleField() {
         </Field.Label>
         <Field.Control
           placeholder="Enter fiscal number"
-          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
       </Field.Root>
     </Fieldset.Root>
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
index 236dd80d749..564fa94db9a 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
@@ -60,7 +60,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -135,7 +135,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
index 9dfb5695ddf..9eb0ce1cc25 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/tailwind/index.tsx
@@ -26,7 +26,7 @@ export default function ActionStateForm() {
           required
           defaultValue="admin"
           placeholder="e.g. alice132"
-          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
@@ -34,7 +34,7 @@ export default function ActionStateForm() {
         type="submit"
         disabled={loading}
         focusableWhenDisabled
-        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
+        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
index 236dd80d749..564fa94db9a 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
@@ -60,7 +60,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -135,7 +135,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
index 27029f425b6..448e91e9980 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/tailwind/index.tsx
@@ -37,7 +37,7 @@ export default function ExampleForm() {
           defaultValue="https://example.com"
           placeholder="https://example.com"
           pattern="https?://.*"
-          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
@@ -45,7 +45,7 @@ export default function ExampleForm() {
         disabled={loading}
         focusableWhenDisabled
         type="submit"
-        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
+        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
index 236dd80d749..564fa94db9a 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
@@ -60,7 +60,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -135,7 +135,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
index 08853c3a01c..06573fb53bb 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/tailwind/index.tsx
@@ -42,7 +42,7 @@ export default function Page() {
         </Field.Label>
         <Field.Control
           placeholder="Enter name"
-          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
@@ -52,13 +52,13 @@ export default function Page() {
         </Field.Label>
         <Field.Control
           placeholder="Enter age"
-          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+          className="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
         />
         <Field.Error className="text-sm text-red-700 dark:text-red-400" />
       </Field.Root>
       <Button
         type="submit"
-        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
+        className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400"
       >
         Submit
       </Button>
diff --git a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
index 195b5027f99..4e6fd0a09db 100644
--- a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
@@ -49,7 +49,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
index 41e6ae9b0c9..26c179fe211 100644
--- a/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/input/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleInput() {
       Name
       <Input
         placeholder="e.g. Colm Tuite"
-        className="h-8 w-40 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white"
+        className="h-8 w-40 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white"
       />
     </label>
   );
diff --git a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
index 3cb202be91a..19178578ff8 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
@@ -58,7 +58,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -138,7 +138,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
index cfda48abbfb..59b2e55bfdf 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
@@ -63,7 +63,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
index a8c95125903..58e978a4fba 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
@@ -8,7 +8,7 @@ const itemClass =
 export default function MenuArrowDemo() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Song <ChevronDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
index 9fdd3a984a1..49fbb2c4d25 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
@@ -63,7 +63,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index ad4ae582dd1..495bb88a1c8 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleMenu() {
 
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Workspace <ChevronDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
index 7ce5f6e28ae..698b9ba6693 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { Menu } from '@base-ui/react/menu';
 const itemClass =
   "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
 const triggerClass =
-  'flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white active:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800';
+  'flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white active:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800';
 const popupClass =
   'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
 
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
index eb1f52a3350..442fe218aad 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-full/tailwind/index.tsx
@@ -44,7 +44,7 @@ const triggerClass = `
   dark:border-white dark:bg-neutral-950 dark:text-white
   dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800
   focus-visible:outline focus-visible:outline-2
-  focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white
+  focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white
 `;
 
 const itemClass = `
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
index ae66d54fba2..d4e205c107a 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function MenuDetachedTriggersSimpleDemo() {
       <Menu.Trigger
         handle={demoMenu}
         aria-label="Project actions"
-        className="flex size-8 items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+        className="flex size-8 items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         <DotsIcon />
       </Menu.Trigger>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
index 80945556b8a..3755aeef97d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
@@ -63,7 +63,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index fe0336e3403..cf419c10f99 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleMenu() {
 
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         View <ChevronDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
index 5f10ae4a6e4..18ae364743d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
@@ -63,7 +63,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
index 8e907436467..3aecb84221f 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
@@ -7,7 +7,7 @@ const itemClass =
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Song <ChevronDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
index 5f10ae4a6e4..18ae364743d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
@@ -63,7 +63,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
index 15e6d6d8d21..0f50bd79184 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleMenu() {
     <Menu.Root>
       <Menu.Trigger
         openOnHover
-        className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+        className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         Add to playlist <ChevronDownIcon />
       </Menu.Trigger>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
index 8c63a0fc660..71e90f2eb6b 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
@@ -63,7 +63,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index 5c8b804f7b1..61f918ad96c 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleMenu() {
   const [value, setValue] = React.useState('date');
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Sort <ChevronDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
index 3459c3c6786..ca35c37bf1a 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
@@ -63,7 +63,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
index 5d3250def24..fd1cbabeb44 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
@@ -12,7 +12,7 @@ const submenuTriggerClass =
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+      <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         Song <ChevronDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
index ad98a02f5b0..9958023ec67 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
@@ -59,7 +59,7 @@
   &:focus-visible {
     background-color: var(--color-neutral-100);
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-neutral-800);
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
index 55990fbd505..8da4bde2da7 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleMenubar() {
   return (
     <Menubar className="flex items-center">
       <Menu.Root>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           File
         </Menu.Trigger>
         <Menu.Portal>
@@ -76,7 +76,7 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           Edit
         </Menu.Trigger>
         <Menu.Portal>
@@ -106,7 +106,7 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           View
         </Menu.Trigger>
         <Menu.Portal>
@@ -169,7 +169,7 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root disabled>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           Help
         </Menu.Trigger>
       </Menu.Root>
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
index f0c80b42790..d1621a18a54 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
@@ -65,7 +65,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -269,7 +269,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
index 050e0b3becf..6d69871211b 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
@@ -112,7 +112,7 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 }
 
 const triggerClassName =
-  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
+  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const contentClassName =
   'h-full p-2 min-[500px]:w-max min-[500px]:max-w-[400px] ' +
@@ -124,7 +124,7 @@ const contentClassName =
   'data-ending-style:data-[activation-direction=right]:translate-x-[-50%]';
 
 const linkCardClassName =
-  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
+  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const overviewLinks = [
   {
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
index 0d46bfb72cf..b2e95c36ac4 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
@@ -65,7 +65,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -264,7 +264,7 @@
 @media (min-width: 700px) {
   .SubmenuList {
     flex-direction: column;
-    gap: 0;
+    gap: 1px;
     overflow-x: visible;
     overflow-y: clip;
     border-right: 1px solid var(--color-neutral-950);
@@ -313,7 +313,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -483,7 +483,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
index cc0157a562f..14560f7c764 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
@@ -25,7 +25,7 @@ export default function ExampleNavigationMenu() {
               defaultValue="developers"
             >
               <div className="grid grid-cols-1 overflow-hidden overflow-clip min-[700px]:grid-cols-[13rem_minmax(0,1fr)]">
-                <NavigationMenu.List className="m-0 flex list-none flex-row gap-1 overflow-x-auto p-2 min-[700px]:h-[var(--popup-height)] min-[700px]:flex-col min-[700px]:gap-0 min-[700px]:overflow-x-visible min-[700px]:overflow-y-clip min-[700px]:border-r min-[700px]:border-r-neutral-950 min-[700px]:transition-[height] min-[700px]:duration-[var(--duration)] min-[700px]:ease-[var(--easing)] dark:min-[700px]:border-r-white">
+                <NavigationMenu.List className="m-0 flex list-none flex-row gap-1 overflow-x-auto p-2 min-[700px]:h-[var(--popup-height)] min-[700px]:flex-col min-[700px]:gap-px min-[700px]:overflow-x-visible min-[700px]:overflow-y-clip min-[700px]:border-r min-[700px]:border-r-neutral-950 min-[700px]:transition-[height] min-[700px]:duration-[var(--duration)] min-[700px]:ease-[var(--easing)] dark:min-[700px]:border-r-white">
                   {audienceMenus.map((menu) => (
                     <NavigationMenu.Item key={menu.value} value={menu.value}>
                       <NavigationMenu.Trigger className={submenuTriggerClassName}>
@@ -162,7 +162,7 @@ function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
 }
 
 const triggerClassName =
-  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
+  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const sharedContentClassName =
   'h-full w-[calc(100vw_-_40px)] ' +
@@ -179,7 +179,7 @@ const productContentClassName = `${sharedContentClassName} p-0 min-[700px]:[widt
 const guidesContentClassName = `${sharedContentClassName} p-0 min-[700px]:[width:min(500px,calc(100vw-40px))]`;
 
 const submenuTriggerClassName =
-  'm-0 flex w-full min-w-[10rem] flex-col items-start gap-1 border-0 bg-transparent p-2 text-left text-inherit hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
+  'm-0 flex w-full min-w-[10rem] flex-col items-start gap-1 border-0 bg-transparent p-2 text-left text-inherit hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const submenuContentClassName =
   'flex h-full translate-x-0 flex-col gap-4 p-4 transition-[opacity,translate,filter] duration-[var(--duration)] ease-[var(--easing)] min-[700px]:duration-[calc(var(--duration)*1.35)] min-[700px]:ease-[cubic-bezier(0.16,1,0.3,1)] ' +
@@ -189,4 +189,4 @@ const submenuContentClassName =
   'min-[700px]:data-ending-style:data-[activation-direction=up]:translate-y-[72px] min-[700px]:data-ending-style:data-[activation-direction=down]:translate-y-[-72px]';
 
 const linkCardClassName =
-  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
+  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
index e7315019bfc..edaa086729e 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
@@ -65,7 +65,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -270,7 +270,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
index 7adf8f7fa66..c156b72f8cc 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
@@ -146,7 +146,7 @@ function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
 }
 
 const triggerClassName =
-  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
+  'flex h-8 items-center justify-center gap-1.5 bg-transparent px-2 text-sm font-normal text-neutral-950 no-underline select-none min-[501px]:px-3 hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const contentTransitionClassName =
   'transition-[opacity,transform,translate] duration-[var(--duration)] ease-[var(--easing)] ' +
@@ -159,7 +159,7 @@ const contentTransitionClassName =
 const contentClassName = `h-full w-[calc(100vw_-_40px)] p-2 min-[500px]:w-max min-[500px]:min-w-[400px] ${contentTransitionClassName}`;
 
 const linkCardClassName =
-  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
+  'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const overviewLinks = [
   {
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
index 95cfc630378..ebc5f025cfd 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
@@ -48,7 +48,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
index 330d07adb70..f7858d655be 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/tailwind/index.tsx
@@ -22,7 +22,7 @@ export default function OTPFieldAlphanumericDemo() {
         {Array.from({ length: CODE_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
             aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
           />
         ))}
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
index a6d49aa8994..08319c859a3 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
@@ -49,7 +49,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -60,7 +60,7 @@
 .InputInvalidA {
   border-color: var(--color-red-700);
   outline: 2px solid var(--color-red-700);
-  outline-offset: -2px;
+  outline-offset: -1px;
   animation: otp-field-shake-a 180ms ease-in-out;
 
   @media (prefers-color-scheme: dark) {
@@ -70,7 +70,7 @@
 
   &:focus {
     outline: 2px solid var(--color-red-700);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: var(--color-red-400);
@@ -81,7 +81,7 @@
 .InputInvalidB {
   border-color: var(--color-red-700);
   outline: 2px solid var(--color-red-700);
-  outline-offset: -2px;
+  outline-offset: -1px;
   animation: otp-field-shake-b 180ms ease-in-out;
 
   @media (prefers-color-scheme: dark) {
@@ -91,7 +91,7 @@
 
   &:focus {
     outline: 2px solid var(--color-red-700);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: var(--color-red-400);
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
index 5004abbc1be..11cd4b2d1c5 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
@@ -57,7 +57,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
index 4072fd1e992..41ff49b3796 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/tailwind/index.tsx
@@ -21,7 +21,7 @@ export default function OTPFieldFocusedPlaceholderDemo() {
         {Array.from({ length: CODE_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white focus:placeholder:text-transparent dark:border-white dark:text-white dark:placeholder:text-neutral-400"
+            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white focus:placeholder:text-transparent dark:border-white dark:text-white dark:placeholder:text-neutral-400"
             placeholder="•"
             aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
           />
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
index 348071ce60a..7f130b380b0 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
@@ -55,7 +55,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
index 9c974f655d2..fdcf869f6a2 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function OTPFieldGroupedDemo() {
           {Array.from({ length: 3 }, (_, index) => (
             <OTPField.Input
               key={index}
-              className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+              className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
               aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}
             />
           ))}
@@ -26,7 +26,7 @@ export default function OTPFieldGroupedDemo() {
           {Array.from({ length: 3 }, (_, index) => (
             <OTPField.Input
               key={index + 3}
-              className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+              className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
               aria-label={`Character ${index + 4} of ${OTP_LENGTH}`}
             />
           ))}
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
index fc36fff3b02..2ca26a1d365 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
@@ -49,7 +49,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
index 3418c0b16e4..942b614f4e4 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/hero/tailwind/index.tsx
@@ -21,7 +21,7 @@ export default function ExampleOTPField() {
         {Array.from({ length: OTP_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
             aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}
           />
         ))}
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
index 7142ec3f151..7bb159f36e7 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
@@ -49,7 +49,7 @@
 
   &:focus {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx b/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
index 084bace60cf..49a12b0fd50 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/password/tailwind/index.tsx
@@ -22,7 +22,7 @@ export default function OTPFieldPasswordDemo() {
         {Array.from({ length: CODE_LENGTH }, (_, index) => (
           <OTPField.Input
             key={index}
-            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+            className="m-0 h-10 w-10 rounded-none border border-neutral-950 bg-white dark:bg-neutral-950 text-center font-inherit text-base font-normal text-neutral-950 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
             aria-label={`Character ${index + 1} of ${CODE_LENGTH}`}
           />
         ))}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
index 2f734a59a24..ce211335663 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
@@ -11,6 +11,7 @@
   flex-direction: column;
   gap: 0.25rem;
   padding: 0.75rem;
+  outline: none;
   border: 1px solid var(--color-neutral-950);
   background-color: white;
   color: var(--color-neutral-950);
@@ -19,7 +20,6 @@
   transition:
     transform 100ms ease-out,
     opacity 100ms ease-out;
-
   width: var(--popup-width, auto);
   height: var(--popup-height, auto);
   max-width: 500px;
@@ -174,7 +174,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
index 5fdf3838969..0d15c530167 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { Popover } from '@base-ui/react/popover';
 const demoPopover = Popover.createHandle();
 
 const triggerClassName =
-  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
 
 export default function PopoverDetachedTriggersControlledDemo() {
   const [open, setOpen] = React.useState(false);
@@ -33,7 +33,7 @@ export default function PopoverDetachedTriggersControlledDemo() {
 
         <button
           type="button"
-          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+          className="flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
@@ -54,7 +54,7 @@ export default function PopoverDetachedTriggersControlledDemo() {
             className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)]"
             sideOffset={8}
           >
-            <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+            <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white outline-none border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
               <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
               <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
index 4e5d5319379..026091b7e11 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
@@ -18,6 +18,7 @@
 
 .Popup {
   position: relative;
+  outline: none;
   background-color: white;
   color: var(--color-neutral-950);
   border: 1px solid var(--color-neutral-950);
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
index 2d4da348e5e..64b764d325d 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
@@ -6,7 +6,7 @@ import { Avatar } from '@base-ui/react/avatar';
 const demoPopover = Popover.createHandle<React.ComponentType>();
 
 const triggerClassName =
-  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
 
 export default function PopoverDetachedTriggersFullDemo() {
   return (
@@ -34,7 +34,7 @@ export default function PopoverDetachedTriggersFullDemo() {
               sideOffset={8}
               className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none"
             >
-              <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[31.25rem] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:scale-90 data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-90 data-starting-style:opacity-0">
+              <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[31.25rem] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white outline-none border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:scale-90 data-ending-style:opacity-0 data-instant:transition-none data-starting-style:scale-90 data-starting-style:opacity-0">
                 <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
 
                 <Popover.Viewport
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
index f2604591570..1b553867010 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
@@ -5,7 +5,7 @@ import { Popover } from '@base-ui/react/popover';
 const demoPopover = Popover.createHandle();
 
 const triggerClassName =
-  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
 
 export default function PopoverDetachedTriggersSimpleDemo() {
   return (
@@ -17,7 +17,7 @@ export default function PopoverDetachedTriggersSimpleDemo() {
       <Popover.Root handle={demoPopover}>
         <Popover.Portal>
           <Popover.Positioner sideOffset={8}>
-            <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+            <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white outline-none border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
               <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
               <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
index d8b877db523..05158253258 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
@@ -1,7 +1,7 @@
 import { Popover } from '@base-ui/react/popover';
 
 const triggerClassName =
-  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
 
 export default function ExamplePopover() {
   return (
@@ -9,7 +9,7 @@ export default function ExamplePopover() {
       <Popover.Trigger className={triggerClassName}>Notifications</Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
-          <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+          <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white outline-none border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
             <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
             <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
index b46126b96db..2488e6363e8 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
@@ -1,7 +1,7 @@
 import { Popover } from '@base-ui/react/popover';
 
 const triggerClassName =
-  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
+  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
 
 export default function ExamplePopover() {
   return (
@@ -11,7 +11,7 @@ export default function ExamplePopover() {
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
-          <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
+          <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white outline-none border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
             <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
             <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
             <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
index 29678233262..8b057ae3e30 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -99,7 +99,7 @@ export default function PreviewCardDetachedTriggersControlledDemo() {
         </p>
         <button
           type="button"
-          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+          className="flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
           onClick={() => {
             setTriggerId('trigger-2');
             setOpen(true);
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
index c96efd3324c..c0cd26917a6 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
@@ -212,7 +212,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
index 4a3fb2383b2..e95378fb428 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
@@ -16,7 +16,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
index c713f6d90e7..9e0d36bd7bd 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/both/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function ExampleScrollAreaBoth() {
   return (
     <ScrollArea.Root className="h-80 w-80 max-w-[calc(100vw-8rem)]">
-      <ScrollArea.Viewport className="h-full border border-neutral-950 dark:border-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+      <ScrollArea.Viewport className="h-full border border-neutral-950 dark:border-white focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         <ScrollArea.Content className="pt-3 pr-6 pb-6 pl-3">
           <ul className="m-0 grid list-none grid-cols-[repeat(10,6.25rem)] grid-rows-[repeat(10,6.25rem)] gap-3 p-0">
             {Array.from({ length: 100 }, (_, i) => (
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
index 10a2a4c8d64..2dd96b382d7 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
@@ -21,7 +21,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
index 1f3eea1aa13..e29f20c42c9 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function ExampleScrollArea() {
   return (
     <ScrollArea.Root className="h-[8.5rem] w-96 max-w-[calc(100vw-8rem)] bg-white dark:bg-neutral-950">
-      <ScrollArea.Viewport className="h-full border border-neutral-950 dark:border-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+      <ScrollArea.Viewport className="h-full border border-neutral-950 dark:border-white focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         <ScrollArea.Content className="flex flex-col gap-4 py-2 pr-5 pl-3 text-sm leading-[1.375rem] text-neutral-950 dark:text-white">
           <p>
             Vernacular architecture is building done outside any academic tradition, and without
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index 2034a85114d..f773c5eab04 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -91,7 +91,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index 1ad2ed521e2..e35b968a79a 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleSelectGrouped() {
         Produce
       </Field.Label>
       <Select.Root items={groupedProduce}>
-        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-2 pr-2 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-2 pr-2 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           <Select.Value
             className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400"
             placeholder="Select produce"
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
index e90930f26b2..dfdbb441310 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
@@ -91,7 +91,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index 65590d56bad..a72c7513042 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function ExampleSelect() {
         <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Apple
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-2 pr-2 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-2 pr-2 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           <Select.Value
             className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400"
             placeholder="Select apple"
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
index 8bd74e85416..58bd70805e4 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
@@ -91,7 +91,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index b531d914c05..47986e3a168 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -36,7 +36,7 @@ export default function MultiSelectExample() {
         <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Languages
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-2 pr-2 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-2 pr-2 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           <Select.Value className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400">
             {renderValue}
           </Select.Value>
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
index 314aabed7ec..1c361167958 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
@@ -84,7 +84,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index 4fa30bf6a2b..addb3a43bfc 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ObjectValueSelect() {
         <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Shipping method
         </Select.Label>
-        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-center justify-between gap-3 pl-2 pr-2 py-1.5 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-center justify-between gap-3 pl-2 pr-2 py-1.5 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           <Select.Value>
             {(method: ShippingMethod) => (
               <span className="flex flex-col items-start gap-0.5">
diff --git a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
index a1acab174c5..521cc448af8 100644
--- a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
@@ -57,7 +57,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -126,7 +126,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
     z-index: 1;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
index 31e77ddfc70..33b78a025ad 100644
--- a/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
@@ -1,10 +1,10 @@
 import { Tabs } from '@base-ui/react/tabs';
 
 const tabClassName =
-  'flex h-[calc(2rem+1px)] items-center justify-center bg-transparent px-2 py-0 font-inherit text-sm font-normal leading-5 break-keep whitespace-nowrap text-neutral-600 outline-none select-none hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-active:text-neutral-950 dark:text-neutral-300 dark:hover:text-white dark:data-active:text-white';
+  'flex h-[calc(2rem+1px)] items-center justify-center bg-transparent px-2 py-0 font-inherit text-sm font-normal leading-5 break-keep whitespace-nowrap text-neutral-600 outline-none select-none hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-active:text-neutral-950 dark:text-neutral-300 dark:hover:text-white dark:data-active:text-white';
 
 const panelClassName =
-  'col-start-1 row-start-1 flex w-full items-center justify-center bg-white p-4 text-center text-sm text-neutral-950 outline-none focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:bg-neutral-950 dark:text-white [[hidden]]:hidden';
+  'col-start-1 row-start-1 flex w-full items-center justify-center bg-white p-4 text-center text-sm text-neutral-950 outline-none focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:bg-neutral-950 dark:text-white [[hidden]]:hidden';
 
 export default function ExampleTabs() {
   return (
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
index 44759cdf5d2..414ea116c3a 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
@@ -45,7 +45,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
index fbe16ee31ce..f3ec8b9cd6a 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleToggle() {
   return (
     <Toggle
       aria-label="Favorite"
-      className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-pressed:text-neutral-950 dark:data-pressed:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+      className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-pressed:text-neutral-950 dark:data-pressed:text-white focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       render={(props, state) => {
         if (state.pressed) {
           return (
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
index 84a0580c83e..2b2681adc03 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -6,10 +6,10 @@ import { InfoIcon } from '../../icons-tw';
 const demoTooltip = Tooltip.createHandle();
 
 const iconButtonClass =
-  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
+  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white focus-visible:relative hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
 
 const buttonClass =
-  'flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
+  'flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
 
 const popupClass =
   'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:[transform:scale(0.98)] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:[transform:scale(0.98)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
index d3aa60c0d5e..e5c3219f895 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
@@ -68,7 +68,8 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
+    position: relative;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
index 2f29004ac9e..5021d16d32e 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
@@ -6,7 +6,7 @@ import { InfoIcon, HelpIcon, AlertIcon } from '../../icons-tw';
 const demoTooltip = Tooltip.createHandle<React.ComponentType>();
 
 const triggerClass =
-  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
+  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white focus-visible:relative hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
 
 const arrowClass =
   "relative block w-3 h-1.5 overflow-clip transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]";
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
index c81848d0935..d3504739516 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
@@ -6,7 +6,7 @@ import { InfoIcon } from '../../icons-tw';
 const demoTooltip = Tooltip.createHandle();
 
 const triggerClass =
-  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
+  'flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
 
 const popupClass =
   'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:[transform:scale(0.98)] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:[transform:scale(0.98)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
index 8a029f9c477..13274717dfc 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
@@ -56,7 +56,6 @@
   &:focus-visible {
     background-color: transparent;
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
index a20c854e92b..8e4e9d0fea9 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Tooltip } from '@base-ui/react/tooltip';
 
 const triggerClass =
-  'flex size-8 items-center justify-center border-0 bg-transparent text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-100 active:bg-neutral-200 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
+  'flex size-8 items-center justify-center border-0 bg-transparent text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:bg-transparent focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white hover:bg-neutral-100 active:bg-neutral-200 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
 
 const popupClass =
   'relative flex flex-col border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:[transform:scale(0.98)] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:[transform:scale(0.98)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
index 5824df1b53c..5f8b0026f5d 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
@@ -71,7 +71,8 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
+    position: relative;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -220,7 +221,8 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
+    position: relative;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css
index 00733750b8a..aa243b91838 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css
@@ -50,7 +50,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -74,6 +74,7 @@
   line-height: 1.25rem;
   transform-origin: var(--transform-origin);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+  outline: none;
 
   width: var(--popup-width, auto);
   height: var(--popup-height, auto);
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css
index 00733750b8a..a3f60918ed4 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css
@@ -50,7 +50,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -74,10 +74,10 @@
   line-height: 1.25rem;
   transform-origin: var(--transform-origin);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
-
   width: var(--popup-width, auto);
   height: var(--popup-height, auto);
   max-width: 500px;
+  outline: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
index 16328c0ac0a..3d1ebee9e8c 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
@@ -53,7 +53,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
index a9af2313876..30fbff99b41 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
@@ -14,7 +14,7 @@ export const Input = React.forwardRef<HTMLInputElement, Autocomplete.Input.Props
     <Autocomplete.Input
       ref={forwardedRef}
       className={clsx(
-        'h-8 w-[16rem] border border-neutral-950 bg-white px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white md:w-[20rem] dark:border-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400',
+        'h-8 w-[16rem] border border-neutral-950 bg-white px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white md:w-[20rem] dark:border-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx
index f8434d435d1..c01157d07d2 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/button.tsx
@@ -7,7 +7,7 @@ export function Button({ className, ...props }: React.ComponentPropsWithoutRef<'
     <BaseButton
       type="button"
       className={clsx(
-        'flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:disabled:border-neutral-400 dark:disabled:text-neutral-400',
+        'flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:disabled:border-neutral-400 dark:disabled:text-neutral-400',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
index 7297fcc0f7a..7fd30ae848f 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
@@ -26,7 +26,7 @@ export function InputGroup({ className, ...props }: Combobox.InputGroup.Props) {
   return (
     <Combobox.InputGroup
       className={clsx(
-        'relative h-8 w-64 border border-neutral-950 bg-white focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-neutral-950 dark:focus-within:outline-white dark:border-white dark:bg-neutral-950 [&>input]:pr-[2.5rem] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]',
+        'relative h-8 w-64 border border-neutral-950 bg-white focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-neutral-950 dark:focus-within:outline-white dark:border-white dark:bg-neutral-950 [&>input]:pr-[2.5rem] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+2rem*2)]',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx
index aa0a50c3f1d..2f5e3cfb14b 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/field.tsx
@@ -36,7 +36,7 @@ export const Control = React.forwardRef<HTMLInputElement, Field.Control.Props>(
       <Field.Control
         ref={forwardedRef}
         className={clsx(
-          'h-8 w-full max-w-xs border border-neutral-950 bg-white px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400',
+          'h-8 w-full max-w-xs border border-neutral-950 bg-white px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400',
           className,
         )}
         {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
index f29ccf1df68..9c1b41b3dfc 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/number-field.tsx
@@ -16,7 +16,7 @@ export function Decrement({ className, ...props }: NumberField.Decrement.Props)
   return (
     <NumberField.Decrement
       className={clsx(
-        'flex h-full w-8 items-center justify-center rounded-none border border-neutral-950 bg-white bg-clip-padding text-neutral-950 outline-0 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400',
+        'flex h-full w-8 items-center justify-center rounded-none border border-neutral-950 bg-white bg-clip-padding text-neutral-950 outline-0 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400',
         className,
       )}
       {...props}
@@ -44,7 +44,7 @@ export function Increment({ className, ...props }: NumberField.Increment.Props)
   return (
     <NumberField.Increment
       className={clsx(
-        'flex h-full w-8 items-center justify-center rounded-none border border-neutral-950 bg-white bg-clip-padding text-neutral-950 outline-0 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400',
+        'flex h-full w-8 items-center justify-center rounded-none border border-neutral-950 bg-white bg-clip-padding text-neutral-950 outline-0 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
index 4add39ca232..11b22308b4e 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
@@ -22,7 +22,7 @@ export function Trigger({ className, ...props }: Select.Trigger.Props) {
   return (
     <Select.Trigger
       className={clsx(
-        'flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white px-2 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800',
+        'flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white px-2 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/slider.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/slider.tsx
index 0f5965b1927..c7e59885339 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/slider.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/slider.tsx
@@ -46,7 +46,7 @@ export function Thumb({ className, ...props }: Slider.Thumb.Props) {
   return (
     <Slider.Thumb
       className={clsx(
-        'size-4 border border-neutral-950 bg-white select-none has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950',
+        'size-4 border border-neutral-950 bg-white select-none has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-950 dark:has-[:focus-visible]:outline-white dark:border-white dark:bg-neutral-950',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
index e12cb443002..57119d0a9b4 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
@@ -20,7 +20,7 @@ function Toasts() {
           <pre className="whitespace-pre-wrap">{JSON.stringify(toast.data, null, 2)}</pre>
         </div>
         <Toast.Close
-          className="absolute top-2 right-2 flex size-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700"
+          className="absolute top-2 right-2 flex size-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700"
           aria-label="Close"
         >
           <XIcon />
diff --git a/docs/src/app/(docs)/react/handbook/styling/page.mdx b/docs/src/app/(docs)/react/handbook/styling/page.mdx
index d1f2d7049b3..1c8b7f82165 100644
--- a/docs/src/app/(docs)/react/handbook/styling/page.mdx
+++ b/docs/src/app/(docs)/react/handbook/styling/page.mdx
@@ -71,7 +71,7 @@ import { Menu } from '@base-ui/react/menu';
 export default function ExampleMenu() {
   return (
     <Menu.Root>
-      <Menu.Trigger className="flex h-8 items-center justify-center rounded-md border border-neutral-950 bg-white px-3 text-sm text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800 dark:focus-visible:outline-white">
+      <Menu.Trigger className="flex h-8 items-center justify-center rounded-md border border-neutral-950 bg-white px-3 text-sm text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800 dark:focus-visible:outline-white">
         Song
       </Menu.Trigger>
       <Menu.Portal>
diff --git a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
index bf4a9465e8c..8375c4f461d 100644
--- a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
@@ -59,7 +59,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -106,13 +106,13 @@
     background-color: var(--color-neutral-200);
 
     @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-700);
+      background-color: var(--color-neutral-700);
     }
   }
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
index 19b7a0116a8..05d8e55722e 100644
--- a/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
@@ -44,7 +44,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -67,5 +67,4 @@
   font-weight: 700;
   line-height: 1rem;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
 }

From dcf9d5aff618fe9c5a27dda235726843d3d76c41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 14 May 2026 18:42:41 +0200
Subject: [PATCH 189/257] ToggleGroup: improve focus ring

---
 .../toggle-group/demos/hero/css-modules/index.module.css    | 2 +-
 .../components/toggle-group/demos/hero/tailwind/index.tsx   | 6 +++---
 .../demos/multiple/css-modules/index.module.css             | 2 +-
 .../toggle-group/demos/multiple/tailwind/index.tsx          | 6 +++---
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
index 2f04ebacb65..b325fd4b662 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
@@ -70,7 +70,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: 1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
index d6006bd5cae..5a9770262b6 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/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 border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         <AlignLeftIcon />
       </Toggle>
       <Toggle
         aria-label="Align center"
         value="center"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         <AlignCenterIcon />
       </Toggle>
       <Toggle
         aria-label="Align right"
         value="right"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:not-data-pressed:bg-neutral-200 dark:active:not-data-disabled:not-data-pressed:bg-neutral-700 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:not-data-disabled:bg-neutral-950 data-pressed:hover:not-data-disabled:text-white dark:data-pressed:hover:not-data-disabled:bg-white dark:data-pressed:hover:not-data-disabled:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         <AlignRightIcon />
       </Toggle>
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
index 2f04ebacb65..b325fd4b662 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
@@ -70,7 +70,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: 1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
index 10133d6a0ee..6ad3dc4ef9f 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/tailwind/index.tsx
@@ -12,21 +12,21 @@ export default function ExampleToggleGroupMultiple() {
       <Toggle
         aria-label="Bold"
         value="bold"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         <BoldIcon />
       </Toggle>
       <Toggle
         aria-label="Italic"
         value="italic"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         <ItalicIcon />
       </Toggle>
       <Toggle
         aria-label="Underline"
         value="underline"
-        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+        className="flex size-8 items-center justify-center border-none rounded-none bg-transparent text-neutral-950 dark:text-white select-none hover:bg-neutral-100 dark:hover:bg-neutral-800 data-pressed:bg-neutral-950 data-pressed:text-white dark:data-pressed:bg-white dark:data-pressed:text-neutral-950 data-pressed:hover:bg-neutral-950 data-pressed:hover:text-white dark:data-pressed:hover:bg-white dark:data-pressed:hover:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
         <UnderlineIcon />
       </Toggle>

From 5805a38f42c03f372d40b73b83dd42c7037df5b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 14 May 2026 18:44:35 +0200
Subject: [PATCH 190/257] More focus rings

---
 .../demos/scroll-fade/css-modules/index.module.css        | 2 +-
 .../scroll-area/demos/scroll-fade/tailwind/index.tsx      | 2 +-
 .../toast/demos/anchored/css-modules/index.module.css     | 8 ++++----
 .../components/toast/demos/anchored/tailwind/index.tsx    | 8 ++++----
 .../toast/demos/custom/css-modules/index.module.css       | 4 ++--
 .../toast/demos/deduplicate/css-modules/index.module.css  | 4 ++--
 .../toast/demos/hero/css-modules/index.module.css         | 4 ++--
 .../react/components/toast/demos/hero/tailwind/index.tsx  | 4 ++--
 .../toast/demos/position/css-modules/index.module.css     | 4 ++--
 .../components/toast/demos/position/tailwind/index.tsx    | 4 ++--
 .../toast/demos/promise/css-modules/index.module.css      | 4 ++--
 .../toast/demos/undo/css-modules/index.module.css         | 4 ++--
 .../demos/varying-heights/css-modules/index.module.css    | 4 ++--
 13 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
index feb5defd096..57e1eb73a87 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
@@ -29,7 +29,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
index 2abb151d580..d811d487101 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
@@ -3,7 +3,7 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 export default function ExampleScrollAreaScrollFade() {
   return (
     <ScrollArea.Root className="h-48 w-96 max-w-[calc(100vw-8rem)] bg-neutral-100 dark:bg-neutral-800">
-      <ScrollArea.Viewport className="h-full bg-neutral-100 dark:bg-neutral-800 mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] mask-no-repeat focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+      <ScrollArea.Viewport className="h-full bg-neutral-100 dark:bg-neutral-800 mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] mask-no-repeat focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
         <ScrollArea.Content className="flex flex-col gap-4 py-2 pr-5 pl-3 text-sm leading-[1.375rem] text-neutral-950 dark:text-white">
           <p>
             Vernacular architecture is building done outside any academic tradition, and without
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
index d8d19836942..143e5465d7e 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
@@ -43,7 +43,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -248,7 +248,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -393,7 +393,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -443,7 +443,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index 495641293e5..a9542cb2b8c 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -35,7 +35,7 @@ function StackedToastButton() {
   return (
     <button
       type="button"
-      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       onClick={createToast}
     >
       Stacked toast
@@ -68,7 +68,7 @@ function CopyButton() {
       <Tooltip.Trigger
         ref={buttonRef}
         closeOnClick={false}
-        className="flex h-8 w-8 items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+        className="flex h-8 w-8 items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         onClick={handleCopy}
         aria-label="Copy to clipboard"
         render={<Button disabled={copied} focusableWhenDisabled />}
@@ -100,7 +100,7 @@ function AnchoredToasts() {
           >
             <Toast.Root
               toast={toast}
-              className="relative flex flex-col w-max border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+              className="relative flex flex-col w-max border border-neutral-950 bg-white px-2 py-1 text-sm text-neutral-950 origin-[var(--transform-origin)] shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-instant:transition-none data-starting-style:opacity-0 data-starting-style:scale-[0.98] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
             >
               <Toast.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
               <Toast.Content>
@@ -130,7 +130,7 @@ function StackedToasts() {
                 <Toast.Title className="text-sm font-bold" />
                 <Toast.Description className="text-sm" />
               </div>
-              <Toast.Close className="flex h-8 shrink-0 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+              <Toast.Close className="flex h-8 shrink-0 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                 Dismiss
               </Toast.Close>
             </Toast.Content>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
index 798309b3375..57fb042184b 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
@@ -195,7 +195,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -249,7 +249,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
index 87cfa6539ef..45fb7c70ea7 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
@@ -207,7 +207,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -261,7 +261,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
index 798309b3375..57fb042184b 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
@@ -195,7 +195,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -249,7 +249,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
index 97bd810f86a..45f2b8bcbf3 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
@@ -30,7 +30,7 @@ function ToastButton() {
   return (
     <button
       type="button"
-      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       onClick={createToast}
     >
       Create toast
@@ -51,7 +51,7 @@ function ToastList() {
           <Toast.Title className="text-sm font-bold" />
           <Toast.Description className="text-sm" />
         </div>
-        <Toast.Close className="flex h-8 shrink-0 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <Toast.Close className="flex h-8 shrink-0 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           Dismiss
         </Toast.Close>
       </Toast.Content>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
index 8397ee693cc..192796149a9 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
@@ -190,7 +190,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -244,7 +244,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
index c5fe910806d..c1f51c77b31 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
@@ -30,7 +30,7 @@ function ToastButton() {
   return (
     <button
       type="button"
-      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+      className="flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       onClick={createToast}
     >
       Create toast
@@ -52,7 +52,7 @@ function ToastList() {
           <Toast.Title className="text-sm font-bold" />
           <Toast.Description className="text-sm" />
         </div>
-        <Toast.Close className="flex h-8 shrink-0 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <Toast.Close className="flex h-8 shrink-0 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 py-0 font-[inherit] text-sm leading-none whitespace-nowrap font-normal text-neutral-950 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           Dismiss
         </Toast.Close>
       </Toast.Content>
diff --git a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
index 2e435877cdb..a19f4c7b74b 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
@@ -211,7 +211,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -265,7 +265,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
index 5124ba9b3c8..37a346eccad 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
@@ -201,7 +201,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -255,7 +255,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
diff --git a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
index 4f948f2e289..067e75c6e3e 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
@@ -195,7 +195,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -249,7 +249,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--color-neutral-950);
-    outline-offset: -2px;
+    outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;

From b143cb3b8ee179d844427760a1f99764aff900ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 14 May 2026 18:56:40 +0200
Subject: [PATCH 191/257] ScrollArea: fix focus ring

---
 .../scroll-fade/css-modules/index.module.css   | 18 +++++++++---------
 .../demos/scroll-fade/tailwind/index.tsx       |  6 +++---
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
index 57e1eb73a87..b1518c51675 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
@@ -8,6 +8,14 @@
   @media (prefers-color-scheme: dark) {
     background-color: var(--color-neutral-800);
   }
+
+  &:has(.Viewport:focus-visible) {
+    outline: 2px solid var(--color-neutral-950);
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Viewport {
@@ -22,19 +30,11 @@
     transparent 100%
   );
   mask-repeat: no-repeat;
+  outline: none;
 
   @media (prefers-color-scheme: dark) {
     background: var(--color-neutral-800);
   }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
-    outline-offset: -1px;
-
-    @media (prefers-color-scheme: dark) {
-      outline-color: white;
-    }
-  }
 }
 
 .Content {
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
index d811d487101..2e79511ebbb 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/tailwind/index.tsx
@@ -2,8 +2,8 @@ import { ScrollArea } from '@base-ui/react/scroll-area';
 
 export default function ExampleScrollAreaScrollFade() {
   return (
-    <ScrollArea.Root className="h-48 w-96 max-w-[calc(100vw-8rem)] bg-neutral-100 dark:bg-neutral-800">
-      <ScrollArea.Viewport className="h-full bg-neutral-100 dark:bg-neutral-800 mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] mask-no-repeat focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+    <ScrollArea.Root className="h-48 w-96 max-w-[calc(100vw-8rem)] bg-neutral-100 dark:bg-neutral-800 has-[>_:first-child:focus-visible]:outline-2 has-[>_:first-child:focus-visible]:outline-offset-0 has-[>_:first-child:focus-visible]:outline-neutral-950 dark:has-[>_:first-child:focus-visible]:outline-white">
+      <ScrollArea.Viewport className="h-full bg-neutral-100 dark:bg-neutral-800 outline-none mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] mask-no-repeat">
         <ScrollArea.Content className="flex flex-col gap-4 py-2 pr-5 pl-3 text-sm leading-[1.375rem] text-neutral-950 dark:text-white">
           <p>
             Vernacular architecture is building done outside any academic tradition, and without
@@ -26,7 +26,7 @@ export default function ExampleScrollAreaScrollFade() {
           </p>
         </ScrollArea.Content>
       </ScrollArea.Viewport>
-      <ScrollArea.Scrollbar className="m-px flex w-2 justify-center bg-black/8 dark:bg-white/12 opacity-0 transition-opacity pointer-events-none data-hovering:opacity-100 data-hovering:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-scrolling:pointer-events-auto">
+      <ScrollArea.Scrollbar className="m-px flex w-2 justify-center bg-black/8 dark:bg-white/12 opacity-0 transition-opacity duration-150 pointer-events-none data-hovering:opacity-100 data-hovering:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-scrolling:pointer-events-auto">
         <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
       </ScrollArea.Scrollbar>
     </ScrollArea.Root>

From e6f60f77606926ca0061cfbf2468c48c3ee2313c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 14 May 2026 18:59:53 +0200
Subject: [PATCH 192/257] Toolbar: fix focus ring

---
 .../react/components/toolbar/demos/hero/tailwind/index.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
index 1d31f368235..f5185937d9d 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
@@ -78,7 +78,7 @@ export default function ExampleToolbar() {
       </Select.Root>
       <Toolbar.Separator className="m-1 h-4 w-px bg-neutral-950 dark:bg-white" />
       <Toolbar.Link
-        className="mr-[0.875rem] ml-auto flex-none self-center font-[inherit] text-sm text-neutral-500 no-underline hover:text-blue-700 dark:text-neutral-400 dark:hover:text-blue-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+        className="mr-[0.875rem] ml-auto flex-none self-center font-[inherit] text-sm text-neutral-500 no-underline hover:text-blue-700 dark:text-neutral-400 dark:hover:text-blue-500 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
         href="#"
       >
         Edited 51m ago

From df18f7548c1a93a188c03840d4633ec89db2d15e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 14 May 2026 19:11:04 +0200
Subject: [PATCH 193/257] Menubar: fix focus ring

---
 .../menubar/demos/hero/css-modules/index.module.css       | 2 +-
 .../components/menubar/demos/hero/tailwind/index.tsx      | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
index 9958023ec67..6da92b0f5ec 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
@@ -57,9 +57,9 @@
   }
 
   &:focus-visible {
-    background-color: var(--color-neutral-100);
     outline: 2px solid var(--color-neutral-950);
     outline-offset: -1px;
+    position: relative;
 
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-neutral-800);
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
index 8da4bde2da7..33582caa0ca 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleMenubar() {
   return (
     <Menubar className="flex items-center">
       <Menu.Root>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 focus-visible:relative dark:focus-visible:outline-white">
           File
         </Menu.Trigger>
         <Menu.Portal>
@@ -76,7 +76,7 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 focus-visible:relative dark:focus-visible:outline-white">
           Edit
         </Menu.Trigger>
         <Menu.Portal>
@@ -106,7 +106,7 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 focus-visible:relative dark:focus-visible:outline-white">
           View
         </Menu.Trigger>
         <Menu.Portal>
@@ -169,7 +169,7 @@ export default function ExampleMenubar() {
       </Menu.Root>
 
       <Menu.Root disabled>
-        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <Menu.Trigger className="h-8 border-0 bg-transparent px-3 font-[inherit] text-sm font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 data-pressed:bg-neutral-100 data-disabled:text-neutral-500 dark:text-white dark:focus-visible:bg-neutral-800 dark:data-popup-open:bg-neutral-800 dark:data-pressed:bg-neutral-800 dark:data-disabled:text-neutral-400 focus-visible:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 focus-visible:relative dark:focus-visible:outline-white">
           Help
         </Menu.Trigger>
       </Menu.Root>

From f4d98fcce57bce132db895122c1286eb72586f4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 14 May 2026 21:58:29 +0200
Subject: [PATCH 194/257] Toast: fix cut focus rings

---
 .../demos/anchored/css-modules/index.module.css     |  4 +++-
 .../toast/demos/anchored/tailwind/index.tsx         |  4 ++--
 .../toast/demos/custom/css-modules/index.module.css | 13 ++++++++++++-
 .../demos/deduplicate/css-modules/index.module.css  | 13 ++++++++++++-
 .../toast/demos/hero/css-modules/index.module.css   | 13 ++++++++++++-
 .../components/toast/demos/hero/tailwind/index.tsx  |  4 ++--
 .../demos/position/css-modules/index.module.css     | 13 ++++++++++++-
 .../toast/demos/position/tailwind/index.tsx         |  4 ++--
 .../demos/promise/css-modules/index.module.css      | 13 ++++++++++++-
 .../toast/demos/undo/css-modules/index.module.css   | 13 ++++++++++++-
 .../varying-heights/css-modules/index.module.css    | 13 ++++++++++++-
 .../react/handbook/forms/demos/components/toast.tsx |  4 ++--
 12 files changed, 95 insertions(+), 16 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
index 143e5465d7e..ebf01c90392 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
@@ -86,7 +86,6 @@
   border: 1px solid var(--color-neutral-950);
   background-color: white;
   color: var(--color-neutral-950);
-  padding: 0.75rem;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
@@ -158,9 +157,12 @@
 }
 
 .Content {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: 1rem;
+  height: 100%;
+  padding: 0.75rem;
   overflow: hidden;
   transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index a9542cb2b8c..dad908088a8 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -123,9 +123,9 @@ function StackedToasts() {
           <Toast.Root
             key={toast.id}
             toast={toast}
-            className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-limited:opacity-0 data-starting-style:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-expanded:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+            className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-limited:opacity-0 data-starting-style:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-expanded:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
           >
-            <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100">
+            <Toast.Content className="flex h-full items-center gap-4 p-3 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100">
               <div className="flex min-w-0 flex-1 flex-col gap-1">
                 <Toast.Title className="text-sm font-bold" />
                 <Toast.Description className="text-sm" />
diff --git a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
index 57fb042184b..db135c31a2d 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
@@ -33,7 +33,6 @@
   border: 1px solid var(--color-neutral-950);
   background-color: white;
   color: var(--color-neutral-950);
-  padding: 0.75rem;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
@@ -102,12 +101,24 @@
     left: 0;
     height: calc(var(--gap) + 1px);
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-neutral-950);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Content {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: 1rem;
+  height: 100%;
+  padding: 0.75rem;
   overflow: hidden;
   transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
diff --git a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
index 45fb7c70ea7..9908b0583c1 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
@@ -33,7 +33,6 @@
   border: 1px solid var(--color-neutral-950);
   background-color: white;
   color: var(--color-neutral-950);
-  padding: 0.75rem;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
@@ -105,6 +104,15 @@
     width: 100%;
     height: calc(var(--gap) + 1px);
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-neutral-950);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 /* Alternate animation names so repeated updates restart the same pulse. */
@@ -117,9 +125,12 @@
 }
 
 .Content {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: 1rem;
+  height: 100%;
+  padding: 0.75rem;
   overflow: hidden;
   transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
index 57fb042184b..db135c31a2d 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
@@ -33,7 +33,6 @@
   border: 1px solid var(--color-neutral-950);
   background-color: white;
   color: var(--color-neutral-950);
-  padding: 0.75rem;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
@@ -102,12 +101,24 @@
     left: 0;
     height: calc(var(--gap) + 1px);
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-neutral-950);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Content {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: 1rem;
+  height: 100%;
+  padding: 0.75rem;
   overflow: hidden;
   transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
index 45f2b8bcbf3..13d5b07eead 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/tailwind/index.tsx
@@ -44,9 +44,9 @@ function ToastList() {
     <Toast.Root
       key={toast.id}
       toast={toast}
-      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-limited:opacity-0 data-starting-style:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-expanded:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-limited:opacity-0 data-starting-style:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-expanded:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
     >
-      <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100">
+      <Toast.Content className="flex h-full items-center gap-4 p-3 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100">
         <div className="flex min-w-0 flex-1 flex-col gap-1">
           <Toast.Title className="text-sm font-bold" />
           <Toast.Description className="text-sm" />
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
index 192796149a9..bdf076f4a87 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
@@ -26,7 +26,6 @@
   border: 1px solid var(--color-neutral-950);
   background-color: white;
   color: var(--color-neutral-950);
-  padding: 0.75rem;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: top center;
   top: 0;
@@ -97,12 +96,24 @@
     left: 0;
     height: calc(var(--gap) + 1px);
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-neutral-950);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Content {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: 1rem;
+  height: 100%;
+  padding: 0.75rem;
   overflow: hidden;
   transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
index c1f51c77b31..5c4bcc83b52 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/tailwind/index.tsx
@@ -45,9 +45,9 @@ function ToastList() {
       key={toast.id}
       toast={toast}
       swipeDirection="up"
-      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)+(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))] absolute top-0 right-0 left-0 z-[calc(1000-var(--toast-index))] mx-auto w-full origin-top [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-limited:opacity-0 data-starting-style:[transform:translateY(-150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)] data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-expanded:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)+(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))] absolute top-0 right-0 left-0 z-[calc(1000-var(--toast-index))] mx-auto w-full origin-top [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-limited:opacity-0 data-starting-style:[transform:translateY(-150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)] data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--height)] data-expanded:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
     >
-      <Toast.Content className="flex items-center gap-4 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100">
+      <Toast.Content className="flex h-full items-center gap-4 p-3 overflow-hidden transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100">
         <div className="flex min-w-0 flex-1 flex-col gap-1">
           <Toast.Title className="text-sm font-bold" />
           <Toast.Description className="text-sm" />
diff --git a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
index a19f4c7b74b..29c3963e00c 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
@@ -33,7 +33,6 @@
   border: 1px solid var(--color-neutral-950);
   background-color: white;
   color: var(--color-neutral-950);
-  padding: 0.75rem;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
@@ -118,12 +117,24 @@
       color: var(--color-red-400);
     }
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-neutral-950);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Content {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: 1rem;
+  height: 100%;
+  padding: 0.75rem;
   overflow: hidden;
   transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
diff --git a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
index 37a346eccad..903b361a438 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
@@ -33,7 +33,6 @@
   border: 1px solid var(--color-neutral-950);
   background-color: white;
   color: var(--color-neutral-950);
-  padding: 0.75rem;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
@@ -102,12 +101,24 @@
     left: 0;
     height: calc(var(--gap) + 1px);
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-neutral-950);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Content {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: 1rem;
+  height: 100%;
+  padding: 0.75rem;
   overflow: hidden;
   transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
diff --git a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
index 067e75c6e3e..1ace47b315b 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
@@ -33,7 +33,6 @@
   border: 1px solid var(--color-neutral-950);
   background-color: white;
   color: var(--color-neutral-950);
-  padding: 0.75rem;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
@@ -102,12 +101,24 @@
     left: 0;
     height: calc(var(--gap) + 1px);
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-neutral-950);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
 }
 
 .Content {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: 1rem;
+  height: 100%;
+  padding: 0.75rem;
   overflow: hidden;
   transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
index 57119d0a9b4..d7f92931eca 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
@@ -8,9 +8,9 @@ function Toasts() {
     <Toast.Root
       key={toast.id}
       toast={toast}
-      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white p-3 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-limited:opacity-0 data-starting-style:transform-[translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:transform-[translateY(150%)] data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-150%))] h-(--height) [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
+      className="[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 select-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-limited:opacity-0 data-starting-style:transform-[translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:transform-[translateY(150%)] data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-150%))] h-(--height) [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]"
     >
-      <Toast.Content className="overflow-hidden transition-opacity duration-250">
+      <Toast.Content className="h-full overflow-hidden p-3 transition-opacity duration-250">
         <Toast.Title className="text-sm font-bold" />
         <Toast.Description className="text-sm text-neutral-700 dark:text-neutral-300" />
         <div

From 1890c1320602d1d947f124833163797703b05447 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 14 May 2026 22:05:48 +0200
Subject: [PATCH 195/257] ToggleGroup: new icons

---
 .../demos/hero/css-modules/index.tsx             | 16 ++++------------
 .../toggle-group/demos/hero/tailwind/index.tsx   | 16 ++++------------
 2 files changed, 8 insertions(+), 24 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.tsx
index ffd1cd4ee33..5f93586e5d7 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.tsx
@@ -24,15 +24,13 @@ function AlignLeftIcon(props: React.ComponentProps<'svg'>) {
     <svg
       width="16"
       height="16"
+      fill="none"
       viewBox="0 0 16 16"
       stroke="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M2.5 3.5H13.5" />
-      <path d="M2.5 9.5H13.5" />
-      <path d="M2.5 6.5H10.5" />
-      <path d="M2.5 12.5H10.5" />
+      <path strokeLinecap="square" strokeLinejoin="round" d="M2.5 4.5h11m-11 7h9M2.5 8h5" />
     </svg>
   );
 }
@@ -47,10 +45,7 @@ function AlignCenterIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M3 3.5H14" />
-      <path d="M3 9.5H14" />
-      <path d="M4.5 6.5H12.5" />
-      <path d="M4.5 12.5H12.5" />
+      <path strokeLinecap="square" strokeLinejoin="round" d="M2.5 4.5h11m-10 7h9M5.5 8h5" />
     </svg>
   );
 }
@@ -65,10 +60,7 @@ function AlignRightIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M2.5 3.5H13.5" />
-      <path d="M2.5 9.5H13.5" />
-      <path d="M5.5 6.5H13.5" />
-      <path d="M5.5 12.5H13.5" />
+      <path strokeLinecap="square" strokeLinejoin="round" d="M2.5 4.5h11m-9 7h9M8.5 8h5" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
index 5a9770262b6..e6692615ef1 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/tailwind/index.tsx
@@ -38,15 +38,13 @@ function AlignLeftIcon(props: React.ComponentProps<'svg'>) {
     <svg
       width="16"
       height="16"
+      fill="none"
       viewBox="0 0 16 16"
       stroke="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M2.5 3.5H13.5" />
-      <path d="M2.5 9.5H13.5" />
-      <path d="M2.5 6.5H10.5" />
-      <path d="M2.5 12.5H10.5" />
+      <path strokeLinecap="square" strokeLinejoin="round" d="M2.5 4.5h11m-11 7h9M2.5 8h5" />
     </svg>
   );
 }
@@ -61,10 +59,7 @@ function AlignCenterIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M3 3.5H14" />
-      <path d="M3 9.5H14" />
-      <path d="M4.5 6.5H12.5" />
-      <path d="M4.5 12.5H12.5" />
+      <path strokeLinecap="square" strokeLinejoin="round" d="M2.5 4.5h11m-10 7h9M5.5 8h5" />
     </svg>
   );
 }
@@ -79,10 +74,7 @@ function AlignRightIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M2.5 3.5H13.5" />
-      <path d="M2.5 9.5H13.5" />
-      <path d="M5.5 6.5H13.5" />
-      <path d="M5.5 12.5H13.5" />
+      <path strokeLinecap="square" strokeLinejoin="round" d="M2.5 4.5h11m-9 7h9M8.5 8h5" />
     </svg>
   );
 }

From 41fdd869953412e51229b40d37a5c4a8a5d69d7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 14 May 2026 22:35:20 +0200
Subject: [PATCH 196/257] Select / Combobox: new caret up/down icon

---
 .../css-modules/index.module.css              |  2 +-
 .../input-inside-popup/css-modules/index.tsx  | 17 +++++++----------
 .../input-inside-popup/tailwind/index.tsx     | 19 ++++++++-----------
 .../grouped/css-modules/index.module.css      |  2 +-
 .../demos/grouped/css-modules/index.tsx       | 17 +++++++----------
 .../select/demos/grouped/tailwind/index.tsx   | 19 ++++++++-----------
 .../demos/hero/css-modules/index.module.css   |  2 +-
 .../select/demos/hero/css-modules/index.tsx   | 17 +++++++----------
 .../select/demos/hero/tailwind/index.tsx      | 19 ++++++++-----------
 .../multiple/css-modules/index.module.css     |  2 +-
 .../demos/multiple/css-modules/index.tsx      | 17 +++++++----------
 .../select/demos/multiple/tailwind/index.tsx  | 19 ++++++++-----------
 .../css-modules/index.module.css              |  2 +-
 .../demos/object-values/css-modules/index.tsx | 17 +++++++----------
 .../demos/object-values/tailwind/index.tsx    | 19 ++++++++-----------
 .../toolbar/demos/hero/css-modules/index.tsx  | 17 +++++++----------
 .../toolbar/demos/hero/tailwind/index.tsx     | 17 +++++++----------
 .../css-modules/index.module.css              |  2 +-
 .../css-modules/index.tsx                     | 17 +++++++----------
 .../forms/demos/components/select.tsx         |  2 +-
 .../forms/demos/hero/tailwind/index.tsx       | 17 +++++++----------
 .../demos/react-hook-form/tailwind/index.tsx  | 17 +++++++----------
 .../demos/tanstack-form/tailwind/index.tsx    | 17 +++++++----------
 23 files changed, 124 insertions(+), 172 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
index 742b7706035..295382795de 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
@@ -13,7 +13,7 @@
   gap: 0.75rem;
   height: 2rem;
   padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-right: 0.25rem;
   margin: 0;
   outline: 0;
   border: 1px solid var(--color-neutral-950);
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
index 013da3be3c8..75af7e11cf1 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
@@ -11,7 +11,7 @@ export default function ExamplePopoverCombobox() {
         <Combobox.Trigger className={styles.Trigger}>
           <Combobox.Value placeholder="Select country" />
           <Combobox.Icon className={styles.TriggerIcon}>
-            <ChevronUpDownIcon />
+            <CaretUpDownIcon />
           </Combobox.Icon>
         </Combobox.Trigger>
         <Combobox.Portal>
@@ -41,20 +41,17 @@ export default function ExamplePopoverCombobox() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
-      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index 5923b96db83..9ee045314c1 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -9,10 +9,10 @@ export default function ExamplePopoverCombobox() {
         <Combobox.Label className="cursor-default text-sm leading-5 font-bold text-neutral-950 dark:text-white">
           Country
         </Combobox.Label>
-        <Combobox.Trigger className="flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white px-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 data-popup-open:bg-neutral-100 data-placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:data-placeholder:text-neutral-400 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800">
+        <Combobox.Trigger className="flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white pl-2 pr-1 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:bg-neutral-100 active:bg-neutral-200 data-popup-open:bg-neutral-100 data-placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:data-placeholder:text-neutral-400 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-popup-open:bg-neutral-800">
           <Combobox.Value placeholder="Select country" />
           <Combobox.Icon className="text-neutral-950 dark:text-white">
-            <ChevronUpDownIcon />
+            <CaretUpDownIcon />
           </Combobox.Icon>
         </Combobox.Trigger>
         <Combobox.Portal>
@@ -54,20 +54,17 @@ export default function ExamplePopoverCombobox() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
-      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index f773c5eab04..0ac3ef18bac 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -33,7 +33,7 @@
   gap: 0.75rem;
   height: 2rem;
   padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-right: 0.25rem;
   margin: 0;
   outline: 0;
   border: 1px solid var(--color-neutral-950);
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
index 2e2600be1df..3a44bc55d3e 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleSelectGrouped() {
         <Select.Trigger className={styles.Select}>
           <Select.Value className={styles.Value} placeholder="Select produce" />
           <Select.Icon>
-            <ChevronUpDownIcon />
+            <CaretUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
@@ -53,20 +53,17 @@ export default function ExampleSelectGrouped() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
-      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index e35b968a79a..03ad0cd08f4 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -13,13 +13,13 @@ export default function ExampleSelectGrouped() {
         Produce
       </Field.Label>
       <Select.Root items={groupedProduce}>
-        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-2 pr-2 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <Select.Trigger className="flex h-8 min-w-44 items-center justify-between gap-3 pl-2 pr-1 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           <Select.Value
             className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400"
             placeholder="Select produce"
           />
           <Select.Icon>
-            <ChevronUpDownIcon />
+            <CaretUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
@@ -65,20 +65,17 @@ export default function ExampleSelectGrouped() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
-      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
index dfdbb441310..f7c33daad92 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
@@ -33,7 +33,7 @@
   gap: 0.75rem;
   height: 2rem;
   padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-right: 0.25rem;
   margin: 0;
   outline: 0;
   border: 1px solid var(--color-neutral-950);
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
index 264408a298d..a119e82d5be 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
@@ -18,7 +18,7 @@ export default function ExampleSelect() {
         <Select.Trigger className={styles.Select}>
           <Select.Value className={styles.Value} placeholder="Select apple" />
           <Select.Icon>
-            <ChevronUpDownIcon />
+            <CaretUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
@@ -44,20 +44,17 @@ export default function ExampleSelect() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
-      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index a72c7513042..a6841e6200a 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -16,13 +16,13 @@ export default function ExampleSelect() {
         <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Apple
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-2 pr-2 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <Select.Trigger className="flex h-8 min-w-40 items-center justify-between gap-3 pl-2 pr-1 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           <Select.Value
             className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400"
             placeholder="Select apple"
           />
           <Select.Icon>
-            <ChevronUpDownIcon />
+            <CaretUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
@@ -56,20 +56,17 @@ export default function ExampleSelect() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
-      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
index 58bd70805e4..c0f449f97bf 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
@@ -33,7 +33,7 @@
   gap: 0.75rem;
   height: 2rem;
   padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-right: 0.25rem;
   margin: 0;
   outline: 0;
   border: 1px solid var(--color-neutral-950);
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
index 877cee9ec09..fa479be7246 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
@@ -38,7 +38,7 @@ export default function MultiSelectExample() {
         <Select.Trigger className={styles.Select}>
           <Select.Value className={styles.Value}>{renderValue}</Select.Value>
           <Select.Icon>
-            <ChevronUpDownIcon />
+            <CaretUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
@@ -64,20 +64,17 @@ export default function MultiSelectExample() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
-      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index 47986e3a168..ec9ff85320a 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -36,12 +36,12 @@ export default function MultiSelectExample() {
         <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Languages
         </Select.Label>
-        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-2 pr-2 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <Select.Trigger className="flex h-8 min-w-[14rem] items-center justify-between gap-3 pl-2 pr-1 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           <Select.Value className="data-placeholder:text-neutral-500 dark:data-placeholder:text-neutral-400">
             {renderValue}
           </Select.Value>
           <Select.Icon>
-            <ChevronUpDownIcon />
+            <CaretUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
@@ -71,20 +71,17 @@ export default function MultiSelectExample() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
-      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
index 1c361167958..60b278d7274 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
@@ -26,7 +26,7 @@
   min-height: 2rem;
   padding-block: 0.375rem;
   padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-right: 0.25rem;
   margin: 0;
   outline: 0;
   border: 1px solid var(--color-neutral-950);
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
index 627ea37839a..3ea5c7462dd 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
@@ -20,7 +20,7 @@ export default function ObjectValueSelect() {
             )}
           </Select.Value>
           <Select.Icon>
-            <ChevronUpDownIcon />
+            <CaretUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
@@ -51,20 +51,17 @@ export default function ObjectValueSelect() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
-      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index addb3a43bfc..4e837bf8698 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ObjectValueSelect() {
         <Select.Label className="cursor-default text-sm font-bold text-neutral-950 dark:text-white">
           Shipping method
         </Select.Label>
-        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-center justify-between gap-3 pl-2 pr-2 py-1.5 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+        <Select.Trigger className="flex min-h-8 min-w-[16rem] items-center justify-between gap-3 pl-2 pr-1 py-1.5 text-sm leading-none whitespace-nowrap border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-popup-open:bg-neutral-100 dark:data-popup-open:bg-neutral-800 font-normal focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
           <Select.Value>
             {(method: ShippingMethod) => (
               <span className="flex flex-col items-start gap-0.5">
@@ -21,7 +21,7 @@ export default function ObjectValueSelect() {
             )}
           </Select.Value>
           <Select.Icon>
-            <ChevronUpDownIcon />
+            <CaretUpDownIcon />
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
@@ -60,20 +60,17 @@ export default function ObjectValueSelect() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
-      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
index 5d195b96b16..a2b3a7d5e33 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
@@ -40,7 +40,7 @@ export default function ExampleToolbar() {
         <Toolbar.Button render={<Select.Trigger />} className={styles.Button}>
           <Select.Value />
           <Select.Icon>
-            <ChevronUpDownIcon />
+            <CaretUpDownIcon />
           </Select.Icon>
         </Toolbar.Button>
         <Select.Portal>
@@ -70,20 +70,17 @@ export default function ExampleToolbar() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
-      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
index f5185937d9d..3a277b98566 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
@@ -48,7 +48,7 @@ export default function ExampleToolbar() {
         >
           <Select.Value />
           <Select.Icon>
-            <ChevronUpDownIcon />
+            <CaretUpDownIcon />
           </Select.Icon>
         </Toolbar.Button>
         <Select.Portal>
@@ -87,20 +87,17 @@ export default function ExampleToolbar() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
-      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
index 3d1ebee9e8c..d2eee9e8ab4 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
@@ -6,7 +6,7 @@
   gap: 0.75rem;
   height: 2rem;
   padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-right: 0.25rem;
   margin: 0;
   outline: 0;
   border: 1px solid var(--color-neutral-950);
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
index 7f05c35dcae..9bddc2ccb22 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
@@ -46,7 +46,7 @@ export default function AnimatedSelectMotionDemo() {
       <Select.Trigger className={styles.Select}>
         <Select.Value className={styles.Value} />
         <Select.Icon>
-          <ChevronUpDownIcon />
+          <CaretUpDownIcon />
         </Select.Icon>
       </Select.Trigger>
       <AnimatePresence>
@@ -75,20 +75,17 @@ export default function AnimatedSelectMotionDemo() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
-      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
index 11b22308b4e..488deccdf02 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
@@ -22,7 +22,7 @@ export function Trigger({ className, ...props }: Select.Trigger.Props) {
   return (
     <Select.Trigger
       className={clsx(
-        'flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white px-2 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800',
+        'flex h-8 min-w-40 cursor-default items-center justify-between gap-3 border border-neutral-950 bg-white pl-2 pr-1 text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
index 440acc3eedd..591128f72a7 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
@@ -118,7 +118,7 @@ function ExampleForm() {
             <Select.Trigger className="w-48">
               <Select.Value />
               <Select.Icon>
-                <ChevronUpDownIcon />
+                <CaretUpDownIcon />
               </Select.Icon>
             </Select.Trigger>
           </div>
@@ -260,20 +260,17 @@ export default function App() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
-      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
index 8c949cb6d99..c26b1e0587f 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
@@ -197,7 +197,7 @@ function ReactHookForm() {
                 <Select.Trigger className="w-48" onBlur={onBlur}>
                   <Select.Value />
                   <Select.Icon>
-                    <ChevronUpDownIcon />
+                    <CaretUpDownIcon />
                   </Select.Icon>
                 </Select.Trigger>
               </div>
@@ -414,20 +414,17 @@ export default function App() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
-      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
index 528b26ea1cb..40061473163 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
@@ -240,7 +240,7 @@ function TanstackForm() {
                   <Select.Trigger className="w-48" onBlur={field.handleBlur}>
                     <Select.Value />
                     <Select.Icon>
-                      <ChevronUpDownIcon />
+                      <CaretUpDownIcon />
                     </Select.Icon>
                   </Select.Trigger>
                 </div>
@@ -486,20 +486,17 @@ export default function App() {
   );
 }
 
-function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m7 15 5 5 5-5" vectorEffect="non-scaling-stroke" />
-      <path d="m7 9 5-5 5 5" vectorEffect="non-scaling-stroke" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }

From 97e59425c7a29b806e3a471d8a1b716ee7d9232a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 14 May 2026 23:19:30 +0200
Subject: [PATCH 197/257] New Caret icons

---
 .../demos/hero/css-modules/index.tsx          | 14 ++++----
 .../collapsible/demos/hero/tailwind/index.tsx | 14 ++++----
 .../demos/async-single/css-modules/index.tsx  | 15 ++++----
 .../demos/async-single/tailwind/index.tsx     | 15 ++++----
 .../demos/grouped/css-modules/index.tsx       | 15 ++++----
 .../combobox/demos/grouped/tailwind/index.tsx | 15 ++++----
 .../combobox/demos/hero/css-modules/index.tsx | 15 ++++----
 .../combobox/demos/hero/tailwind/index.tsx    | 15 ++++----
 .../submenu/css-modules/index.module.css      |  4 +--
 .../demos/submenu/css-modules/index.tsx       | 15 ++++----
 .../demos/submenu/tailwind/index.tsx          | 19 +++++------
 .../menu/demos/arrow/css-modules/index.tsx    | 15 ++++----
 .../menu/demos/arrow/tailwind/index.tsx       | 15 ++++----
 .../checkbox-items/css-modules/index.tsx      | 15 ++++----
 .../demos/checkbox-items/tailwind/index.tsx   | 15 ++++----
 .../demos/group-labels/css-modules/index.tsx  | 15 ++++----
 .../demos/group-labels/tailwind/index.tsx     | 15 ++++----
 .../menu/demos/hero/css-modules/index.tsx     | 15 ++++----
 .../menu/demos/hero/tailwind/index.tsx        | 15 ++++----
 .../demos/open-on-hover/css-modules/index.tsx | 15 ++++----
 .../demos/open-on-hover/tailwind/index.tsx    | 15 ++++----
 .../demos/radio-items/css-modules/index.tsx   | 15 ++++----
 .../menu/demos/radio-items/tailwind/index.tsx | 15 ++++----
 .../submenu/css-modules/index.module.css      |  4 +--
 .../menu/demos/submenu/css-modules/index.tsx  | 30 ++++++++--------
 .../menu/demos/submenu/tailwind/index.tsx     | 34 +++++++++----------
 .../demos/hero/css-modules/index.module.css   |  7 +++-
 .../menubar/demos/hero/css-modules/index.tsx  | 19 +++++------
 .../menubar/demos/hero/tailwind/index.tsx     | 21 ++++++------
 .../demos/hero/css-modules/index.tsx          | 17 +++++-----
 .../demos/hero/tailwind/index.tsx             | 17 +++++-----
 .../demos/nested-inline/css-modules/index.tsx | 17 +++++-----
 .../demos/nested-inline/tailwind/index.tsx    | 17 +++++-----
 .../demos/nested/css-modules/index.tsx        | 30 ++++++++--------
 .../demos/nested/tailwind/index.tsx           | 30 ++++++++--------
 .../forms/demos/components/combobox.tsx       | 13 ++++---
 .../forms/demos/hero/tailwind/index.tsx       |  2 +-
 .../demos/react-hook-form/tailwind/index.tsx  |  2 +-
 .../demos/tanstack-form/tailwind/index.tsx    |  2 +-
 39 files changed, 284 insertions(+), 314 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx
index e6b25432997..557b1464ee0 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleCollapsible() {
     <Collapsible.Root className={styles.Collapsible}>
       <Collapsible.Trigger className={styles.Trigger}>
         Recovery keys
-        <ChevronIcon className={styles.Icon} />
+        <CaretRightIcon className={styles.Icon} />
       </Collapsible.Trigger>
       <Collapsible.Panel className={styles.Panel}>
         <div className={styles.Content}>
@@ -20,17 +20,17 @@ export default function ExampleCollapsible() {
   );
 }
 
-export function ChevronIcon(props: React.ComponentProps<'svg'>) {
+export function CaretRightIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M3.5 1L7.5 5L3.5 9" stroke="currentColor" strokeWidth="1" />
+      <path d="M6 12V4l4.5 4z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
index d0caa86b691..8c837c7d27d 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/tailwind/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleCollapsible() {
     <Collapsible.Root className="flex min-h-36 w-48 flex-col justify-center text-neutral-950 dark:text-white">
       <Collapsible.Trigger className="group flex h-8 items-center justify-between gap-2 rounded-none border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400">
         Recovery keys
-        <ChevronIcon className="transition-transform duration-100 ease-out group-data-panel-open:rotate-90" />
+        <CaretRightIcon className="transition-transform duration-100 ease-out group-data-panel-open:rotate-90" />
       </Collapsible.Trigger>
       <Collapsible.Panel className="flex h-[var(--collapsible-panel-height)] flex-col justify-end overflow-hidden text-sm transition-[height] duration-150 ease-out [&[hidden]:not([hidden='until-found'])]:hidden data-ending-style:h-0 data-starting-style:h-0">
         <div className="flex flex-col gap-2 px-3.5 py-2">
@@ -19,17 +19,17 @@ export default function ExampleCollapsible() {
   );
 }
 
-export function ChevronIcon(props: React.ComponentProps<'svg'>) {
+export function CaretRightIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M3.5 1L7.5 5L3.5 9" stroke="currentColor" strokeWidth="1" />
+      <path d="M6 12V4l4.5 4z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
index 7565ad76fb7..b3b8ee9b364 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
@@ -119,7 +119,7 @@ export default function ExampleAsyncSingleCombobox() {
               <XIcon />
             </Combobox.Clear>
             <Combobox.Trigger className={styles.Trigger} aria-label="Open popup">
-              <ChevronDownIcon />
+              <CaretDownIcon />
             </Combobox.Trigger>
           </div>
         </Combobox.InputGroup>
@@ -195,18 +195,17 @@ function XIcon(props: React.ComponentProps<'svg'>) {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="10"
-      height="10"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index f929407c1bd..b78921c6d21 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -130,7 +130,7 @@ export default function ExampleAsyncSingleCombobox() {
               className="flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white"
               aria-label="Open popup"
             >
-              <ChevronDownIcon />
+              <CaretDownIcon />
             </Combobox.Trigger>
           </div>
         </Combobox.InputGroup>
@@ -221,18 +221,17 @@ function XIcon(props: React.ComponentProps<'svg'>) {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="10"
-      height="10"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
index f20e55cb51e..b8430c2bd43 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
@@ -16,7 +16,7 @@ export default function ExampleGroupedCombobox() {
               <XIcon />
             </Combobox.Clear>
             <Combobox.Trigger className={styles.Trigger} aria-label="Open popup">
-              <ChevronDownIcon />
+              <CaretDownIcon />
             </Combobox.Trigger>
           </div>
         </Combobox.InputGroup>
@@ -89,18 +89,17 @@ function XIcon(props: React.ComponentProps<'svg'>) {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="10"
-      height="10"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index 83df43a10cb..a6ae860dd11 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -25,7 +25,7 @@ export default function ExampleGroupedCombobox() {
               className="flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white"
               aria-label="Open popup"
             >
-              <ChevronDownIcon />
+              <CaretDownIcon />
             </Combobox.Trigger>
           </div>
         </Combobox.InputGroup>
@@ -104,18 +104,17 @@ function XIcon(props: React.ComponentProps<'svg'>) {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="10"
-      height="10"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
index cc1ea3f186b..ac97be5ae1f 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
@@ -16,7 +16,7 @@ export default function ExampleCombobox() {
               <XIcon />
             </Combobox.Clear>
             <Combobox.Trigger className={styles.Trigger} aria-label="Open popup">
-              <ChevronDownIcon />
+              <CaretDownIcon />
             </Combobox.Trigger>
           </div>
         </Combobox.InputGroup>
@@ -80,18 +80,17 @@ function XIcon(props: React.ComponentProps<'svg'>) {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
index d7a04969964..52414ffbb43 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
@@ -25,7 +25,7 @@ export default function ExampleCombobox() {
               className="flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white"
               aria-label="Open popup"
             >
-              <ChevronDownIcon />
+              <CaretDownIcon />
             </Combobox.Trigger>
           </div>
         </Combobox.InputGroup>
@@ -95,18 +95,17 @@ function XIcon(props: React.ComponentProps<'svg'>) {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
index b8f8534dcfe..09b8329fab4 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
@@ -108,7 +108,7 @@
   user-select: none;
   padding-block: 0.5rem;
   padding-left: 1rem;
-  padding-right: 2rem;
+  padding-right: 1.5rem;
   display: flex;
   font-size: 0.875rem;
   line-height: 1rem;
@@ -175,7 +175,7 @@
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  padding-right: 1rem;
+  padding-right: 0.5rem;
 }
 
 .Separator {
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.tsx
index 293f1caa58b..73872652d76 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.tsx
@@ -15,7 +15,7 @@ export default function ExampleContextMenu() {
             <ContextMenu.SubmenuRoot>
               <ContextMenu.SubmenuTrigger className={styles.SubmenuTrigger}>
                 Add to Playlist
-                <ChevronRightIcon />
+                <CaretRightIcon />
               </ContextMenu.SubmenuTrigger>
               <ContextMenu.Portal>
                 <ContextMenu.Positioner
@@ -47,18 +47,17 @@ export default function ExampleContextMenu() {
   );
 }
 
-function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
+function CaretRightIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M6 12V4l4.5 4z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
index 8edc80eac17..0819358f515 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/tailwind/index.tsx
@@ -4,9 +4,9 @@ import { ContextMenu } from '@base-ui/react/context-menu';
 const popupClass =
   'origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
 const itemClass =
-  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 data-disabled:text-neutral-500 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white dark:data-disabled:text-neutral-400";
+  "flex cursor-default py-2 pr-6 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 data-disabled:text-neutral-500 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white dark:data-disabled:text-neutral-400";
 const submenuTriggerClass =
-  "flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 data-disabled:text-neutral-500 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white dark:data-disabled:text-neutral-400";
+  "flex cursor-default items-center justify-between gap-4 py-2 pr-2 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 data-disabled:text-neutral-500 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white dark:data-disabled:text-neutral-400";
 
 export default function ExampleContextMenu() {
   return (
@@ -21,7 +21,7 @@ export default function ExampleContextMenu() {
 
             <ContextMenu.SubmenuRoot>
               <ContextMenu.SubmenuTrigger className={submenuTriggerClass}>
-                Add to Playlist <ChevronRightIcon />
+                Add to Playlist <CaretRightIcon />
               </ContextMenu.SubmenuTrigger>
               <ContextMenu.Portal>
                 <ContextMenu.Positioner className="outline-hidden" alignOffset={-4} sideOffset={-4}>
@@ -50,18 +50,17 @@ export default function ExampleContextMenu() {
   );
 }
 
-function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
+function CaretRightIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M6 12V4l4.5 4z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.tsx
index 1b6a809a0a4..d78716fbb8c 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.tsx
@@ -7,7 +7,7 @@ export default function MenuArrowDemo() {
   return (
     <Menu.Root>
       <Menu.Trigger className={styles.Button}>
-        Song <ChevronDownIcon />
+        Song <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner
@@ -31,18 +31,17 @@ export default function MenuArrowDemo() {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
index 58e978a4fba..fa027d10885 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function MenuArrowDemo() {
   return (
     <Menu.Root>
       <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
-        Song <ChevronDownIcon />
+        Song <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner
@@ -33,18 +33,17 @@ export default function MenuArrowDemo() {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
index 1b62d68ec06..b3244ae9fac 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
@@ -11,7 +11,7 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className={styles.Button}>
-        Workspace <ChevronDownIcon />
+        Workspace <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
@@ -53,18 +53,17 @@ export default function ExampleMenu() {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index 495bb88a1c8..a6eb62be6fb 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
-        Workspace <ChevronDownIcon />
+        Workspace <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
@@ -55,18 +55,17 @@ export default function ExampleMenu() {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
index b5c3c1249df..b0727175d9d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
@@ -12,7 +12,7 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className={styles.Button}>
-        View <ChevronDownIcon />
+        View <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
@@ -83,18 +83,17 @@ export default function ExampleMenu() {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index cf419c10f99..307519ae271 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
-        View <ChevronDownIcon />
+        View <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
@@ -89,18 +89,17 @@ export default function ExampleMenu() {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx
index f7184b22c35..60b69aed3e8 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className={styles.Button}>
-        Song <ChevronDownIcon />
+        Song <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
@@ -26,18 +26,17 @@ export default function ExampleMenu() {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
index 3aecb84221f..7201cd1b877 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
-        Song <ChevronDownIcon />
+        Song <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
@@ -28,18 +28,17 @@ export default function ExampleMenu() {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx
index 78e23b94463..e459f3b1a6c 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger openOnHover className={styles.Button}>
-        Add to playlist <ChevronDownIcon />
+        Add to playlist <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
@@ -23,18 +23,17 @@ export default function ExampleMenu() {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
index 0f50bd79184..74d846e1123 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/tailwind/index.tsx
@@ -11,7 +11,7 @@ export default function ExampleMenu() {
         openOnHover
         className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
-        Add to playlist <ChevronDownIcon />
+        Add to playlist <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
@@ -28,18 +28,17 @@ export default function ExampleMenu() {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
index dd6014a406f..5d580aae8bf 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className={styles.Button}>
-        Sort <ChevronDownIcon />
+        Sort <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
@@ -40,18 +40,17 @@ export default function ExampleMenu() {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index 61f918ad96c..98a8580252d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -10,7 +10,7 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
-        Sort <ChevronDownIcon />
+        Sort <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
@@ -42,18 +42,17 @@ export default function ExampleMenu() {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
index ca35c37bf1a..5f74f7bb7ad 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
@@ -111,7 +111,7 @@
   user-select: none;
   padding-block: 0.5rem;
   padding-left: 1rem;
-  padding-right: 2rem;
+  padding-right: 1.5rem;
   display: flex;
   font-size: 0.875rem;
   line-height: 1rem;
@@ -177,7 +177,7 @@
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  padding-right: 1rem;
+  padding-right: 0.5rem;
 }
 
 .Separator {
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx
index 545a9f6ca58..14f9bbded7e 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.tsx
@@ -7,7 +7,7 @@ export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className={styles.Button}>
-        Song <ChevronDownIcon />
+        Song <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className={styles.Positioner} sideOffset={8}>
@@ -17,7 +17,7 @@ export default function ExampleMenu() {
             <Menu.SubmenuRoot>
               <Menu.SubmenuTrigger className={styles.SubmenuTrigger}>
                 Add to Playlist
-                <ChevronRightIcon />
+                <CaretRightIcon />
               </Menu.SubmenuTrigger>
               <Menu.Portal>
                 <Menu.Positioner
@@ -53,34 +53,32 @@ function getOffset({ side }: { side: Menu.Positioner.Props['side'] }) {
   return side === 'top' || side === 'bottom' ? 4 : -4;
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
 
-function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
+function CaretRightIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M6 12V4l4.5 4z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
index fd1cbabeb44..fa4e6816293 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/tailwind/index.tsx
@@ -5,15 +5,15 @@ import { Menu } from '@base-ui/react/menu';
 const popupClass =
   'relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
 const itemClass =
-  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 data-disabled:text-neutral-500 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white dark:data-disabled:text-neutral-400";
+  "flex cursor-default py-2 pr-6 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 data-disabled:text-neutral-500 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white dark:data-disabled:text-neutral-400";
 const submenuTriggerClass =
-  "flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 data-disabled:text-neutral-500 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white dark:data-disabled:text-neutral-400";
+  "flex cursor-default items-center justify-between gap-4 py-2 pr-2 pl-4 text-sm leading-4 outline-hidden select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 data-disabled:text-neutral-500 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white dark:data-disabled:text-neutral-400";
 
 export default function ExampleMenu() {
   return (
     <Menu.Root>
       <Menu.Trigger className="flex h-8 items-center justify-center gap-1.5 rounded-none border border-neutral-950 bg-white pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
-        Song <ChevronDownIcon />
+        Song <CaretDownIcon />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
@@ -22,7 +22,7 @@ export default function ExampleMenu() {
 
             <Menu.SubmenuRoot>
               <Menu.SubmenuTrigger className={submenuTriggerClass}>
-                Add to Playlist <ChevronRightIcon />
+                Add to Playlist <CaretRightIcon />
               </Menu.SubmenuTrigger>
               <Menu.Portal>
                 <Menu.Positioner
@@ -62,34 +62,32 @@ function getOffset({ side }: { side: Menu.Positioner.Props['side'] }) {
   return side === 'top' || side === 'bottom' ? 4 : -4;
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
 
-function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
+function CaretRightIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M6 12V4l4.5 4z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
index 6da92b0f5ec..e91b9a0a107 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
@@ -103,7 +103,8 @@
   }
 }
 
-.MenuItem {
+.MenuItem,
+.SubmenuTrigger {
   outline: 0;
   cursor: default;
   user-select: none;
@@ -167,6 +168,10 @@
   }
 }
 
+.SubmenuTrigger {
+  padding-right: 0.5rem;
+}
+
 .MenuSeparator {
   margin: 0.25rem;
   height: 1px;
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
index ff2a20bd9ca..421a8624e49 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.tsx
@@ -23,9 +23,9 @@ export default function ExampleMenubar() {
               </Menu.Item>
 
               <Menu.SubmenuRoot>
-                <Menu.SubmenuTrigger className={styles.MenuItem}>
+                <Menu.SubmenuTrigger className={styles.SubmenuTrigger}>
                   Export
-                  <ChevronRightIcon />
+                  <CaretRightIcon />
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
                   <Menu.Positioner
@@ -91,7 +91,7 @@ export default function ExampleMenubar() {
               <Menu.SubmenuRoot>
                 <Menu.SubmenuTrigger className={styles.MenuItem}>
                   Layout
-                  <ChevronRightIcon />
+                  <CaretRightIcon />
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
                   <Menu.Positioner
@@ -135,18 +135,17 @@ function handleClick(event: React.MouseEvent<HTMLElement>) {
   console.log(`${event.currentTarget.textContent} clicked`);
 }
 
-function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
+function CaretRightIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M6 12V4l4.5 4z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
index 33582caa0ca..f6a6d28796f 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/tailwind/index.tsx
@@ -33,9 +33,9 @@ export default function ExampleMenubar() {
               </Menu.Item>
 
               <Menu.SubmenuRoot>
-                <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white">
+                <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-2 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white">
                   Export
-                  <ChevronRightIcon />
+                  <CaretRightIcon />
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
                   <Menu.Positioner className="outline-none" sideOffset={-4} alignOffset={-4}>
@@ -126,9 +126,9 @@ export default function ExampleMenubar() {
               </Menu.Item>
 
               <Menu.SubmenuRoot>
-                <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-4 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white">
+                <Menu.SubmenuTrigger className="flex cursor-default items-center justify-between gap-4 py-2 pr-2 pl-4 text-sm leading-4 font-normal outline-none select-none 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:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white">
                   Layout
-                  <ChevronRightIcon />
+                  <CaretRightIcon />
                 </Menu.SubmenuTrigger>
                 <Menu.Portal>
                   <Menu.Positioner className="outline-none" sideOffset={-4} alignOffset={-4}>
@@ -182,18 +182,17 @@ function handleClick(event: React.MouseEvent<HTMLElement>) {
   console.log(`${event.currentTarget.textContent} clicked`);
 }
 
-function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
+function CaretRightIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M6 12V4l4.5 4z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx
index 64ced0a8d1f..42310c79a60 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.tsx
@@ -10,7 +10,7 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={styles.Trigger}>
             Overview
             <NavigationMenu.Icon className={styles.Icon}>
-              <ChevronDownIcon />
+              <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
           <NavigationMenu.Content className={styles.Content}>
@@ -31,7 +31,7 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={styles.Trigger}>
             Handbook
             <NavigationMenu.Icon className={styles.Icon}>
-              <ChevronDownIcon />
+              <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
           <NavigationMenu.Content className={styles.Content}>
@@ -86,18 +86,17 @@ function Link(props: NavigationMenu.Link.Props) {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
index 6d69871211b..741c0672189 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={triggerClassName}>
             Overview
             <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
-              <ChevronDownIcon />
+              <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
@@ -33,7 +33,7 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={triggerClassName}>
             Handbook
             <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
-              <ChevronDownIcon />
+              <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
@@ -95,18 +95,17 @@ function Link(props: NavigationMenu.Link.Props) {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx
index ec63c9b6ba1..74efc4f078b 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.tsx
@@ -15,7 +15,7 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={styles.Trigger}>
             Product
             <NavigationMenu.Icon className={styles.Icon}>
-              <ChevronDownIcon />
+              <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
           <NavigationMenu.Content className={`${styles.Content} ${styles.ProductContent}`}>
@@ -62,7 +62,7 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={styles.Trigger}>
             Learn
             <NavigationMenu.Icon className={styles.Icon}>
-              <ChevronDownIcon />
+              <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
           <NavigationMenu.Content className={`${styles.Content} ${styles.GuidesContent}`}>
@@ -129,18 +129,17 @@ function Link(props: NavigationMenu.Link.Props) {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
index 14560f7c764..b615ee6f183 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={triggerClassName}>
             Product
             <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
-              <ChevronDownIcon />
+              <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
@@ -69,7 +69,7 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={triggerClassName}>
             Learn
             <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
-              <ChevronDownIcon />
+              <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
@@ -145,18 +145,17 @@ function Link(props: NavigationMenu.Link.Props) {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx
index 3306cc4d9c0..3bf24c7f646 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.tsx
@@ -10,7 +10,7 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={styles.Trigger}>
             Overview
             <NavigationMenu.Icon className={styles.Icon}>
-              <ChevronDownIcon />
+              <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
           <NavigationMenu.Content className={styles.Content}>
@@ -31,7 +31,7 @@ export default function ExampleNavigationMenu() {
                         <span className={styles.LinkTitle}>Handbook</span>
                         <p className={styles.LinkDescription}>How to use Base UI effectively.</p>
                         <NavigationMenu.Icon className={styles.NestedIcon}>
-                          <ChevronRightIcon />
+                          <CaretRightIcon />
                         </NavigationMenu.Icon>
                       </NavigationMenu.Trigger>
                       <NavigationMenu.Content className={styles.Content}>
@@ -99,34 +99,32 @@ function Link(props: NavigationMenu.Link.Props) {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
 
-function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
+function CaretRightIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="10"
-      height="10"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M3.5 1L7.5 5L3.5 9" stroke="currentColor" strokeWidth="1" />
+      <path d="M6 12V4l4.5 4z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
index c156b72f8cc..8926ca5c622 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
@@ -9,7 +9,7 @@ export default function ExampleNavigationMenu() {
           <NavigationMenu.Trigger className={triggerClassName}>
             Overview
             <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
-              <ChevronDownIcon />
+              <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
 
@@ -34,7 +34,7 @@ export default function ExampleNavigationMenu() {
                         How to use Base UI effectively.
                       </p>
                       <NavigationMenu.Icon className="absolute top-1/2 right-2.5 flex -translate-y-1/2 items-center justify-center transition-transform duration-200 ease-in-out data-popup-open:rotate-180">
-                        <ChevronRightIcon />
+                        <CaretRightIcon />
                       </NavigationMenu.Icon>
                     </NavigationMenu.Trigger>
                     <NavigationMenu.Content className={contentClassName}>
@@ -113,34 +113,32 @@ function Link(props: NavigationMenu.Link.Props) {
   );
 }
 
-function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
 
-function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
+function CaretRightIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="10"
-      height="10"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M3.5 1L7.5 5L3.5 9" stroke="currentColor" strokeWidth="1" />
+      <path d="M6 12V4l4.5 4z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
index 7fd30ae848f..a4fca4f9385 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
@@ -127,18 +127,17 @@ export function ItemIndicator({ className, ...props }: Combobox.ItemIndicator.Pr
   return <Combobox.ItemIndicator className={clsx('col-start-1', className)} {...props} />;
 }
 
-export function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+export function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 10 10"
-      fill="none"
-      strokeWidth="1"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" vectorEffect="non-scaling-stroke" />
+      <path d="M12 6H4l4 4.5z" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
index 591128f72a7..8c4dc627359 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
@@ -51,7 +51,7 @@ function ExampleForm() {
               <div className="absolute right-0 bottom-0 inline-flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
                 <Combobox.Clear />
                 <Combobox.Trigger>
-                  <Combobox.ChevronDownIcon />
+                  <Combobox.CaretDownIcon />
                 </Combobox.Trigger>
               </div>
             </Combobox.InputGroup>
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
index c26b1e0587f..640ac27a6d5 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
@@ -101,7 +101,7 @@ function ReactHookForm() {
                   <div className="absolute right-0 bottom-0 inline-flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
                     <Combobox.Clear />
                     <Combobox.Trigger>
-                      <Combobox.ChevronDownIcon />
+                      <Combobox.CaretDownIcon />
                     </Combobox.Trigger>
                   </div>
                 </Combobox.InputGroup>
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
index 40061473163..7c9c1948084 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
@@ -136,7 +136,7 @@ function TanstackForm() {
                     <div className="absolute right-0 bottom-0 inline-flex h-full items-center justify-center text-neutral-500 dark:text-neutral-400">
                       <Combobox.Clear />
                       <Combobox.Trigger>
-                        <Combobox.ChevronDownIcon />
+                        <Combobox.CaretDownIcon />
                       </Combobox.Trigger>
                     </div>
                   </Combobox.InputGroup>

From a95b996269dc2127f3abeff907cd934df127cab5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 14 May 2026 23:24:17 +0200
Subject: [PATCH 198/257] New ellipsis horizontal icon

---
 .../css-modules/index.tsx                     | 20 +++++++++----------
 .../tailwind/index.tsx                        | 20 +++++++++----------
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx
index cd19aa03c21..13807b4910a 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/css-modules/index.tsx
@@ -9,7 +9,7 @@ export default function MenuDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
       <Menu.Trigger className={styles.IconButton} handle={demoMenu} aria-label="Project actions">
-        <DotsIcon />
+        <EllipsisHorizontalIcon />
       </Menu.Trigger>
 
       <Menu.Root handle={demoMenu}>
@@ -30,21 +30,19 @@ export default function MenuDetachedTriggersSimpleDemo() {
   );
 }
 
-function DotsIcon(props: React.ComponentProps<'svg'>) {
+function EllipsisHorizontalIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1}
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <circle cx="5" cy="12" r="1" fill="currentColor" vectorEffect="non-scaling-stroke" />
-      <circle cx="12" cy="12" r="1" fill="currentColor" vectorEffect="non-scaling-stroke" />
-      <circle cx="19" cy="12" r="1" fill="currentColor" vectorEffect="non-scaling-stroke" />
+      <circle cx="3" cy="8" r="1" />
+      <circle cx="8" cy="8" r="1" />
+      <circle cx="13" cy="8" r="1" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
index d4e205c107a..45416ca6a13 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/detached-triggers-simple/tailwind/index.tsx
@@ -16,7 +16,7 @@ export default function MenuDetachedTriggersSimpleDemo() {
         aria-label="Project actions"
         className="flex size-8 items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-popup-open:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-popup-open:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
-        <DotsIcon />
+        <EllipsisHorizontalIcon />
       </Menu.Trigger>
 
       <Menu.Root handle={demoMenu}>
@@ -36,21 +36,19 @@ export default function MenuDetachedTriggersSimpleDemo() {
     </React.Fragment>
   );
 }
-function DotsIcon(props: React.ComponentProps<'svg'>) {
+function EllipsisHorizontalIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1}
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <circle cx="5" cy="12" r="1" fill="currentColor" vectorEffect="non-scaling-stroke" />
-      <circle cx="12" cy="12" r="1" fill="currentColor" vectorEffect="non-scaling-stroke" />
-      <circle cx="19" cy="12" r="1" fill="currentColor" vectorEffect="non-scaling-stroke" />
+      <circle cx="3" cy="8" r="1" />
+      <circle cx="8" cy="8" r="1" />
+      <circle cx="13" cy="8" r="1" />
     </svg>
   );
 }

From 184f12a75c2c49b027d771f462255bf6deee83d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 14 May 2026 23:37:46 +0200
Subject: [PATCH 199/257] New plus and minus icons

---
 .../demos/hero/css-modules/index.tsx          | 12 +++++-----
 .../accordion/demos/hero/tailwind/index.tsx   | 12 +++++-----
 .../demos/multiple/css-modules/index.tsx      | 12 +++++-----
 .../demos/multiple/tailwind/index.tsx         | 12 +++++-----
 .../demos/creatable/css-modules/index.tsx     | 12 +++++-----
 .../demos/creatable/tailwind/index.tsx        | 12 +++++-----
 .../demos/hero/css-modules/index.tsx          | 23 ++++++++++---------
 .../demos/hero/tailwind/index.tsx             | 23 ++++++++++---------
 .../forms/demos/hero/tailwind/index.tsx       | 23 ++++++++++---------
 .../demos/react-hook-form/tailwind/index.tsx  | 23 ++++++++++---------
 .../demos/tanstack-form/tailwind/index.tsx    | 23 ++++++++++---------
 11 files changed, 96 insertions(+), 91 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/accordion/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/hero/css-modules/index.tsx
index ceee92a6dfa..0e395d9e9fd 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/hero/css-modules/index.tsx
@@ -53,17 +53,17 @@ export default function ExampleAccordion() {
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
-      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
index a8908ae47f6..88c590f5cce 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/hero/tailwind/index.tsx
@@ -52,17 +52,17 @@ export default function ExampleAccordion() {
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
-      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/multiple/css-modules/index.tsx
index 5c2b5a22ec3..e279fd7f9bb 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/multiple/css-modules/index.tsx
@@ -53,17 +53,17 @@ export default function ExampleAccordion() {
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
-      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
index ceba9049096..0c2dc4752dc 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/accordion/demos/multiple/tailwind/index.tsx
@@ -55,17 +55,17 @@ export default function ExampleAccordion() {
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
-      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
index d6cbb49f5cb..6126d65e08f 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
@@ -239,17 +239,17 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
-      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
index 351f2a766a3..8234a44e8f2 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
@@ -259,17 +259,17 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
-      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx
index 6818f8814b2..17f1ead44ef 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx
@@ -47,17 +47,17 @@ function CursorGrowIcon(props: React.ComponentProps<'svg'>) {
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
-      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
@@ -65,16 +65,17 @@ function PlusIcon(props: React.ComponentProps<'svg'>) {
 function MinusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M2.5 8h11" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
index 007043178aa..699d91e1273 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
@@ -52,17 +52,17 @@ function CursorGrowIcon(props: React.ComponentProps<'svg'>) {
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
-      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
@@ -70,16 +70,17 @@ function PlusIcon(props: React.ComponentProps<'svg'>) {
 function MinusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M2.5 8h11" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
index 8c4dc627359..e695bf7765c 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
@@ -295,17 +295,17 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
-      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
@@ -313,16 +313,17 @@ function PlusIcon(props: React.ComponentProps<'svg'>) {
 function MinusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M2.5 8h11" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
index 640ac27a6d5..0085de40281 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
@@ -449,17 +449,17 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
-      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
@@ -467,16 +467,17 @@ function PlusIcon(props: React.ComponentProps<'svg'>) {
 function MinusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M2.5 8h11" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
index 7c9c1948084..2b21a758edf 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
@@ -521,17 +521,17 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
-      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
@@ -539,16 +539,17 @@ function PlusIcon(props: React.ComponentProps<'svg'>) {
 function MinusIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+      <path d="M2.5 8h11" />
     </svg>
   );
 }

From f188c100d06d739c515e5e82e1f34d81fb1e36cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Thu, 14 May 2026 23:52:10 +0200
Subject: [PATCH 200/257] New check icon

---
 .../demos/hero/css-modules/index.tsx          | 11 ++++----
 .../demos/hero/tailwind/index.tsx             | 11 ++++----
 .../demos/nested/css-modules/index.tsx        | 11 ++++----
 .../demos/parent/css-modules/index.tsx        | 11 ++++----
 .../checkbox/demos/hero/css-modules/index.tsx | 11 ++++----
 .../checkbox/demos/hero/tailwind/index.tsx    | 11 ++++----
 .../async-multiple/css-modules/index.tsx      | 11 ++++----
 .../demos/async-multiple/tailwind/index.tsx   | 11 ++++----
 .../demos/async-single/css-modules/index.tsx  | 11 ++++----
 .../demos/async-single/tailwind/index.tsx     | 11 ++++----
 .../demos/creatable/css-modules/index.tsx     | 11 ++++----
 .../demos/creatable/tailwind/index.tsx        | 11 ++++----
 .../demos/grouped/css-modules/index.tsx       | 11 ++++----
 .../combobox/demos/grouped/tailwind/index.tsx | 11 ++++----
 .../combobox/demos/hero/css-modules/index.tsx | 11 ++++----
 .../combobox/demos/hero/tailwind/index.tsx    | 11 ++++----
 .../input-inside-popup/css-modules/index.tsx  | 11 ++++----
 .../input-inside-popup/tailwind/index.tsx     | 11 ++++----
 .../demos/multiple/css-modules/index.tsx      | 11 ++++----
 .../demos/multiple/tailwind/index.tsx         | 11 ++++----
 .../demos/virtualized/css-modules/index.tsx   | 11 ++++----
 .../demos/virtualized/tailwind/index.tsx      | 11 ++++----
 .../checkbox-items/css-modules/index.tsx      | 19 +++++++-------
 .../demos/checkbox-items/tailwind/index.tsx   | 19 +++++++-------
 .../demos/group-labels/css-modules/index.tsx  | 25 ++++++++++---------
 .../demos/group-labels/tailwind/index.tsx     | 25 ++++++++++---------
 .../demos/radio-items/css-modules/index.tsx   | 11 ++++----
 .../menu/demos/radio-items/tailwind/index.tsx | 11 ++++----
 .../demos/grouped/css-modules/index.tsx       | 11 ++++----
 .../select/demos/grouped/tailwind/index.tsx   | 11 ++++----
 .../select/demos/hero/css-modules/index.tsx   | 11 ++++----
 .../select/demos/hero/tailwind/index.tsx      | 11 ++++----
 .../demos/multiple/css-modules/index.tsx      | 11 ++++----
 .../select/demos/multiple/tailwind/index.tsx  | 11 ++++----
 .../demos/object-values/css-modules/index.tsx | 11 ++++----
 .../demos/object-values/tailwind/index.tsx    | 11 ++++----
 .../demos/anchored/css-modules/index.tsx      | 11 ++++----
 .../toast/demos/anchored/tailwind/index.tsx   | 11 ++++----
 .../toolbar/demos/hero/css-modules/index.tsx  | 11 ++++----
 .../toolbar/demos/hero/tailwind/index.tsx     | 11 ++++----
 .../css-modules/index.tsx                     | 11 ++++----
 .../forms/demos/hero/tailwind/index.tsx       | 11 ++++----
 .../demos/react-hook-form/tailwind/index.tsx  | 11 ++++----
 .../demos/tanstack-form/tailwind/index.tsx    | 11 ++++----
 44 files changed, 286 insertions(+), 242 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
index a2870c2b965..78fc64943e5 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
@@ -49,16 +49,17 @@ export default function ExampleCheckboxGroup() {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
index bb855794a29..727a6a23a0d 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
@@ -60,16 +60,17 @@ export default function ExampleCheckboxGroup() {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
index 05fb3692be7..7deea2fc424 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
@@ -137,16 +137,17 @@ export default function PermissionsForm() {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
index e63e5ac2c29..305b0bee1c4 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
@@ -64,16 +64,17 @@ export default function ExampleCheckboxGroup() {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
index c275c20a76a..5dd29fd9388 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
@@ -18,16 +18,17 @@ export default function ExampleCheckbox() {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
index e82e5f93d96..ac8fd5e641d 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
@@ -20,16 +20,17 @@ export default function ExampleCheckbox() {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
index 3e122df25d0..6569dcd6aef 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
@@ -202,16 +202,17 @@ export default function ExampleAsyncMultipleCombobox() {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index 1a08da9f1cd..072a30ebf20 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -226,16 +226,17 @@ export default function ExampleAsyncMultipleCombobox() {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
index b3b8ee9b364..e8f7c5270c7 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
@@ -163,16 +163,17 @@ export default function ExampleAsyncSingleCombobox() {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index b78921c6d21..f9af091bd27 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -189,16 +189,17 @@ export default function ExampleAsyncSingleCombobox() {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
index 6126d65e08f..876a7596dea 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
@@ -222,16 +222,17 @@ export default function ExampleCreatableCombobox() {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
index 8234a44e8f2..7a1ab101f0a 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
@@ -242,16 +242,17 @@ export default function ExampleCreatableCombobox() {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
index b8430c2bd43..ade2f5025e7 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
@@ -57,16 +57,17 @@ export default function ExampleGroupedCombobox() {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index a6ae860dd11..772b709111e 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -72,16 +72,17 @@ export default function ExampleGroupedCombobox() {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
index ac97be5ae1f..7f5b166994d 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
@@ -48,16 +48,17 @@ export default function ExampleCombobox() {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
index 52414ffbb43..62702e9ea9e 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
@@ -63,16 +63,17 @@ export default function ExampleCombobox() {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
index 75af7e11cf1..6d4a41f8e03 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
@@ -59,16 +59,17 @@ function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index 9ee045314c1..27b788b9449 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -72,16 +72,17 @@ function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
index 8ab8ba8d4a1..0e20e4b9ee8 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
@@ -70,16 +70,17 @@ export default function ExampleMultipleCombobox() {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
index 1e36512d1bc..4349e52f261 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
@@ -78,16 +78,17 @@ export default function ExampleMultipleCombobox() {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
index 36ade052151..e53af2e8968 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
@@ -141,16 +141,17 @@ function VirtualizedList({
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
index b0a2ca3fa78..298f911ddd9 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
@@ -144,16 +144,17 @@ function VirtualizedList({
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
index b3244ae9fac..577f65e3a48 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
@@ -22,7 +22,7 @@ export default function ExampleMenu() {
               className={styles.CheckboxItem}
             >
               <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                <CheckboxCheckIcon />
+                <CheckIcon />
               </Menu.CheckboxItemIndicator>
               <span className={styles.CheckboxItemText}>Minimap</span>
             </Menu.CheckboxItem>
@@ -32,7 +32,7 @@ export default function ExampleMenu() {
               className={styles.CheckboxItem}
             >
               <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                <CheckboxCheckIcon />
+                <CheckIcon />
               </Menu.CheckboxItemIndicator>
               <span className={styles.CheckboxItemText}>Search</span>
             </Menu.CheckboxItem>
@@ -42,7 +42,7 @@ export default function ExampleMenu() {
               className={styles.CheckboxItem}
             >
               <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                <CheckboxCheckIcon />
+                <CheckIcon />
               </Menu.CheckboxItemIndicator>
               <span className={styles.CheckboxItemText}>Sidebar</span>
             </Menu.CheckboxItem>
@@ -68,19 +68,20 @@ function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   );
 }
 
-function CheckboxCheckIcon(props: React.ComponentProps<'svg'>) {
+function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index a6eb62be6fb..38d34b26818 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleMenu() {
               className={checkboxItemClass}
             >
               <Menu.CheckboxItemIndicator className="col-start-1">
-                <CheckboxCheckIcon />
+                <CheckIcon />
               </Menu.CheckboxItemIndicator>
               <span className="col-start-2">Minimap</span>
             </Menu.CheckboxItem>
@@ -34,7 +34,7 @@ export default function ExampleMenu() {
               className={checkboxItemClass}
             >
               <Menu.CheckboxItemIndicator className="col-start-1">
-                <CheckboxCheckIcon />
+                <CheckIcon />
               </Menu.CheckboxItemIndicator>
               <span className="col-start-2">Search</span>
             </Menu.CheckboxItem>
@@ -44,7 +44,7 @@ export default function ExampleMenu() {
               className={checkboxItemClass}
             >
               <Menu.CheckboxItemIndicator className="col-start-1">
-                <CheckboxCheckIcon />
+                <CheckIcon />
               </Menu.CheckboxItemIndicator>
               <span className="col-start-2">Sidebar</span>
             </Menu.CheckboxItem>
@@ -70,19 +70,20 @@ function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   );
 }
 
-function CheckboxCheckIcon(props: React.ComponentProps<'svg'>) {
+function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
index b0727175d9d..8cc19e489bf 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
@@ -22,19 +22,19 @@ export default function ExampleMenu() {
               <Menu.RadioGroup value={value} onValueChange={setValue}>
                 <Menu.RadioItem className={styles.RadioItem} value="date">
                   <Menu.RadioItemIndicator className={styles.RadioItemIndicator}>
-                    <CheckboxCheckIcon />
+                    <CheckIcon />
                   </Menu.RadioItemIndicator>
                   <span className={styles.RadioItemText}>Date</span>
                 </Menu.RadioItem>
                 <Menu.RadioItem className={styles.RadioItem} value="name">
                   <Menu.RadioItemIndicator className={styles.RadioItemIndicator}>
-                    <CheckboxCheckIcon />
+                    <CheckIcon />
                   </Menu.RadioItemIndicator>
                   <span className={styles.RadioItemText}>Name</span>
                 </Menu.RadioItem>
                 <Menu.RadioItem className={styles.RadioItem} value="type">
                   <Menu.RadioItemIndicator className={styles.RadioItemIndicator}>
-                    <CheckboxCheckIcon />
+                    <CheckIcon />
                   </Menu.RadioItemIndicator>
                   <span className={styles.RadioItemText}>Type</span>
                 </Menu.RadioItem>
@@ -51,7 +51,7 @@ export default function ExampleMenu() {
                 className={styles.CheckboxItem}
               >
                 <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                  <CheckboxCheckIcon />
+                  <CheckIcon />
                 </Menu.CheckboxItemIndicator>
                 <span className={styles.CheckboxItemText}>Minimap</span>
               </Menu.CheckboxItem>
@@ -61,7 +61,7 @@ export default function ExampleMenu() {
                 className={styles.CheckboxItem}
               >
                 <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                  <CheckboxCheckIcon />
+                  <CheckIcon />
                 </Menu.CheckboxItemIndicator>
                 <span className={styles.CheckboxItemText}>Search</span>
               </Menu.CheckboxItem>
@@ -71,7 +71,7 @@ export default function ExampleMenu() {
                 className={styles.CheckboxItem}
               >
                 <Menu.CheckboxItemIndicator className={styles.CheckboxItemIndicator}>
-                  <CheckboxCheckIcon />
+                  <CheckIcon />
                 </Menu.CheckboxItemIndicator>
                 <span className={styles.CheckboxItemText}>Sidebar</span>
               </Menu.CheckboxItem>
@@ -98,19 +98,20 @@ function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   );
 }
 
-function CheckboxCheckIcon(props: React.ComponentProps<'svg'>) {
+function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index 307519ae271..09dc174654a 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -26,19 +26,19 @@ export default function ExampleMenu() {
               <Menu.RadioGroup value={value} onValueChange={setValue}>
                 <Menu.RadioItem value="date" className={itemClass}>
                   <Menu.RadioItemIndicator className="col-start-1">
-                    <CheckboxCheckIcon />
+                    <CheckIcon />
                   </Menu.RadioItemIndicator>
                   <span className="col-start-2">Date</span>
                 </Menu.RadioItem>
                 <Menu.RadioItem value="name" className={itemClass}>
                   <Menu.RadioItemIndicator className="col-start-1">
-                    <CheckboxCheckIcon />
+                    <CheckIcon />
                   </Menu.RadioItemIndicator>
                   <span className="col-start-2">Name</span>
                 </Menu.RadioItem>
                 <Menu.RadioItem value="type" className={itemClass}>
                   <Menu.RadioItemIndicator className="col-start-1">
-                    <CheckboxCheckIcon />
+                    <CheckIcon />
                   </Menu.RadioItemIndicator>
                   <span className="col-start-2">Type</span>
                 </Menu.RadioItem>
@@ -57,7 +57,7 @@ export default function ExampleMenu() {
                 className={itemClass}
               >
                 <Menu.CheckboxItemIndicator className="col-start-1">
-                  <CheckboxCheckIcon />
+                  <CheckIcon />
                 </Menu.CheckboxItemIndicator>
                 <span className="col-start-2">Minimap</span>
               </Menu.CheckboxItem>
@@ -67,7 +67,7 @@ export default function ExampleMenu() {
                 className={itemClass}
               >
                 <Menu.CheckboxItemIndicator className="col-start-1">
-                  <CheckboxCheckIcon />
+                  <CheckIcon />
                 </Menu.CheckboxItemIndicator>
                 <span className="col-start-2">Search</span>
               </Menu.CheckboxItem>
@@ -77,7 +77,7 @@ export default function ExampleMenu() {
                 className={itemClass}
               >
                 <Menu.CheckboxItemIndicator className="col-start-1">
-                  <CheckboxCheckIcon />
+                  <CheckIcon />
                 </Menu.CheckboxItemIndicator>
                 <span className="col-start-2">Sidebar</span>
               </Menu.CheckboxItem>
@@ -104,19 +104,20 @@ function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   );
 }
 
-function CheckboxCheckIcon(props: React.ComponentProps<'svg'>) {
+function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
index 5d580aae8bf..14e98e6d860 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
@@ -58,16 +58,17 @@ function CaretDownIcon(props: React.ComponentProps<'svg'>) {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index 98a8580252d..1f68ca3926d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -60,16 +60,17 @@ function CaretDownIcon(props: React.ComponentProps<'svg'>) {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
index 3a44bc55d3e..aee38bd779f 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
@@ -71,16 +71,17 @@ function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index 03ad0cd08f4..0942dfcecb7 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -83,16 +83,17 @@ function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
index a119e82d5be..85882602e77 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
@@ -62,16 +62,17 @@ function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index a6841e6200a..d4028c7062a 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -74,16 +74,17 @@ function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
index fa479be7246..c85f1322c0b 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
@@ -82,16 +82,17 @@ function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index ec9ff85320a..afff17f4f9f 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -89,16 +89,17 @@ function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
index 3ea5c7462dd..403b9190048 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
@@ -69,16 +69,17 @@ function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index 4e837bf8698..f059eca30ec 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -78,16 +78,17 @@ function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
index 2080fd9adf9..f0297f83b4c 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
@@ -146,16 +146,17 @@ function ClipboardIcon(props: React.ComponentProps<'svg'>) {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index dad908088a8..de2be3f963a 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -162,16 +162,17 @@ function ClipboardIcon(props: React.ComponentProps<'svg'>) {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
index a2b3a7d5e33..9af1dab49c0 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
@@ -88,16 +88,17 @@ function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
index 3a277b98566..754a6e4937a 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
@@ -105,16 +105,17 @@ function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
index 9bddc2ccb22..5f5998a2cbe 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
@@ -93,16 +93,17 @@ function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
index e695bf7765c..9803c314d61 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
@@ -278,16 +278,17 @@ function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
index 0085de40281..5e2cf1f363c 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
@@ -432,16 +432,17 @@ function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
index 2b21a758edf..ca949a9241c 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
@@ -504,16 +504,17 @@ function CaretUpDownIcon(props: React.ComponentProps<'svg'>) {
 function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M20 6 9 17l-5-5" vectorEffect="non-scaling-stroke" />
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }

From 1d2d19d7dc442c427b468acc00c11ca11380515b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 00:01:58 +0200
Subject: [PATCH 201/257] Select: new caret up/down icons for arrows

---
 .../demos/grouped/css-modules/index.tsx       | 38 ++++++++++++++++++-
 .../select/demos/grouped/tailwind/index.tsx   | 34 ++++++++++++++++-
 .../select/demos/hero/css-modules/index.tsx   | 38 ++++++++++++++++++-
 .../select/demos/hero/tailwind/index.tsx      | 34 ++++++++++++++++-
 .../demos/object-values/css-modules/index.tsx | 38 ++++++++++++++++++-
 .../demos/object-values/tailwind/index.tsx    | 34 ++++++++++++++++-
 6 files changed, 204 insertions(+), 12 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
index aee38bd779f..26513808cbe 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
@@ -19,7 +19,9 @@ export default function ExampleSelectGrouped() {
         <Select.Portal>
           <Select.Positioner className={styles.Positioner} sideOffset={8}>
             <Select.Popup className={styles.Popup}>
-              <Select.ScrollUpArrow className={styles.ScrollArrow}>⏶</Select.ScrollUpArrow>
+              <Select.ScrollUpArrow className={styles.ScrollArrow}>
+                <CaretUpIcon />
+              </Select.ScrollUpArrow>
               <Select.List className={styles.List}>
                 {groupedProduce.map((group, index) => (
                   <React.Fragment key={group.value}>
@@ -44,7 +46,9 @@ export default function ExampleSelectGrouped() {
                   </React.Fragment>
                 ))}
               </Select.List>
-              <Select.ScrollDownArrow className={styles.ScrollArrow}>⏷</Select.ScrollDownArrow>
+              <Select.ScrollDownArrow className={styles.ScrollArrow}>
+                <CaretDownIcon />
+              </Select.ScrollDownArrow>
             </Select.Popup>
           </Select.Positioner>
         </Select.Portal>
@@ -114,3 +118,33 @@ const groupedProduce = [
     ],
   },
 ];
+
+function CaretUpIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 10H4l4-4.5z" />
+    </svg>
+  );
+}
+
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index 0942dfcecb7..aa68f5ac3fe 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -26,7 +26,7 @@ export default function ExampleSelectGrouped() {
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
             <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1.5rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[2] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
-                ⏶
+                <CaretUpIcon />
               </Select.ScrollUpArrow>
               <Select.List className="relative py-1 scroll-pt-6 scroll-pb-6 overflow-y-auto max-h-[var(--available-height)]">
                 {groupedProduce.map((group, index) => (
@@ -55,7 +55,7 @@ export default function ExampleSelectGrouped() {
                 ))}
               </Select.List>
               <Select.ScrollDownArrow className="bottom-0 z-[2] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:bottom-[-100%] dark:bg-neutral-950">
-                ⏷
+                <CaretDownIcon />
               </Select.ScrollDownArrow>
             </Select.Popup>
           </Select.Positioner>
@@ -126,3 +126,33 @@ const groupedProduce = [
     ],
   },
 ];
+
+function CaretUpIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 10H4l4-4.5z" />
+    </svg>
+  );
+}
+
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
index 85882602e77..1f7813dfd6c 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
@@ -24,7 +24,9 @@ export default function ExampleSelect() {
         <Select.Portal>
           <Select.Positioner className={styles.Positioner} sideOffset={8}>
             <Select.Popup className={styles.Popup}>
-              <Select.ScrollUpArrow className={styles.ScrollArrow}>⏶</Select.ScrollUpArrow>
+              <Select.ScrollUpArrow className={styles.ScrollArrow}>
+                <CaretUpIcon />
+              </Select.ScrollUpArrow>
               <Select.List className={styles.List}>
                 {apples.map(({ label, value }) => (
                   <Select.Item key={label} value={value} className={styles.Item}>
@@ -35,7 +37,9 @@ export default function ExampleSelect() {
                   </Select.Item>
                 ))}
               </Select.List>
-              <Select.ScrollDownArrow className={styles.ScrollArrow}>⏷</Select.ScrollDownArrow>
+              <Select.ScrollDownArrow className={styles.ScrollArrow}>
+                <CaretDownIcon />
+              </Select.ScrollDownArrow>
             </Select.Popup>
           </Select.Positioner>
         </Select.Portal>
@@ -76,3 +80,33 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
     </svg>
   );
 }
+
+function CaretUpIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 10H4l4-4.5z" />
+    </svg>
+  );
+}
+
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index d4028c7062a..dd928eac8cc 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -29,7 +29,7 @@ export default function ExampleSelect() {
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
             <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1.5rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
-                ⏶
+                <CaretUpIcon />
               </Select.ScrollUpArrow>
               <Select.List className="relative py-1 scroll-py-6 overflow-y-auto max-h-[var(--available-height)]">
                 {apples.map(({ label, value }) => (
@@ -46,7 +46,7 @@ export default function ExampleSelect() {
                 ))}
               </Select.List>
               <Select.ScrollDownArrow className="bottom-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:bottom-[-100%] dark:bg-neutral-950">
-                ⏷
+                <CaretDownIcon />
               </Select.ScrollDownArrow>
             </Select.Popup>
           </Select.Positioner>
@@ -88,3 +88,33 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
     </svg>
   );
 }
+
+function CaretUpIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 10H4l4-4.5z" />
+    </svg>
+  );
+}
+
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
index 403b9190048..c2f7abb0cf7 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
@@ -26,7 +26,9 @@ export default function ObjectValueSelect() {
         <Select.Portal>
           <Select.Positioner className={styles.Positioner} sideOffset={8}>
             <Select.Popup className={styles.Popup}>
-              <Select.ScrollUpArrow className={styles.ScrollArrow}>⏶</Select.ScrollUpArrow>
+              <Select.ScrollUpArrow className={styles.ScrollArrow}>
+                <CaretUpIcon />
+              </Select.ScrollUpArrow>
               <Select.List className={styles.List}>
                 {shippingMethods.map((method) => (
                   <Select.Item key={method.id} value={method} className={styles.Item}>
@@ -42,7 +44,9 @@ export default function ObjectValueSelect() {
                   </Select.Item>
                 ))}
               </Select.List>
-              <Select.ScrollDownArrow className={styles.ScrollArrow}>⏷</Select.ScrollDownArrow>
+              <Select.ScrollDownArrow className={styles.ScrollArrow}>
+                <CaretDownIcon />
+              </Select.ScrollDownArrow>
             </Select.Popup>
           </Select.Positioner>
         </Select.Portal>
@@ -111,3 +115,33 @@ const shippingMethods: ShippingMethod[] = [
     price: '$19.99',
   },
 ];
+
+function CaretUpIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 10H4l4-4.5z" />
+    </svg>
+  );
+}
+
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index f059eca30ec..28e7afc0675 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -28,7 +28,7 @@ export default function ObjectValueSelect() {
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
             <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1.5rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
-                ⏶
+                <CaretUpIcon />
               </Select.ScrollUpArrow>
               <Select.List className="relative py-1 scroll-py-6 overflow-y-auto max-h-[var(--available-height)]">
                 {shippingMethods.map((method) => (
@@ -50,7 +50,7 @@ export default function ObjectValueSelect() {
                 ))}
               </Select.List>
               <Select.ScrollDownArrow className="bottom-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute before:left-0 before:h-full before:w-full before:content-[''] data-[side=none]:before:bottom-[-100%] dark:bg-neutral-950">
-                ⏷
+                <CaretDownIcon />
               </Select.ScrollDownArrow>
             </Select.Popup>
           </Select.Positioner>
@@ -120,3 +120,33 @@ const shippingMethods: ShippingMethod[] = [
     price: '$19.99',
   },
 ];
+
+function CaretUpIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 10H4l4-4.5z" />
+    </svg>
+  );
+}
+
+function CaretDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M12 6H4l4 4.5z" />
+    </svg>
+  );
+}

From 075f47c45fa3b5746b80f1fd0b19a4de0c28301f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 00:05:58 +0200
Subject: [PATCH 202/257] New heart icon

---
 .../react/components/toggle/demos/hero/css-modules/index.tsx    | 2 +-
 .../react/components/toggle/demos/hero/tailwind/index.tsx       | 2 +-
 .../demos/prevent-base-ui-handler/css-modules/index.tsx         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.tsx
index 08d6ee14328..ca6724929a7 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.tsx
@@ -57,7 +57,7 @@ function HeartOutlineIcon(props: React.ComponentProps<'svg'>) {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M7.99961 4.8232L7.24456 4.06654C6.84123 3.66235 6.18866 3.20003 5.33294 3.20003C3.86391 3.20003 2.66628 4.39767 2.66628 5.8667C2.66628 6.4079 2.91276 7.1023 3.41967 7.91383C3.91548 8.70759 4.59649 9.51244 5.31278 10.2503C6.38267 11.3525 7.47318 12.2465 7.99983 12.6605C8.52734 12.2456 9.61718 11.352 10.6864 10.2504C11.4027 9.51248 12.0837 8.70762 12.5796 7.91384C13.0865 7.1023 13.3329 6.4079 13.3329 5.8667C13.3329 4.39723 12.1354 3.20003 10.6663 3.20003C9.81056 3.20003 9.15799 3.66235 8.75466 4.06654L7.99961 4.8232ZM7.98574 3.29926C7.48264 2.79938 6.57901 2.13336 5.33294 2.13336C3.27481 2.13336 1.59961 3.80856 1.59961 5.8667C1.59961 9.1963 7.43321 13.5766 7.68121 13.7611C7.77561 13.8315 7.88761 13.8667 7.99961 13.8667C8.11161 13.8667 8.22361 13.8315 8.31801 13.7616C8.56601 13.5766 14.3996 9.1963 14.3996 5.8667C14.3996 3.80803 12.7244 2.13336 10.6663 2.13336C9.42013 2.13336 8.51645 2.79947 8.01337 3.29936C8.00877 3.30393 8.00421 3.30849 7.99967 3.31303C7.99965 3.31305 7.99963 3.31307 7.99961 3.3131C7.99502 3.3085 7.9904 3.30389 7.98574 3.29926Z"
+        d="m7.99961 4.8232-.75505-.75666c-.40333-.40419-1.0559-.86651-1.91162-.86651-1.46903 0-2.66666 1.19764-2.66666 2.66667 0 .5412.24648 1.2356.75339 2.04713.49581.79376 1.17682 1.59861 1.89311 2.33647 1.06989 1.1022 2.1604 1.9962 2.68705 2.4102.52751-.4149 1.61735-1.3085 2.68657-2.4101.7163-.73792 1.3973-1.54278 1.8932-2.33656.5069-.81154.7533-1.50594.7533-2.04714 0-1.46947-1.1975-2.66667-2.6666-2.66667-.85574 0-1.50831.46232-1.91164.86651zm-.01387-1.52394c-.5031-.49988-1.40673-1.1659-2.6528-1.1659-2.05813 0-3.73333 1.6752-3.73333 3.73334 0 3.3296 5.8336 7.7099 6.0816 7.8944a.532.532 0 0 0 .3184.1056c.112 0 .224-.0352.3184-.1051.248-.185 6.08159-4.5653 6.08159-7.8949 0-2.05867-1.6752-3.73334-3.7333-3.73334-1.24617 0-2.14985.66611-2.65293 1.166q-.0069.00686-.0137.01367c.00002-.00003-.00002.00002 0 0-.00459-.0046-.00927-.00914-.01393-.01377"
       />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
index f3ec8b9cd6a..e3a078ce533 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/tailwind/index.tsx
@@ -54,7 +54,7 @@ function HeartOutlineIcon(props: React.ComponentProps<'svg'>) {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M7.99961 4.8232L7.24456 4.06654C6.84123 3.66235 6.18866 3.20003 5.33294 3.20003C3.86391 3.20003 2.66628 4.39767 2.66628 5.8667C2.66628 6.4079 2.91276 7.1023 3.41967 7.91383C3.91548 8.70759 4.59649 9.51244 5.31278 10.2503C6.38267 11.3525 7.47318 12.2465 7.99983 12.6605C8.52734 12.2456 9.61718 11.352 10.6864 10.2504C11.4027 9.51248 12.0837 8.70762 12.5796 7.91384C13.0865 7.1023 13.3329 6.4079 13.3329 5.8667C13.3329 4.39723 12.1354 3.20003 10.6663 3.20003C9.81056 3.20003 9.15799 3.66235 8.75466 4.06654L7.99961 4.8232ZM7.98574 3.29926C7.48264 2.79938 6.57901 2.13336 5.33294 2.13336C3.27481 2.13336 1.59961 3.80856 1.59961 5.8667C1.59961 9.1963 7.43321 13.5766 7.68121 13.7611C7.77561 13.8315 7.88761 13.8667 7.99961 13.8667C8.11161 13.8667 8.22361 13.8315 8.31801 13.7616C8.56601 13.5766 14.3996 9.1963 14.3996 5.8667C14.3996 3.80803 12.7244 2.13336 10.6663 2.13336C9.42013 2.13336 8.51645 2.79947 8.01337 3.29936C8.00877 3.30393 8.00421 3.30849 7.99967 3.31303C7.99965 3.31305 7.99963 3.31307 7.99961 3.3131C7.99502 3.3085 7.9904 3.30389 7.98574 3.29926Z"
+        d="m7.99961 4.8232-.75505-.75666c-.40333-.40419-1.0559-.86651-1.91162-.86651-1.46903 0-2.66666 1.19764-2.66666 2.66667 0 .5412.24648 1.2356.75339 2.04713.49581.79376 1.17682 1.59861 1.89311 2.33647 1.06989 1.1022 2.1604 1.9962 2.68705 2.4102.52751-.4149 1.61735-1.3085 2.68657-2.4101.7163-.73792 1.3973-1.54278 1.8932-2.33656.5069-.81154.7533-1.50594.7533-2.04714 0-1.46947-1.1975-2.66667-2.6666-2.66667-.85574 0-1.50831.46232-1.91164.86651zm-.01387-1.52394c-.5031-.49988-1.40673-1.1659-2.6528-1.1659-2.05813 0-3.73333 1.6752-3.73333 3.73334 0 3.3296 5.8336 7.7099 6.0816 7.8944a.532.532 0 0 0 .3184.1056c.112 0 .224-.0352.3184-.1051.248-.185 6.08159-4.5653 6.08159-7.8949 0-2.05867-1.6752-3.73334-3.7333-3.73334-1.24617 0-2.14985.66611-2.65293 1.166q-.0069.00686-.0137.01367c.00002-.00003-.00002.00002 0 0-.00459-.0046-.00927-.00914-.01393-.01377"
       />
     </svg>
   );
diff --git a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.tsx b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.tsx
index f76f8c26b7c..36b37bdf05f 100644
--- a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.tsx
@@ -67,7 +67,7 @@ function HeartOutlineIcon(props: React.ComponentProps<'svg'>) {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M7.99961 4.8232L7.24456 4.06654C6.84123 3.66235 6.18866 3.20003 5.33294 3.20003C3.86391 3.20003 2.66628 4.39767 2.66628 5.8667C2.66628 6.4079 2.91276 7.1023 3.41967 7.91383C3.91548 8.70759 4.59649 9.51244 5.31278 10.2503C6.38267 11.3525 7.47318 12.2465 7.99983 12.6605C8.52734 12.2456 9.61718 11.352 10.6864 10.2504C11.4027 9.51248 12.0837 8.70762 12.5796 7.91384C13.0865 7.1023 13.3329 6.4079 13.3329 5.8667C13.3329 4.39723 12.1354 3.20003 10.6663 3.20003C9.81056 3.20003 9.15799 3.66235 8.75466 4.06654L7.99961 4.8232ZM7.98574 3.29926C7.48264 2.79938 6.57901 2.13336 5.33294 2.13336C3.27481 2.13336 1.59961 3.80856 1.59961 5.8667C1.59961 9.1963 7.43321 13.5766 7.68121 13.7611C7.77561 13.8315 7.88761 13.8667 7.99961 13.8667C8.11161 13.8667 8.22361 13.8315 8.31801 13.7616C8.56601 13.5766 14.3996 9.1963 14.3996 5.8667C14.3996 3.80803 12.7244 2.13336 10.6663 2.13336C9.42013 2.13336 8.51645 2.79947 8.01337 3.29936C8.00877 3.30393 8.00421 3.30849 7.99967 3.31303C7.99965 3.31305 7.99963 3.31307 7.99961 3.3131C7.99502 3.3085 7.9904 3.30389 7.98574 3.29926Z"
+        d="m7.99961 4.8232-.75505-.75666c-.40333-.40419-1.0559-.86651-1.91162-.86651-1.46903 0-2.66666 1.19764-2.66666 2.66667 0 .5412.24648 1.2356.75339 2.04713.49581.79376 1.17682 1.59861 1.89311 2.33647 1.06989 1.1022 2.1604 1.9962 2.68705 2.4102.52751-.4149 1.61735-1.3085 2.68657-2.4101.7163-.73792 1.3973-1.54278 1.8932-2.33656.5069-.81154.7533-1.50594.7533-2.04714 0-1.46947-1.1975-2.66667-2.6666-2.66667-.85574 0-1.50831.46232-1.91164.86651zm-.01387-1.52394c-.5031-.49988-1.40673-1.1659-2.6528-1.1659-2.05813 0-3.73333 1.6752-3.73333 3.73334 0 3.3296 5.8336 7.7099 6.0816 7.8944a.532.532 0 0 0 .3184.1056c.112 0 .224-.0352.3184-.1051.248-.185 6.08159-4.5653 6.08159-7.8949 0-2.05867-1.6752-3.73334-3.7333-3.73334-1.24617 0-2.14985.66611-2.65293 1.166q-.0069.00686-.0137.01367c.00002-.00003-.00002.00002 0 0-.00459-.0046-.00927-.00914-.01393-.01377"
       />
     </svg>
   );

From effd059405764b05b88a3802bfbb75f3e8dfac10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 00:25:20 +0200
Subject: [PATCH 203/257] New X icon

---
 .../demos/async-multiple/css-modules/index.tsx     |  8 ++++----
 .../demos/async-multiple/tailwind/index.tsx        |  8 ++++----
 .../demos/async-single/css-modules/index.tsx       |  8 ++++----
 .../combobox/demos/async-single/tailwind/index.tsx |  8 ++++----
 .../combobox/demos/creatable/css-modules/index.tsx |  8 ++++----
 .../combobox/demos/creatable/tailwind/index.tsx    |  8 ++++----
 .../combobox/demos/grouped/css-modules/index.tsx   |  8 ++++----
 .../combobox/demos/grouped/tailwind/index.tsx      |  8 ++++----
 .../combobox/demos/hero/css-modules/index.tsx      |  8 ++++----
 .../combobox/demos/hero/tailwind/index.tsx         |  8 ++++----
 .../combobox/demos/multiple/css-modules/index.tsx  |  8 ++++----
 .../combobox/demos/multiple/tailwind/index.tsx     |  8 ++++----
 .../demos/outside-scroll/css-modules/index.tsx     | 12 ++++++------
 .../dialog/demos/outside-scroll/tailwind/index.tsx | 12 ++++++------
 .../demos/uncontained/css-modules/index.module.css |  2 --
 .../dialog/demos/uncontained/css-modules/index.tsx | 12 ++++++------
 .../dialog/demos/uncontained/tailwind/index.tsx    | 14 +++++++-------
 .../demos/mobile-nav/css-modules/index.module.css  |  4 ++--
 .../drawer/demos/mobile-nav/css-modules/index.tsx  | 12 ++++++------
 .../drawer/demos/mobile-nav/tailwind/index.tsx     | 14 +++++++-------
 .../handbook/forms/demos/components/combobox.tsx   |  8 ++++----
 .../handbook/forms/demos/components/toast.tsx      | 14 +++++++-------
 22 files changed, 99 insertions(+), 101 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
index 6569dcd6aef..f47995d76fc 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
@@ -222,15 +222,15 @@ function XIcon(props: React.ComponentProps<'svg'>) {
     <svg
       width="16"
       height="16"
-      viewBox="0 0 24 24"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
-      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index 072a30ebf20..af97c5096df 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -246,15 +246,15 @@ function XIcon(props: React.ComponentProps<'svg'>) {
     <svg
       width="16"
       height="16"
-      viewBox="0 0 24 24"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
-      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
index e8f7c5270c7..ebd93301d4c 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
@@ -183,15 +183,15 @@ function XIcon(props: React.ComponentProps<'svg'>) {
     <svg
       width="16"
       height="16"
-      viewBox="0 0 24 24"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
-      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index f9af091bd27..11a0b5b6446 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -209,15 +209,15 @@ function XIcon(props: React.ComponentProps<'svg'>) {
     <svg
       width="16"
       height="16"
-      viewBox="0 0 24 24"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
-      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
index 876a7596dea..d3f65d1be46 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
@@ -260,15 +260,15 @@ function XIcon(props: React.ComponentProps<'svg'>) {
     <svg
       width="16"
       height="16"
-      viewBox="0 0 24 24"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
-      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
index 7a1ab101f0a..bffbffe63bb 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
@@ -280,15 +280,15 @@ function XIcon(props: React.ComponentProps<'svg'>) {
     <svg
       width="16"
       height="16"
-      viewBox="0 0 24 24"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
-      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
index ade2f5025e7..a7b36c5ec3f 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
@@ -77,15 +77,15 @@ function XIcon(props: React.ComponentProps<'svg'>) {
     <svg
       width="16"
       height="16"
-      viewBox="0 0 24 24"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
-      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index 772b709111e..01737ee3966 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -92,15 +92,15 @@ function XIcon(props: React.ComponentProps<'svg'>) {
     <svg
       width="16"
       height="16"
-      viewBox="0 0 24 24"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
-      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
index 7f5b166994d..e72b35d5184 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
@@ -68,15 +68,15 @@ function XIcon(props: React.ComponentProps<'svg'>) {
     <svg
       width="16"
       height="16"
-      viewBox="0 0 24 24"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
-      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
index 62702e9ea9e..2290e8e6728 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
@@ -83,15 +83,15 @@ function XIcon(props: React.ComponentProps<'svg'>) {
     <svg
       width="16"
       height="16"
-      viewBox="0 0 24 24"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
-      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
index 0e20e4b9ee8..faa2e97946a 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
@@ -90,15 +90,15 @@ function XIcon(props: React.ComponentProps<'svg'>) {
     <svg
       width="16"
       height="16"
-      viewBox="0 0 24 24"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
-      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
index 4349e52f261..d3f8e5de193 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
@@ -98,15 +98,15 @@ function XIcon(props: React.ComponentProps<'svg'>) {
     <svg
       width="16"
       height="16"
-      viewBox="0 0 24 24"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
-      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx
index c0a127c5aa1..aacba45988c 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.tsx
@@ -64,17 +64,17 @@ export default function OutsideScrollDialog() {
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
-      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+      <path d="m2.5 2.5 11 11m-11 0 11-11" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index 06d21294e40..547dcf709fd 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -80,17 +80,17 @@ export default function OutsideScrollDialog() {
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
-      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+      <path d="m2.5 2.5 11 11m-11 0 11-11" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
index a9e3b1f653f..48652c88b7e 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
@@ -159,8 +159,6 @@
 
   @media (min-width: 80rem) {
     top: 0;
-    width: 2.5rem;
-    height: 2.5rem;
   }
 
   @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx
index c14d6556858..af9ea91f342 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.tsx
@@ -23,17 +23,17 @@ export default function ExampleUncontainedDialog() {
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
-      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+      <path d="m2.5 2.5 11 11m-11 0 11-11" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
index 5937951f6ea..e0459ad82ec 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/tailwind/index.tsx
@@ -11,7 +11,7 @@ export default function ExampleUncontainedDialog() {
         <Dialog.Viewport className="fixed inset-0 grid place-items-center px-4 py-12 xl:py-6">
           <Dialog.Popup className="group/popup relative flex h-full w-full max-w-[70rem] xl:max-w-none justify-center pointer-events-none transition-opacity duration-150 data-starting-style:opacity-0 data-ending-style:opacity-0">
             <Dialog.Close
-              className="absolute right-0 -top-10 flex h-8 w-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 xl:top-0 xl:h-10 xl:w-10 pointer-events-auto focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+              className="absolute right-0 -top-10 flex h-8 w-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 xl:top-0 pointer-events-auto focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
               aria-label="Close"
             >
               <XIcon />
@@ -27,17 +27,17 @@ export default function ExampleUncontainedDialog() {
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
-      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+      <path d="m2.5 2.5 11 11m-11 0 11-11" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
index bf59908f3a4..205d6bbc4f4 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
@@ -222,8 +222,8 @@
 }
 
 .CloseButton {
-  width: 2.25rem;
-  height: 2.25rem;
+  width: 2rem;
+  height: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.tsx
index 4c45e70a859..2662670e7a8 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.tsx
@@ -116,17 +116,17 @@ export default function ExampleDrawerMobileNav() {
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
-      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+      <path d="m2.5 2.5 11 11m-11 0 11-11" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
index bc7729872f7..5609d34f2bc 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx
@@ -75,7 +75,7 @@ export default function ExampleDrawerMobileNav() {
                       <div className="h-1 w-12 justify-self-center bg-neutral-300 dark:bg-neutral-700" />
                       <Drawer.Close
                         aria-label="Close menu"
-                        className="flex h-9 w-9 items-center justify-center justify-self-end border-0 bg-transparent text-neutral-950 hover:bg-neutral-100 active:bg-neutral-200 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+                        className="flex h-8 w-8 items-center justify-center justify-self-end border-0 bg-transparent text-neutral-950 hover:bg-neutral-100 active:bg-neutral-200 dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
                       >
                         <XIcon />
                       </Drawer.Close>
@@ -135,17 +135,17 @@ export default function ExampleDrawerMobileNav() {
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
-      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+      <path d="m2.5 2.5 11 11m-11 0 11-11" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
index a4fca4f9385..48788ce8cd6 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
@@ -147,15 +147,15 @@ function XIcon(props: React.ComponentProps<'svg'>) {
     <svg
       width="16"
       height="16"
-      viewBox="0 0 24 24"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
-      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
index d7f92931eca..d83805f2259 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/toast.tsx
@@ -20,7 +20,7 @@ function Toasts() {
           <pre className="whitespace-pre-wrap">{JSON.stringify(toast.data, null, 2)}</pre>
         </div>
         <Toast.Close
-          className="absolute top-2 right-2 flex size-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700"
+          className="absolute top-3 right-3 flex size-8 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700"
           aria-label="Close"
         >
           <XIcon />
@@ -48,17 +48,17 @@ export const useToastManager = Toast.useToastManager;
 function XIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M18 6 6 18" vectorEffect="non-scaling-stroke" />
-      <path d="m6 6 12 12" vectorEffect="non-scaling-stroke" />
+      <path d="m2.5 2.5 11 11m-11 0 11-11" />
     </svg>
   );
 }

From 511240649f3df9767dee8c3343a606fe011aab8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 00:38:31 +0200
Subject: [PATCH 204/257] Select: reduce sideOffset to match
 Autocomplete/Combobox

---
 .../react/components/select/demos/grouped/css-modules/index.tsx | 2 +-
 .../react/components/select/demos/grouped/tailwind/index.tsx    | 2 +-
 .../react/components/select/demos/hero/css-modules/index.tsx    | 2 +-
 .../react/components/select/demos/hero/tailwind/index.tsx       | 2 +-
 .../components/select/demos/multiple/css-modules/index.tsx      | 2 +-
 .../react/components/select/demos/multiple/tailwind/index.tsx   | 2 +-
 .../components/select/demos/object-values/css-modules/index.tsx | 2 +-
 .../components/select/demos/object-values/tailwind/index.tsx    | 2 +-
 .../react/components/toolbar/demos/hero/css-modules/index.tsx   | 2 +-
 .../react/components/toolbar/demos/hero/tailwind/index.tsx      | 2 +-
 .../demos/animated-select-motion/css-modules/index.tsx          | 2 +-
 .../app/(docs)/react/handbook/forms/demos/components/select.tsx | 2 +-
 12 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
index 26513808cbe..00c4de1db84 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
@@ -17,7 +17,7 @@ export default function ExampleSelectGrouped() {
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
-          <Select.Positioner className={styles.Positioner} sideOffset={8}>
+          <Select.Positioner className={styles.Positioner} sideOffset={4}>
             <Select.Popup className={styles.Popup}>
               <Select.ScrollUpArrow className={styles.ScrollArrow}>
                 <CaretUpIcon />
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index aa68f5ac3fe..d57642d4891 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -23,7 +23,7 @@ export default function ExampleSelectGrouped() {
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
-          <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
+          <Select.Positioner className="outline-hidden select-none z-10" sideOffset={4}>
             <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1.5rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[2] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
                 <CaretUpIcon />
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
index 1f7813dfd6c..407cb026bae 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
@@ -22,7 +22,7 @@ export default function ExampleSelect() {
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
-          <Select.Positioner className={styles.Positioner} sideOffset={8}>
+          <Select.Positioner className={styles.Positioner} sideOffset={4}>
             <Select.Popup className={styles.Popup}>
               <Select.ScrollUpArrow className={styles.ScrollArrow}>
                 <CaretUpIcon />
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index dd928eac8cc..f111d5a4631 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -26,7 +26,7 @@ export default function ExampleSelect() {
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
-          <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
+          <Select.Positioner className="outline-hidden select-none z-10" sideOffset={4}>
             <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1.5rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
                 <CaretUpIcon />
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
index c85f1322c0b..60ba82e3b6d 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
@@ -44,7 +44,7 @@ export default function MultiSelectExample() {
         <Select.Portal>
           <Select.Positioner
             className={styles.Positioner}
-            sideOffset={8}
+            sideOffset={4}
             alignItemWithTrigger={false}
           >
             <Select.Popup className={styles.Popup}>
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index afff17f4f9f..743b0a4692c 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -47,7 +47,7 @@ export default function MultiSelectExample() {
         <Select.Portal>
           <Select.Positioner
             className="outline-hidden z-10"
-            sideOffset={8}
+            sideOffset={4}
             alignItemWithTrigger={false}
           >
             <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding overflow-y-auto border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1.5rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
index c2f7abb0cf7..9efe6fb01bc 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
@@ -24,7 +24,7 @@ export default function ObjectValueSelect() {
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
-          <Select.Positioner className={styles.Positioner} sideOffset={8}>
+          <Select.Positioner className={styles.Positioner} sideOffset={4}>
             <Select.Popup className={styles.Popup}>
               <Select.ScrollUpArrow className={styles.ScrollArrow}>
                 <CaretUpIcon />
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index 28e7afc0675..011bd6dec4c 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -25,7 +25,7 @@ export default function ObjectValueSelect() {
           </Select.Icon>
         </Select.Trigger>
         <Select.Portal>
-          <Select.Positioner className="outline-hidden select-none z-10" sideOffset={8}>
+          <Select.Positioner className="outline-hidden select-none z-10" sideOffset={4}>
             <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1.5rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
                 <CaretUpIcon />
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
index 9af1dab49c0..01a6f88392c 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
@@ -44,7 +44,7 @@ export default function ExampleToolbar() {
           </Select.Icon>
         </Toolbar.Button>
         <Select.Portal>
-          <Select.Positioner className={styles.Positioner} sideOffset={8}>
+          <Select.Positioner className={styles.Positioner} sideOffset={4}>
             <Select.Popup className={styles.Popup}>
               <Select.Item className={styles.Item} value="Helvetica">
                 <Select.ItemIndicator className={styles.ItemIndicator}>
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
index 754a6e4937a..3f931c20039 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
@@ -52,7 +52,7 @@ export default function ExampleToolbar() {
           </Select.Icon>
         </Toolbar.Button>
         <Select.Portal>
-          <Select.Positioner className="z-10 outline-none select-none" sideOffset={8}>
+          <Select.Positioner className="z-10 outline-none select-none" sideOffset={4}>
             <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto border border-neutral-950 bg-white bg-clip-padding text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1.5rem)] data-[side=none]:translate-y-px data-[side=none]:scale-100 data-[side=none]:opacity-100 data-[side=none]:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-starting-style:opacity-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.Item
                 value="Helvetica"
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
index 5f5998a2cbe..c1938f4a263 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
@@ -52,7 +52,7 @@ export default function AnimatedSelectMotionDemo() {
       <AnimatePresence>
         {portalMounted && (
           <Select.Portal>
-            <Select.Positioner className={styles.Positioner} sideOffset={8} ref={positionerRef}>
+            <Select.Positioner className={styles.Positioner} sideOffset={4} ref={positionerRef}>
               <Select.Popup className={styles.Popup} render={motionElement}>
                 <Select.ScrollUpArrow className={styles.ScrollArrow} />
                 <Select.List className={styles.List}>
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
index 488deccdf02..46cad6fb505 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
@@ -54,7 +54,7 @@ export function Positioner({ className, ...props }: Select.Positioner.Props) {
   return (
     <Select.Positioner
       className={clsx('outline-none select-none z-10', className)}
-      sideOffset={8}
+      sideOffset={4}
       {...props}
     />
   );

From 59a758fa3fc45254902f6c4e78548749244efabc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 00:53:47 +0200
Subject: [PATCH 205/257] New Markdown icon

---
 docs/src/icons/MarkdownIcon.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/docs/src/icons/MarkdownIcon.tsx b/docs/src/icons/MarkdownIcon.tsx
index 71bdb997c19..df0552f8b80 100644
--- a/docs/src/icons/MarkdownIcon.tsx
+++ b/docs/src/icons/MarkdownIcon.tsx
@@ -2,10 +2,9 @@ import * as React from 'react';
 
 export function MarkdownIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
-      <title>Markdown</title>
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" {...props}>
       <path
-        d="M22.269 19.385H1.731a1.73 1.73 0 0 1-1.73-1.73V6.345a1.73 1.73 0 0 1 1.73-1.73h20.538a1.73 1.73 0 0 1 1.73 1.73v11.308a1.73 1.73 0 0 1-1.73 1.731zm-16.5-3.462v-4.5l2.308 2.885 2.307-2.885v4.5h2.308V8.078h-2.308l-2.307 2.885-2.308-2.885H3.461v7.847zM21.231 12h-2.308V8.077h-2.307V12h-2.308l3.461 4.039z"
+        d="M14.846 12.9233H1.154a1.153 1.153 0 0 1-.44136-.0878 1.152 1.152 0 0 1-.37416-.25 1.153 1.153 0 0 1-.25002-.3741 1.154 1.154 0 0 1-.08779-.4414V4.22999A1.15335 1.15335 0 0 1 1.154 3.07666h13.692c.1515 0 .3014.02983.4414.08779a1.1535 1.1535 0 0 1 .7119 1.06554v7.53871c.0001.1515-.0296.3015-.0876.4415-.0579.14-.1428.2673-.2499.3744a1.153 1.153 0 0 1-.3743.2502c-.14.058-.29.0885-.4415.0885m-11-2.308V7.61533l1.53867 1.92333 1.538-1.92333v2.99997h1.53867V5.38533H6.92267l-1.538 1.92333L3.846 5.38533H2.30734v5.23137zm10.308-2.61531h-1.5387V5.38466h-1.538v2.61533H9.53867L11.846 10.6927z"
         fill="currentColor"
       />
     </svg>

From c4a982c10e2d91773ebd380f4a6a2bba0ac50a56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 00:54:45 +0200
Subject: [PATCH 206/257] Tooltip: new icons

---
 .../css-modules/index.tsx                     | 63 +++++++++---
 .../tailwind/index.tsx                        |  8 +-
 .../css-modules/index.tsx                     | 95 +++++++++----------
 .../detached-triggers-full/tailwind/index.tsx | 36 +++----
 .../css-modules/index.tsx                     | 23 ++---
 .../tailwind/index.tsx                        |  6 +-
 .../components/tooltip/demos/icons-tw.tsx     | 56 ++++++-----
 7 files changed, 154 insertions(+), 133 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx
index 0b06b070e62..d4d184f17b5 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx
@@ -19,15 +19,15 @@ export default function TooltipDetachedTriggersControlledDemo() {
       <div className={styles.Container}>
         <div className={styles.ButtonGroup}>
           <Tooltip.Trigger className={styles.IconButton} handle={demoTooltip} id="trigger-1">
-            <InfoIcon aria-label="Controlled tooltip" />
+            <HeadphonesIcon aria-label="Controlled tooltip" />
           </Tooltip.Trigger>
 
           <Tooltip.Trigger className={styles.IconButton} handle={demoTooltip} id="trigger-2">
-            <InfoIcon aria-label="Controlled tooltip" />
+            <StopwatchIcon aria-label="Controlled tooltip" />
           </Tooltip.Trigger>
 
           <Tooltip.Trigger className={styles.IconButton} handle={demoTooltip} id="trigger-3">
-            <InfoIcon aria-label="Controlled tooltip" />
+            <TrashIcon aria-label="Controlled tooltip" />
           </Tooltip.Trigger>
         </div>
 
@@ -62,23 +62,62 @@ export default function TooltipDetachedTriggersControlledDemo() {
   );
 }
 
-function InfoIcon(props: React.ComponentProps<'svg'>) {
+function HeadphonesIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path strokeLinecap="round" d="M1.5 11V7.5c0-2.5 2.5-6 6.5-6s6.5 3.5 6.5 6V11" />
+      <path d="M12 7.5c1.3807 0 2.5 1.11929 2.5 2.5v2c0 1.3807-1.1193 2.5-2.5 2.5h-1.5v-7zm-8 0h1.5v7H4c-1.38071 0-2.5-1.1193-2.5-2.5v-2c0-1.38071 1.11929-2.5 2.5-2.5Z" />
+    </svg>
+  );
+}
+
+function StopwatchIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <circle cx="8" cy="8.5" r="6" />
+      <path
+        strokeLinecap="square"
+        strokeLinejoin="round"
+        d="M8 9.5v-5m0-2v-2m-2 0h4M12 4l1.5-1.5"
+      />
+    </svg>
+  );
+}
+
+function TrashIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth={1}
-      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <circle cx="12" cy="12" r="10" />
-      <path d="M12 16v-4" />
-      <path d="M12 8h.01" />
+      <path strokeLinecap="square" d="M2.5 4h11" />
+      <path strokeLinecap="round" d="M6.5 4V3c0-.82843.67157-1.5 1.5-1.5s1.5.67157 1.5 1.5v1" />
+      <path
+        strokeLinecap="square"
+        d="m3.5 4 .87069 9.1422c.07332.7699.7199 1.3578 1.49324 1.3578h4.27217c.7733 0 1.4199-.5879 1.4932-1.3578L12.5 4"
+      />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
index 2b2681adc03..441906e5624 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { Tooltip } from '@base-ui/react/tooltip';
-import { InfoIcon } from '../../icons-tw';
+import { HeadphonesIcon, StopwatchIcon, TrashIcon } from '../../icons-tw';
 
 const demoTooltip = Tooltip.createHandle();
 
@@ -31,7 +31,7 @@ export default function TooltipDetachedTriggersControlledDemo() {
       <div className="flex gap-2 flex-wrap justify-center">
         <div className="flex">
           <Tooltip.Trigger className={iconButtonClass} handle={demoTooltip} id="trigger-1">
-            <InfoIcon aria-label="Controlled tooltip" />
+            <HeadphonesIcon aria-label="Controlled tooltip" />
           </Tooltip.Trigger>
 
           <Tooltip.Trigger
@@ -39,7 +39,7 @@ export default function TooltipDetachedTriggersControlledDemo() {
             handle={demoTooltip}
             id="trigger-2"
           >
-            <InfoIcon aria-label="Controlled tooltip" />
+            <StopwatchIcon aria-label="Controlled tooltip" />
           </Tooltip.Trigger>
 
           <Tooltip.Trigger
@@ -47,7 +47,7 @@ export default function TooltipDetachedTriggersControlledDemo() {
             handle={demoTooltip}
             id="trigger-3"
           >
-            <InfoIcon aria-label="Controlled tooltip" />
+            <TrashIcon aria-label="Controlled tooltip" />
           </Tooltip.Trigger>
         </div>
 
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx
index 499b262b304..e4f1221e9da 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx
@@ -3,35 +3,41 @@ import * as React from 'react';
 import { Tooltip } from '@base-ui/react/tooltip';
 import styles from './index.module.css';
 
-const demoTooltip = Tooltip.createHandle<React.ComponentType>();
+const demoTooltip = Tooltip.createHandle<React.ReactNode>();
 
 export default function TooltipDetachedTriggersFullDemo() {
   return (
     <Tooltip.Provider>
       <div className={styles.ButtonGroup}>
-        <Tooltip.Trigger className={styles.Button} handle={demoTooltip} payload={InfoContent}>
-          <InfoIcon aria-label="This is information about the feature" />
+        <Tooltip.Trigger
+          className={styles.Button}
+          handle={demoTooltip}
+          payload="Listen to audio preview"
+        >
+          <HeadphonesIcon aria-label="Listen to audio preview" />
         </Tooltip.Trigger>
 
-        <Tooltip.Trigger className={styles.Button} handle={demoTooltip} payload={HelpContent}>
-          <HelpIcon aria-label="Need help?" />
+        <Tooltip.Trigger className={styles.Button} handle={demoTooltip} payload="Set a timer">
+          <StopwatchIcon aria-label="Set a timer" />
         </Tooltip.Trigger>
 
-        <Tooltip.Trigger className={styles.Button} handle={demoTooltip} payload={AlertContent}>
-          <AlertIcon aria-label="Warning: This action cannot be undone" />
+        <Tooltip.Trigger
+          className={styles.Button}
+          handle={demoTooltip}
+          payload="Delete: This action cannot be undone"
+        >
+          <TrashIcon aria-label="Delete: This action cannot be undone" />
         </Tooltip.Trigger>
       </div>
 
       <Tooltip.Root handle={demoTooltip}>
-        {({ payload: Payload }) => (
+        {({ payload }) => (
           <Tooltip.Portal>
             <Tooltip.Positioner sideOffset={11} className={styles.Positioner}>
               <Tooltip.Popup className={styles.Popup}>
                 <Tooltip.Arrow className={styles.Arrow} />
 
-                <Tooltip.Viewport className={styles.Viewport}>
-                  {Payload !== undefined && <Payload />}
-                </Tooltip.Viewport>
+                <Tooltip.Viewport className={styles.Viewport}>{payload}</Tooltip.Viewport>
               </Tooltip.Popup>
             </Tooltip.Positioner>
           </Tooltip.Portal>
@@ -41,77 +47,62 @@ export default function TooltipDetachedTriggersFullDemo() {
   );
 }
 
-function InfoContent() {
-  return <span>This is information about the feature</span>;
-}
-
-function HelpContent() {
-  return <span>Need help?</span>;
-}
-
-function AlertContent() {
-  return <span>Warning: This action cannot be undone</span>;
-}
-
-function InfoIcon(props: React.ComponentProps<'svg'>) {
+function HeadphonesIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth={1}
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <circle cx="12" cy="12" r="10" />
-      <path d="M12 16v-4" />
-      <path d="M12 8h.01" />
+      <path strokeLinecap="round" d="M1.5 11V7.5c0-2.5 2.5-6 6.5-6s6.5 3.5 6.5 6V11" />
+      <path d="M12 7.5c1.3807 0 2.5 1.11929 2.5 2.5v2c0 1.3807-1.1193 2.5-2.5 2.5h-1.5v-7zm-8 0h1.5v7H4c-1.38071 0-2.5-1.1193-2.5-2.5v-2c0-1.38071 1.11929-2.5 2.5-2.5Z" />
     </svg>
   );
 }
 
-function HelpIcon(props: React.ComponentProps<'svg'>) {
+function StopwatchIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth={1}
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <circle cx="12" cy="12" r="10" vectorEffect="non-scaling-stroke" />
-      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" vectorEffect="non-scaling-stroke" />
-      <path d="M12 17h.01" vectorEffect="non-scaling-stroke" />
+      <circle cx="8" cy="8.5" r="6" />
+      <path
+        strokeLinecap="square"
+        strokeLinejoin="round"
+        d="M8 9.5v-5m0-2v-2m-2 0h4M12 4l1.5-1.5"
+      />
     </svg>
   );
 }
 
-function AlertIcon(props: React.ComponentProps<'svg'>) {
+function TrashIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth={1}
-      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
-      <path d="M12 9v4" />
-      <path d="M12 17h.01" />
+      <path strokeLinecap="square" d="M2.5 4h11" />
+      <path strokeLinecap="round" d="M6.5 4V3c0-.82843.67157-1.5 1.5-1.5s1.5.67157 1.5 1.5v1" />
+      <path
+        strokeLinecap="square"
+        d="m3.5 4 .87069 9.1422c.07332.7699.7199 1.3578 1.49324 1.3578h4.27217c.7733 0 1.4199-.5879 1.4932-1.3578L12.5 4"
+      />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
index 5021d16d32e..fec56f309f1 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
@@ -1,9 +1,9 @@
 'use client';
 import * as React from 'react';
 import { Tooltip } from '@base-ui/react/tooltip';
-import { InfoIcon, HelpIcon, AlertIcon } from '../../icons-tw';
+import { HeadphonesIcon, StopwatchIcon, TrashIcon } from '../../icons-tw';
 
-const demoTooltip = Tooltip.createHandle<React.ComponentType>();
+const demoTooltip = Tooltip.createHandle<React.ReactNode>();
 
 const triggerClass =
   'flex size-8 items-center justify-center border border-neutral-950 bg-white text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white focus-visible:relative hover:bg-neutral-100 active:bg-neutral-200 dark:border-white dark:bg-neutral-950 dark:text-white dark:data-popup-open:bg-neutral-800 dark:hover:bg-neutral-800 dark:active:bg-neutral-700';
@@ -15,29 +15,33 @@ export default function TooltipDetachedTriggersFullDemo() {
   return (
     <Tooltip.Provider>
       <div className="flex">
-        <Tooltip.Trigger className={triggerClass} handle={demoTooltip} payload={InfoContent}>
-          <InfoIcon aria-label="This is information about the feature" />
+        <Tooltip.Trigger
+          className={triggerClass}
+          handle={demoTooltip}
+          payload="Listen to audio preview"
+        >
+          <HeadphonesIcon aria-label="Listen to audio preview" />
         </Tooltip.Trigger>
 
         <Tooltip.Trigger
           className={`${triggerClass} border-l-0`}
           handle={demoTooltip}
-          payload={HelpContent}
+          payload="Set a timer"
         >
-          <HelpIcon aria-label="Need help?" />
+          <StopwatchIcon aria-label="Set a timer" />
         </Tooltip.Trigger>
 
         <Tooltip.Trigger
           className={`${triggerClass} border-l-0`}
           handle={demoTooltip}
-          payload={AlertContent}
+          payload="Delete: This action cannot be undone"
         >
-          <AlertIcon aria-label="Warning: This action cannot be undone" />
+          <TrashIcon aria-label="Delete: This action cannot be undone" />
         </Tooltip.Trigger>
       </div>
 
       <Tooltip.Root handle={demoTooltip}>
-        {({ payload: Payload }) => (
+        {({ payload }) => (
           <Tooltip.Portal>
             <Tooltip.Positioner
               sideOffset={11}
@@ -98,7 +102,7 @@ export default function TooltipDetachedTriggersFullDemo() {
                     data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:-translate-x-1/2
                     data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:opacity-0"
                 >
-                  {Payload !== undefined && <Payload />}
+                  {payload}
                 </Tooltip.Viewport>
               </Tooltip.Popup>
             </Tooltip.Positioner>
@@ -108,15 +112,3 @@ export default function TooltipDetachedTriggersFullDemo() {
     </Tooltip.Provider>
   );
 }
-
-function InfoContent() {
-  return <span>This is information about the feature</span>;
-}
-
-function HelpContent() {
-  return <span>Need help?</span>;
-}
-
-function AlertContent() {
-  return <span>Warning: This action cannot be undone</span>;
-}
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx
index 9c7a89b2914..f72baea3a62 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx
@@ -9,7 +9,7 @@ export default function TooltipDetachedTriggersSimpleDemo() {
   return (
     <Tooltip.Provider>
       <Tooltip.Trigger className={styles.IconButton} handle={demoTooltip}>
-        <InfoIcon aria-label="This is a detached tooltip" />
+        <TrashIcon aria-label="Delete" />
       </Tooltip.Trigger>
 
       <Tooltip.Root handle={demoTooltip}>
@@ -17,7 +17,7 @@ export default function TooltipDetachedTriggersSimpleDemo() {
           <Tooltip.Positioner sideOffset={11}>
             <Tooltip.Popup className={styles.Popup}>
               <Tooltip.Arrow className={styles.Arrow} />
-              This is a detached tooltip
+              Delete
             </Tooltip.Popup>
           </Tooltip.Positioner>
         </Tooltip.Portal>
@@ -26,23 +26,24 @@ export default function TooltipDetachedTriggersSimpleDemo() {
   );
 }
 
-function InfoIcon(props: React.ComponentProps<'svg'>) {
+function TrashIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth={1}
-      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <circle cx="12" cy="12" r="10" />
-      <path d="M12 16v-4" />
-      <path d="M12 8h.01" />
+      <path strokeLinecap="square" d="M2.5 4h11" />
+      <path strokeLinecap="round" d="M6.5 4V3c0-.82843.67157-1.5 1.5-1.5s1.5.67157 1.5 1.5v1" />
+      <path
+        strokeLinecap="square"
+        d="m3.5 4 .87069 9.1422c.07332.7699.7199 1.3578 1.49324 1.3578h4.27217c.7733 0 1.4199-.5879 1.4932-1.3578L12.5 4"
+      />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
index d3504739516..7a9a7584e1b 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { Tooltip } from '@base-ui/react/tooltip';
-import { InfoIcon } from '../../icons-tw';
+import { TrashIcon } from '../../icons-tw';
 
 const demoTooltip = Tooltip.createHandle();
 
@@ -18,7 +18,7 @@ export default function TooltipDetachedTriggersSimpleDemo() {
   return (
     <Tooltip.Provider>
       <Tooltip.Trigger className={triggerClass} handle={demoTooltip}>
-        <InfoIcon aria-label="This is a detached tooltip" />
+        <TrashIcon aria-label="Delete" />
       </Tooltip.Trigger>
 
       <Tooltip.Root handle={demoTooltip}>
@@ -26,7 +26,7 @@ export default function TooltipDetachedTriggersSimpleDemo() {
           <Tooltip.Positioner sideOffset={11}>
             <Tooltip.Popup className={popupClass}>
               <Tooltip.Arrow className={arrowClass} />
-              This is a detached tooltip
+              Delete
             </Tooltip.Popup>
           </Tooltip.Positioner>
         </Tooltip.Portal>
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx
index 1caf67d0f5e..711eaaaa0de 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/icons-tw.tsx
@@ -1,63 +1,61 @@
 import * as React from 'react';
 
-export function InfoIcon(props: React.ComponentProps<'svg'>) {
+export function HeadphonesIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth={1}
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <circle cx="12" cy="12" r="10" />
-      <path d="M12 16v-4" />
-      <path d="M12 8h.01" />
+      <path strokeLinecap="round" d="M1.5 11V7.5c0-2.5 2.5-6 6.5-6s6.5 3.5 6.5 6V11" />
+      <path d="M12 7.5c1.3807 0 2.5 1.11929 2.5 2.5v2c0 1.3807-1.1193 2.5-2.5 2.5h-1.5v-7zm-8 0h1.5v7H4c-1.38071 0-2.5-1.1193-2.5-2.5v-2c0-1.38071 1.11929-2.5 2.5-2.5Z" />
     </svg>
   );
 }
-export function HelpIcon(props: React.ComponentProps<'svg'>) {
+
+export function StopwatchIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth={1}
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <circle cx="12" cy="12" r="10" vectorEffect="non-scaling-stroke" />
-      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" vectorEffect="non-scaling-stroke" />
-      <path d="M12 17h.01" vectorEffect="non-scaling-stroke" />
+      <circle cx="8" cy="8.5" r="6" />
+      <path
+        strokeLinecap="square"
+        strokeLinejoin="round"
+        d="M8 9.5v-5m0-2v-2m-2 0h4M12 4l1.5-1.5"
+      />
     </svg>
   );
 }
 
-export function AlertIcon(props: React.ComponentProps<'svg'>) {
+export function TrashIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeWidth={1}
-      strokeLinecap="square"
       strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
-      <path d="M12 9v4" />
-      <path d="M12 17h.01" />
+      <path strokeLinecap="square" d="M2.5 4h11" />
+      <path strokeLinecap="round" d="M6.5 4V3c0-.82843.67157-1.5 1.5-1.5s1.5.67157 1.5 1.5v1" />
+      <path
+        strokeLinecap="square"
+        d="m3.5 4 .87069 9.1422c.07332.7699.7199 1.3578 1.49324 1.3578h4.27217c.7733 0 1.4199-.5879 1.4932-1.3578L12.5 4"
+      />
     </svg>
   );
 }

From e2dfd7e3eff4b18121cb2bd2f2476f4e6dc9f129 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 00:56:12 +0200
Subject: [PATCH 207/257] New npm icon

---
 docs/src/icons/NpmIcon.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/src/icons/NpmIcon.tsx b/docs/src/icons/NpmIcon.tsx
index a55213c9ab2..a7ba0c1a2e6 100644
--- a/docs/src/icons/NpmIcon.tsx
+++ b/docs/src/icons/NpmIcon.tsx
@@ -3,7 +3,11 @@ import * as React from 'react';
 export function NpmIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" {...props}>
-      <path fillRule="evenodd" clipRule="evenodd" d="M0 0V16H16V0H0ZM13 3H3V13H8V5H11V13H13V3Z" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1 1h14v14H1zM4 4h8v8H4zM7.5 6h3v6h-3z"
+      />
     </svg>
   );
 }

From 5ceebe23c94465015f34fdbfb92220a9f5019fb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 01:01:30 +0200
Subject: [PATCH 208/257] New copy icon

---
 docs/src/icons/CopyIcon.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/docs/src/icons/CopyIcon.tsx b/docs/src/icons/CopyIcon.tsx
index 2a419a48ac0..9ba8ccdcdb5 100644
--- a/docs/src/icons/CopyIcon.tsx
+++ b/docs/src/icons/CopyIcon.tsx
@@ -1,10 +1,8 @@
 export function CopyIcon() {
   return (
-    <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
-      <path
-        d="M1.5 1C0.675781 1 0 1.67578 0 2.5V10.5C0 11.3242 0.675781 12 1.5 12H3V12.5C3 13.3242 3.67578 14 4.5 14H12.5C13.3242 14 14 13.3242 14 12.5V4.5C14 3.67578 13.3242 3 12.5 3H11V2.5C11 1.67578 10.3242 1 9.5 1H1.5ZM1.5 2H9.5C9.78125 2 10 2.21875 10 2.5V10.5C10 10.7812 9.78125 11 9.5 11H1.5C1.21875 11 1 10.7812 1 10.5V2.5C1 2.21875 1.21875 2 1.5 2ZM11 4H12.5C12.7812 4 13 4.21875 13 4.5V12.5C13 12.7812 12.7812 13 12.5 13H4.5C4.21875 13 4 12.7812 4 12.5V12H9.5C10.3242 12 11 11.3242 11 10.5V4Z"
-        transform="translate(0 -1)"
-      />
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor">
+      <path strokeLinecap="square" d="M4.5 4.5h10v10h-10z" />
+      <path strokeLinecap="square" d="M4.5 11.5h-3v-10h10v3" />
     </svg>
   );
 }

From d4b32a1d1f2e03fb4f4ed2eddf1aab0f0c36e3c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 01:03:45 +0200
Subject: [PATCH 209/257] Website: new plus and minus icons

---
 docs/src/app/(website)/icons/MinusIcon.tsx | 19 ++++++++++++-------
 docs/src/app/(website)/icons/PlusIcon.tsx  | 19 ++++++++++++-------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/docs/src/app/(website)/icons/MinusIcon.tsx b/docs/src/app/(website)/icons/MinusIcon.tsx
index 7360f021031..092a2bbc7a3 100644
--- a/docs/src/app/(website)/icons/MinusIcon.tsx
+++ b/docs/src/app/(website)/icons/MinusIcon.tsx
@@ -2,13 +2,18 @@ import * as React from 'react';
 
 export function MinusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="20" height="20" viewBox="0 0 15 15" fill="none" className="Icon" {...props}>
-      <path
-        d="M2.25 7.5C2.25 7.22386 2.47386 7 2.75 7H12.25C12.5261 7 12.75 7.22386 12.75 7.5C12.75 7.77614 12.5261 8 12.25 8H2.75C2.47386 8 2.25 7.77614 2.25 7.5Z"
-        fill="currentColor"
-        fillRule="evenodd"
-        clipRule="evenodd"
-      />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      className="Icon"
+      {...props}
+    >
+      <path d="M2.5 8h11" />
     </svg>
   );
 }
diff --git a/docs/src/app/(website)/icons/PlusIcon.tsx b/docs/src/app/(website)/icons/PlusIcon.tsx
index 346e7ba536d..c6a081ef3f1 100644
--- a/docs/src/app/(website)/icons/PlusIcon.tsx
+++ b/docs/src/app/(website)/icons/PlusIcon.tsx
@@ -2,13 +2,18 @@ import * as React from 'react';
 
 export function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="20" height="20" viewBox="0 0 15 15" fill="none" className="Icon" {...props}>
-      <path
-        d="M8 2.75C8 2.47386 7.77614 2.25 7.5 2.25C7.22386 2.25 7 2.47386 7 2.75V7H2.75C2.47386 7 2.25 7.22386 2.25 7.5C2.25 7.77614 2.47386 8 2.75 8H7V12.25C7 12.5261 7.22386 12.75 7.5 12.75C7.77614 12.75 8 12.5261 8 12.25V8H12.25C12.5261 8 12.75 7.77614 12.75 7.5C12.75 7.22386 12.5261 7 12.25 7H8V2.75Z"
-        fill="currentColor"
-        fillRule="evenodd"
-        clipRule="evenodd"
-      />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      className="Icon"
+      {...props}
+    >
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }

From e7f268ac059419fb433105b6fa9c8aec3f4c9d37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 01:07:20 +0200
Subject: [PATCH 210/257] New GitHub icon

---
 docs/src/icons/GitHubIcon.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/icons/GitHubIcon.tsx b/docs/src/icons/GitHubIcon.tsx
index e7d2c30bd00..ee87c7f9bf6 100644
--- a/docs/src/icons/GitHubIcon.tsx
+++ b/docs/src/icons/GitHubIcon.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 
 export function GitHubIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="18" height="18" viewBox="0 0 18 18" fill="currentColor" {...props}>
-      <path d="M9.375 0C4.6095 0 0.75 3.8595 0.75 8.625C0.75 12.4418 3.219 15.6652 6.64725 16.8075C7.0785 16.8832 7.23975 16.6245 7.23975 16.398C7.23975 16.1933 7.22925 15.5145 7.22925 14.7915C5.0625 15.1905 4.50225 14.2635 4.32975 13.779C4.23225 13.5308 3.81225 12.765 3.44475 12.5602C3.14325 12.3982 2.712 11.9993 3.43425 11.9888C4.11375 11.9783 4.599 12.6142 4.761 12.873C5.53725 14.178 6.777 13.8105 7.27275 13.584C7.34775 13.0237 7.57425 12.6465 7.8225 12.4305C5.90325 12.2153 3.8985 11.4713 3.8985 8.172C3.8985 7.2345 4.23225 6.45825 4.782 5.8545C4.69575 5.6385 4.39425 4.75425 4.86825 3.5685C4.86825 3.5685 5.5905 3.342 7.2405 4.45275C7.9305 4.2585 8.66325 4.16175 9.39675 4.16175C10.1295 4.16175 10.863 4.25925 11.553 4.45275C13.203 3.3315 13.9245 3.5685 13.9245 3.5685C14.3993 4.75425 14.097 5.6385 14.0107 5.8545C14.5605 6.45825 14.895 7.22325 14.895 8.172C14.895 11.4818 12.879 12.2145 10.9598 12.4305C11.2725 12.7005 11.5417 13.218 11.5417 14.0265C11.5417 15.18 11.5312 16.107 11.5312 16.398C11.5312 16.6245 11.6933 16.8945 12.1238 16.8083C15.5318 15.6652 18 12.4305 18 8.625C18 3.8595 14.1405 0 9.375 0Z" />
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M8 0C3.57983 0 0 3.67031 0 8.20221c0 3.62969 2.29009 6.69509 5.46991 7.78139.4.072.54957-.174.54957-.3894 0-.1947-.00974-.8402-.00974-1.5278-2.00974.3795-2.52939-.5021-2.68939-.9628-.09044-.2361-.48-.9643-.82087-1.1591-.27965-.1541-.67965-.5334-.00974-.5434.63026-.01 1.08035.5948 1.23061.8409.72 1.241 1.86991.8915 2.32974.6761.06956-.5328.27965-.8915.50991-1.0969-1.78017-.2047-3.63965-.9122-3.63965-4.04979 0-.89154.30956-1.62974.81948-2.20389-.08-.20542-.35966-1.04632.08-2.17395 0 0 .66991-.21539 2.20034.84091.64-.18473 1.31966-.27674 2-.27674.67966 0 1.36.09272 2.00003.27674 1.5304-1.06629 2.1996-.84091 2.1996-.84091.4404 1.12763.16 1.96853.08 2.17395.5099.57415.8202 1.30165.8202 2.20389 0 3.14759-1.8699 3.84439-3.65004 4.04979.29004.2567.53974.7489.53974 1.5177 0 1.097-.00975 1.9785-.00975 2.2553 0 .2154.15035.4721.54965.3902C13.7107 14.8973 16 11.8212 16 8.20221 16 3.67031 12.4202 0 8 0" />
     </svg>
   );
 }

From fe63c7d62a4a96fee9f18c5fd57c2c6e3fc5e6cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 01:08:03 +0200
Subject: [PATCH 211/257] New external link icon

---
 docs/src/icons/ExternalLinkIcon.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/docs/src/icons/ExternalLinkIcon.tsx b/docs/src/icons/ExternalLinkIcon.tsx
index 5ed4d0b3418..b283e2ddf76 100644
--- a/docs/src/icons/ExternalLinkIcon.tsx
+++ b/docs/src/icons/ExternalLinkIcon.tsx
@@ -2,11 +2,9 @@ import * as React from 'react';
 
 export function ExternalLinkIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="12" height="16" viewBox="0 0 12 16" fill="currentColor" {...props}>
-      <path
-        transform="translate(0, -0.5)"
-        d="M7 2V3H10.293L4.02344 9.27344L4.72656 9.97656L11 3.70703V7H12V2H7ZM2 4C0.894531 4 0 4.89453 0 6V12C0 13.1055 0.894531 14 2 14H8C9.10547 14 10 13.1055 10 12V7L9 8V12C9 12.5508 8.55078 13 8 13H2C1.44922 13 1 12.5508 1 12V6C1 5.44922 1.44922 5 2 5H6L7 4H2Z"
-      />
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" {...props}>
+      <path strokeLinecap="square" strokeLinejoin="round" d="m4 12 8-8" />
+      <path d="M5 3.5h7.5V11" />
     </svg>
   );
 }

From 1cf30755f799b737adf827c8cf3dcd55fa4396e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 01:12:32 +0200
Subject: [PATCH 212/257] New vertical ellipsis icon

---
 docs/src/icons/MoreVertIcon.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/icons/MoreVertIcon.tsx b/docs/src/icons/MoreVertIcon.tsx
index bc364a06349..b04ff471ce9 100644
--- a/docs/src/icons/MoreVertIcon.tsx
+++ b/docs/src/icons/MoreVertIcon.tsx
@@ -2,10 +2,10 @@ import * as React from 'react';
 
 export function MoreVertIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" {...props}>
-      <circle cx="7" cy="2.5" r="1.25" />
-      <circle cx="7" cy="7" r="1.25" />
-      <circle cx="7" cy="11.5" r="1.25" />
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <circle cx="8" cy="3" r="1" />
+      <circle cx="8" cy="8" r="1" />
+      <circle cx="8" cy="13" r="1" />
     </svg>
   );
 }

From 59cd6f2a5a2425d943ddc68c0b16c7fea2d5ca33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 01:14:43 +0200
Subject: [PATCH 213/257] New check icon

---
 docs/src/components/Select.tsx    |  4 ++--
 docs/src/icons/CheckIcon.tsx      | 21 ++++++++++++++-------
 docs/src/icons/ThickCheckIcon.tsx |  9 ---------
 3 files changed, 16 insertions(+), 18 deletions(-)
 delete mode 100644 docs/src/icons/ThickCheckIcon.tsx

diff --git a/docs/src/components/Select.tsx b/docs/src/components/Select.tsx
index b4fbc9e9534..3f8f939ccd0 100644
--- a/docs/src/components/Select.tsx
+++ b/docs/src/components/Select.tsx
@@ -1,7 +1,7 @@
 import { Select } from '@base-ui/react/select';
 import clsx from 'clsx';
 import { ChevronDownIcon } from '../icons/ChevronDownIcon';
-import { ThickCheckIcon } from '../icons/ThickCheckIcon';
+import { CheckIcon } from '../icons/CheckIcon';
 import './Select.css';
 
 export const Root = Select.Root;
@@ -33,7 +33,7 @@ export function Popup({ children, className, ...props }: Select.Positioner.Props
 export function Item({ children, className, ...props }: Select.Item.Props) {
   return (
     <Select.Item className={clsx('SelectItem', className)} {...props}>
-      <Select.ItemIndicator className="SelectItemIndicator" render={<ThickCheckIcon />} />
+      <Select.ItemIndicator className="SelectItemIndicator" render={<CheckIcon />} />
       <Select.ItemText className="SelectItemText">{children}</Select.ItemText>
     </Select.Item>
   );
diff --git a/docs/src/icons/CheckIcon.tsx b/docs/src/icons/CheckIcon.tsx
index 82d21412ec2..91bb508ba09 100644
--- a/docs/src/icons/CheckIcon.tsx
+++ b/docs/src/icons/CheckIcon.tsx
@@ -1,11 +1,18 @@
-export function CheckIcon() {
+import * as React from 'react';
+
+export function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
-      <path
-        d="M0.833008 4.64229L3.8336 8.12297L9.53471 1.50968"
-        stroke="currentColor"
-        strokeWidth="1.25"
-      />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="m3 9 3.5 3.5 6.5-9" />
     </svg>
   );
 }
diff --git a/docs/src/icons/ThickCheckIcon.tsx b/docs/src/icons/ThickCheckIcon.tsx
deleted file mode 100644
index e9d6450a584..00000000000
--- a/docs/src/icons/ThickCheckIcon.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react';
-
-export function ThickCheckIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg fill="currentColor" width="12" height="12" viewBox="0 0 10 10" {...props}>
-      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
-    </svg>
-  );
-}

From fbbdfcf777a5562ffd807c3d54fd4e64b912ec3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 01:16:51 +0200
Subject: [PATCH 214/257] New magnifying glass icon

---
 docs/src/components/Search/SearchBar.tsx |  7 ++++---
 docs/src/icons/MagnifyingGlassIcon.tsx   | 19 +++++++++++++++++++
 2 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 docs/src/icons/MagnifyingGlassIcon.tsx

diff --git a/docs/src/components/Search/SearchBar.tsx b/docs/src/components/Search/SearchBar.tsx
index c0bea0adf87..13576581e1c 100644
--- a/docs/src/components/Search/SearchBar.tsx
+++ b/docs/src/components/Search/SearchBar.tsx
@@ -13,8 +13,9 @@ import { Button } from '@base-ui/react/button';
 import { Dialog } from '@base-ui/react/dialog';
 import { ScrollArea } from '@base-ui/react/scroll-area';
 import { isMac } from '@base-ui/utils/detectBrowser';
-import { CornerDownLeft, Search } from 'lucide-react';
+import { CornerDownLeft } from 'lucide-react';
 import { useGoogleAnalytics } from 'docs/src/blocks/GoogleAnalyticsProvider';
+import { MagnifyingGlassIcon } from 'docs/src/icons/MagnifyingGlassIcon';
 import { stringToUrl } from '../QuickNav/rehypeSlug.mjs';
 import './SearchBar.css';
 
@@ -321,7 +322,7 @@ export function SearchBar({
   const searchInput = React.useMemo(
     () => (
       <div className="SearchInputRoot">
-        <Search className="SearchInputIcon" />
+        <MagnifyingGlassIcon className="SearchInputIcon" />
         <Autocomplete.Input
           id="search-input"
           ref={inputRef}
@@ -371,7 +372,7 @@ export function SearchBar({
   return (
     <React.Fragment>
       <Button onClick={handleOpenDialog} aria-label="Search" className={`SearchTrigger`}>
-        <Search className="SearchTriggerIcon" />
+        <MagnifyingGlassIcon className="SearchTriggerIcon" />
         <div className="SearchTriggerKbd">
           {showCmdSymbol ? (
             <kbd className="SearchTriggerCmd">⌘</kbd>
diff --git a/docs/src/icons/MagnifyingGlassIcon.tsx b/docs/src/icons/MagnifyingGlassIcon.tsx
new file mode 100644
index 00000000000..0a321fa5299
--- /dev/null
+++ b/docs/src/icons/MagnifyingGlassIcon.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+export function MagnifyingGlassIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="m10.5 10.5 4 4" />
+      <circle cx="6.5" cy="6.5" r="5" />
+    </svg>
+  );
+}

From df6a63ab604f158beeb5be76a4b7c240f10e1342 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 01:20:37 +0200
Subject: [PATCH 215/257] New caret down icon

---
 docs/src/components/Select.tsx     |  4 ++--
 docs/src/icons/CaretDownIcon.tsx   | 15 +++++++++++++++
 docs/src/icons/ChevronDownIcon.tsx |  9 ---------
 3 files changed, 17 insertions(+), 11 deletions(-)
 create mode 100644 docs/src/icons/CaretDownIcon.tsx
 delete mode 100644 docs/src/icons/ChevronDownIcon.tsx

diff --git a/docs/src/components/Select.tsx b/docs/src/components/Select.tsx
index 3f8f939ccd0..8c940bf76ac 100644
--- a/docs/src/components/Select.tsx
+++ b/docs/src/components/Select.tsx
@@ -1,6 +1,6 @@
 import { Select } from '@base-ui/react/select';
 import clsx from 'clsx';
-import { ChevronDownIcon } from '../icons/ChevronDownIcon';
+import { CaretDownIcon } from '../icons/CaretDownIcon';
 import { CheckIcon } from '../icons/CheckIcon';
 import './Select.css';
 
@@ -15,7 +15,7 @@ export function Trigger({ className, children, ...props }: TriggerProps) {
     // Implicitly relying on <GhostButton>, keep it in sync
     <Select.Trigger data-layout="text" className="GhostButton" type={undefined} {...props}>
       <Select.Value>{children}</Select.Value>
-      <Select.Icon render={<ChevronDownIcon className="bui-ml--0.5" />} />
+      <Select.Icon render={<CaretDownIcon className="bui-ml--0.5" />} />
     </Select.Trigger>
   );
 }
diff --git a/docs/src/icons/CaretDownIcon.tsx b/docs/src/icons/CaretDownIcon.tsx
new file mode 100644
index 00000000000..75059370a66
--- /dev/null
+++ b/docs/src/icons/CaretDownIcon.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+export function CaretDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      {...props}
+    >
+      <path d="M12 6H4l4 4.5z" />
+    </svg>
+  );
+}
diff --git a/docs/src/icons/ChevronDownIcon.tsx b/docs/src/icons/ChevronDownIcon.tsx
deleted file mode 100644
index 8ee99b3cf42..00000000000
--- a/docs/src/icons/ChevronDownIcon.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react';
-
-export function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
-      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" />
-    </svg>
-  );
-}

From 7c285c6d78e93b3b7dd80e87af86949022882010 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 08:39:10 +0200
Subject: [PATCH 216/257] Prettier

---
 docs/src/icons/CaretDownIcon.tsx | 8 +-------
 docs/src/icons/NpmIcon.tsx       | 6 +-----
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/docs/src/icons/CaretDownIcon.tsx b/docs/src/icons/CaretDownIcon.tsx
index 75059370a66..c0a58e8f592 100644
--- a/docs/src/icons/CaretDownIcon.tsx
+++ b/docs/src/icons/CaretDownIcon.tsx
@@ -2,13 +2,7 @@ import * as React from 'react';
 
 export function CaretDownIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="currentColor"
-      {...props}
-    >
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
       <path d="M12 6H4l4 4.5z" />
     </svg>
   );
diff --git a/docs/src/icons/NpmIcon.tsx b/docs/src/icons/NpmIcon.tsx
index a7ba0c1a2e6..1d4679e7baa 100644
--- a/docs/src/icons/NpmIcon.tsx
+++ b/docs/src/icons/NpmIcon.tsx
@@ -3,11 +3,7 @@ import * as React from 'react';
 export function NpmIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M1 1h14v14H1zM4 4h8v8H4zM7.5 6h3v6h-3z"
-      />
+      <path fillRule="evenodd" clipRule="evenodd" d="M1 1h14v14H1zM4 4h8v8H4zM7.5 6h3v6h-3z" />
     </svg>
   );
 }

From bdb4228343f07091b64ed08b8830994aa29a330b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 09:10:00 +0200
Subject: [PATCH 217/257] NavigationMenu: undo some transition related changes

---
 .../demos/async/css-modules/index.module.css     |  2 +-
 .../autocomplete/demos/async/tailwind/index.tsx  |  2 +-
 .../demos/hero/css-modules/index.module.css      |  8 ++++----
 .../demos/hero/tailwind/index.tsx                | 10 +++++-----
 .../nested-inline/css-modules/index.module.css   | 15 +++++++++++----
 .../demos/nested-inline/tailwind/index.tsx       | 16 ++++++++--------
 .../demos/nested/css-modules/index.module.css    |  8 ++++----
 .../demos/nested/tailwind/index.tsx              | 16 ++++++++--------
 8 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
index 5dc5419ef35..fb230f743bc 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
@@ -82,7 +82,7 @@
 
 .Viewport {
   box-sizing: border-box;
-  max-height: min(var(--available-height), 23rem);
+  max-height: min(var(--available-height), 22.5rem);
   padding-block: 0.25rem;
   overflow-y: auto;
   overscroll-behavior: contain;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
index f1917f83ac3..496b926ab7d 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
@@ -91,7 +91,7 @@ export default function ExampleAsyncAutocomplete() {
             className="w-[var(--anchor-width)] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-busy={isPending || undefined}
           >
-            <div className="max-h-[min(var(--available-height),23rem)] overflow-y-auto overscroll-contain py-1 scroll-pt-1 scroll-pb-1">
+            <div className="max-h-[min(var(--available-height),22.5rem)] overflow-y-auto overscroll-contain py-1 scroll-pt-1 scroll-pb-1">
               <Autocomplete.Status>
                 {status && (
                   <div className="flex items-center gap-2 py-1 pr-8 pl-2 text-sm text-neutral-500 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
index d1621a18a54..1a75dc80548 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
@@ -77,7 +77,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: transform 150ms ease;
+  transition: transform 0.2s ease;
 
   &[data-popup-open] {
     transform: rotate(180deg);
@@ -85,8 +85,8 @@
 }
 
 .Positioner {
-  --easing: ease-out;
-  --duration: 160ms;
+  --easing: cubic-bezier(0.22, 1, 0.36, 1);
+  --duration: 0.35s;
   box-sizing: border-box;
   transition-property: top, left, right, bottom;
   transition-duration: var(--duration);
@@ -159,7 +159,7 @@
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.98);
+    transform: scale(0.9);
   }
 
   &[data-ending-style] {
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
index 741c0672189..2ebd824692c 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleNavigationMenu() {
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
             Overview
-            <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
+            <NavigationMenu.Icon className="transition-transform duration-200 ease-[ease] data-popup-open:rotate-180">
               <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
@@ -32,7 +32,7 @@ export default function ExampleNavigationMenu() {
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
             Handbook
-            <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
+            <NavigationMenu.Icon className="transition-transform duration-200 ease-[ease] data-popup-open:rotate-180">
               <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
@@ -67,11 +67,11 @@ export default function ExampleNavigationMenu() {
           collisionAvoidance={{ side: 'none' }}
           className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
           style={{
-            ['--duration' as string]: '160ms',
-            ['--easing' as string]: 'ease-out',
+            ['--duration' as string]: '0.35s',
+            ['--easing' as string]: 'cubic-bezier(0.22, 1, 0.36, 1)',
           }}
         >
-          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-90 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
index b2e95c36ac4..126050b8953 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
@@ -77,7 +77,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: transform 150ms ease;
+  transition: transform 0.2s ease;
 
   &[data-popup-open] {
     transform: rotate(180deg);
@@ -85,8 +85,8 @@
 }
 
 .Positioner {
-  --easing: ease-out;
-  --duration: 160ms;
+  --easing: cubic-bezier(0.22, 1, 0.36, 1);
+  --duration: 0.35s;
   box-sizing: border-box;
   transition-property: top, left, right, bottom;
   transition-duration: var(--duration);
@@ -159,10 +159,11 @@
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.98);
+    transform: scale(0.9);
   }
 
   &[data-ending-style] {
+    transition-property: opacity, transform;
     transition-timing-function: ease;
     transition-duration: 0.15s;
   }
@@ -398,6 +399,7 @@
 
   @media (min-width: 700px) {
     transform: translateY(0);
+    filter: blur(0);
     transition-duration: calc(var(--duration) * 1.35);
     transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 
@@ -420,6 +422,11 @@
         transform: translateY(-72px);
       }
     }
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      filter: blur(2px);
+    }
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
index b615ee6f183..4553911a97a 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/tailwind/index.tsx
@@ -13,7 +13,7 @@ export default function ExampleNavigationMenu() {
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
             Product
-            <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
+            <NavigationMenu.Icon className="transition-transform duration-200 ease-[ease] data-popup-open:rotate-180">
               <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
@@ -68,7 +68,7 @@ export default function ExampleNavigationMenu() {
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
             Learn
-            <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
+            <NavigationMenu.Icon className="transition-transform duration-200 ease-[ease] data-popup-open:rotate-180">
               <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
@@ -117,11 +117,11 @@ export default function ExampleNavigationMenu() {
           collisionAvoidance={{ side: 'none' }}
           className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
           style={{
-            ['--duration' as string]: '160ms',
-            ['--easing' as string]: 'ease-out',
+            ['--duration' as string]: '0.35s',
+            ['--easing' as string]: 'cubic-bezier(0.22, 1, 0.36, 1)',
           }}
         >
-          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-ending-style:transition-[opacity,scale] data-starting-style:scale-90 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>
@@ -181,11 +181,11 @@ const submenuTriggerClassName =
   'm-0 flex w-full min-w-[10rem] flex-col items-start gap-1 border-0 bg-transparent p-2 text-left text-inherit hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
 
 const submenuContentClassName =
-  'flex h-full translate-x-0 flex-col gap-4 p-4 transition-[opacity,translate,filter] duration-[var(--duration)] ease-[var(--easing)] min-[700px]:duration-[calc(var(--duration)*1.35)] min-[700px]:ease-[cubic-bezier(0.16,1,0.3,1)] ' +
+  'flex h-full translate-x-0 flex-col gap-4 p-4 min-[700px]:blur-0 transition-[opacity,translate,filter] duration-[var(--duration)] ease-[var(--easing)] min-[700px]:duration-[calc(var(--duration)*1.35)] min-[700px]:ease-[cubic-bezier(0.16,1,0.3,1)] ' +
   'data-starting-style:data-[activation-direction=left]:opacity-0 data-starting-style:data-[activation-direction=right]:opacity-0 data-starting-style:data-[activation-direction=left]:translate-x-[-50%] data-starting-style:data-[activation-direction=right]:translate-x-[50%] ' +
   'data-ending-style:opacity-0 data-ending-style:data-[activation-direction=left]:translate-x-[50%] data-ending-style:data-[activation-direction=right]:translate-x-[-50%] ' +
-  'min-[700px]:data-starting-style:data-[activation-direction=up]:opacity-0 min-[700px]:data-starting-style:data-[activation-direction=down]:opacity-0 min-[700px]:data-starting-style:data-[activation-direction=up]:translate-y-[-72px] min-[700px]:data-starting-style:data-[activation-direction=down]:translate-y-[72px] ' +
-  'min-[700px]:data-ending-style:data-[activation-direction=up]:translate-y-[72px] min-[700px]:data-ending-style:data-[activation-direction=down]:translate-y-[-72px]';
+  'min-[700px]:data-starting-style:data-[activation-direction=up]:opacity-0 min-[700px]:data-starting-style:data-[activation-direction=down]:opacity-0 min-[700px]:data-starting-style:data-[activation-direction=up]:translate-y-[-72px] min-[700px]:data-starting-style:data-[activation-direction=down]:translate-y-[72px] min-[700px]:data-starting-style:blur-[2px] ' +
+  'min-[700px]:data-ending-style:data-[activation-direction=up]:translate-y-[72px] min-[700px]:data-ending-style:data-[activation-direction=down]:translate-y-[-72px] min-[700px]:data-ending-style:blur-[2px]';
 
 const linkCardClassName =
   'relative block h-full w-full border-0 bg-transparent p-2 text-left text-inherit no-underline hover:bg-neutral-100 data-popup-open:bg-neutral-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:hover:bg-neutral-800 dark:data-popup-open:bg-neutral-800';
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
index edaa086729e..c7400498157 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
@@ -77,7 +77,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: transform 150ms ease;
+  transition: transform 0.2s ease;
 
   &[data-popup-open] {
     transform: rotate(180deg);
@@ -85,8 +85,8 @@
 }
 
 .Positioner {
-  --easing: ease-out;
-  --duration: 160ms;
+  --easing: cubic-bezier(0.22, 1, 0.36, 1);
+  --duration: 0.35s;
   box-sizing: border-box;
   transition-property: top, left, right, bottom;
   transition-duration: var(--duration);
@@ -159,7 +159,7 @@
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.98);
+    transform: scale(0.9);
   }
 
   &[data-ending-style] {
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
index 8926ca5c622..780c3aaa967 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleNavigationMenu() {
         <NavigationMenu.Item>
           <NavigationMenu.Trigger className={triggerClassName}>
             Overview
-            <NavigationMenu.Icon className="transition-transform duration-150 ease-[ease] data-popup-open:rotate-180">
+            <NavigationMenu.Icon className="transition-transform duration-200 ease-[ease] data-popup-open:rotate-180">
               <CaretDownIcon />
             </NavigationMenu.Icon>
           </NavigationMenu.Trigger>
@@ -33,7 +33,7 @@ export default function ExampleNavigationMenu() {
                       <p className="m-0 text-sm text-neutral-500 dark:text-neutral-400">
                         How to use Base UI effectively.
                       </p>
-                      <NavigationMenu.Icon className="absolute top-1/2 right-2.5 flex -translate-y-1/2 items-center justify-center transition-transform duration-200 ease-in-out data-popup-open:rotate-180">
+                      <NavigationMenu.Icon className="absolute top-1/2 right-2.5 flex -translate-y-1/2 items-center justify-center transition-transform duration-200 ease-[ease] data-popup-open:rotate-180">
                         <CaretRightIcon />
                       </NavigationMenu.Icon>
                     </NavigationMenu.Trigger>
@@ -63,11 +63,11 @@ export default function ExampleNavigationMenu() {
                       side="right"
                       className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
                       style={{
-                        ['--duration' as string]: '160ms',
-                        ['--easing' as string]: 'ease-out',
+                        ['--duration' as string]: '0.35s',
+                        ['--easing' as string]: 'cubic-bezier(0.22, 1, 0.36, 1)',
                       }}
                     >
-                      <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+                      <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-90 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
                         <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
                       </NavigationMenu.Popup>
                     </NavigationMenu.Positioner>
@@ -85,11 +85,11 @@ export default function ExampleNavigationMenu() {
           collisionPadding={{ top: 5, bottom: 5, left: 20, right: 20 }}
           className="h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5"
           style={{
-            ['--duration' as string]: '160ms',
-            ['--easing' as string]: 'ease-out',
+            ['--duration' as string]: '0.35s',
+            ['--easing' as string]: 'cubic-bezier(0.22, 1, 0.36, 1)',
           }}
         >
-          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <NavigationMenu.Popup className="relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[opacity,transform,width,height,scale] duration-[var(--duration)] ease-[var(--easing)] data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease] data-starting-style:scale-90 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <NavigationMenu.Arrow className="relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-[var(--duration)] ease-[var(--easing)] before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-neutral-950 before:bg-white before:content-[''] data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 dark:before:border-white dark:before:bg-neutral-950" />
             <NavigationMenu.Viewport className="relative h-full w-full overflow-hidden" />
           </NavigationMenu.Popup>

From ae6feed7307fb8af19c9941d2244cec3a64f39ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 09:10:55 +0200
Subject: [PATCH 218/257] Select: remove padding from last group

---
 .../select/demos/grouped/css-modules/index.module.css         | 4 ++++
 .../react/components/select/demos/grouped/tailwind/index.tsx  | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index 0ac3ef18bac..3468eb87d5d 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -153,6 +153,10 @@
 .Group {
   display: block;
   padding-bottom: 0.125rem;
+
+  &:last-child {
+    padding-bottom: 0;
+  }
 }
 
 .GroupLabel {
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index d57642d4891..5044424cd33 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -31,7 +31,7 @@ export default function ExampleSelectGrouped() {
               <Select.List className="relative py-1 scroll-pt-6 scroll-pb-6 overflow-y-auto max-h-[var(--available-height)]">
                 {groupedProduce.map((group, index) => (
                   <React.Fragment key={group.value}>
-                    <Select.Group className="block pb-0.5">
+                    <Select.Group className="block pb-0.5 last:pb-0">
                       <Select.GroupLabel className="py-1.5 pr-4 pl-[1.875rem] text-sm leading-5 text-neutral-500 select-none dark:text-neutral-400">
                         {group.value}
                       </Select.GroupLabel>

From d368b6fd0dd29f0a2c2a576ac11152b61825937d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 09:21:01 +0200
Subject: [PATCH 219/257] Autocomplete / Combobox: fix popup height

---
 .../demos/auto-highlight/css-modules/index.module.css         | 4 ++--
 .../autocomplete/demos/auto-highlight/tailwind/index.tsx      | 4 ++--
 .../autocomplete/demos/hero/css-modules/index.module.css      | 4 ++--
 .../components/autocomplete/demos/hero/tailwind/index.tsx     | 4 ++--
 .../autocomplete/demos/inline/css-modules/index.module.css    | 4 ++--
 .../components/autocomplete/demos/inline/tailwind/index.tsx   | 4 ++--
 .../autocomplete/demos/limit/css-modules/index.module.css     | 2 +-
 .../components/autocomplete/demos/limit/tailwind/index.tsx    | 2 +-
 .../demos/virtualized/css-modules/index.module.css            | 4 ++--
 .../autocomplete/demos/virtualized/tailwind/index.tsx         | 4 ++--
 .../demos/async-multiple/css-modules/index.module.css         | 2 +-
 .../combobox/demos/async-multiple/tailwind/index.tsx          | 2 +-
 .../combobox/demos/async-single/css-modules/index.module.css  | 2 +-
 .../components/combobox/demos/async-single/tailwind/index.tsx | 2 +-
 .../combobox/demos/creatable/css-modules/index.module.css     | 2 +-
 .../components/combobox/demos/creatable/tailwind/index.tsx    | 2 +-
 .../combobox/demos/grouped/css-modules/index.module.css       | 4 ++--
 .../components/combobox/demos/grouped/tailwind/index.tsx      | 4 ++--
 .../combobox/demos/hero/css-modules/index.module.css          | 4 ++--
 .../react/components/combobox/demos/hero/tailwind/index.tsx   | 4 ++--
 .../demos/input-inside-popup/css-modules/index.module.css     | 4 ++--
 .../combobox/demos/input-inside-popup/tailwind/index.tsx      | 4 ++--
 .../combobox/demos/multiple/css-modules/index.module.css      | 2 +-
 .../components/combobox/demos/multiple/tailwind/index.tsx     | 2 +-
 .../combobox/demos/virtualized/css-modules/index.module.css   | 4 ++--
 .../components/combobox/demos/virtualized/tailwind/index.tsx  | 4 ++--
 .../react/handbook/forms/demos/components/autocomplete.tsx    | 4 ++--
 .../(docs)/react/handbook/forms/demos/components/combobox.tsx | 4 ++--
 28 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
index 58af7248d70..11a28748c95 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
@@ -66,7 +66,7 @@
   background-color: white;
   color: var(--color-neutral-950);
   width: var(--anchor-width);
-  max-height: 23rem;
+  max-height: 22.5rem;
   max-width: var(--available-width);
   overflow: clip;
   border: 1px solid var(--color-neutral-950);
@@ -87,7 +87,7 @@
   padding-block: 0.25rem;
   scroll-padding-block: 0.25rem;
   outline: 0;
-  max-height: min(23rem, var(--available-height));
+  max-height: min(22.5rem, var(--available-height));
 
   &[data-empty] {
     padding: 0;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
index 8ffd2377efa..54a055a1a47 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
@@ -14,13 +14,13 @@ export default function ExampleAutocompleteAutoHighlight() {
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[22.5rem] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
               <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No tags found.
               </div>
             </Autocomplete.Empty>
-            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.25rem] py-1 overscroll-contain max-h-[min(23rem,var(--available-height))] data-empty:p-0">
+            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.25rem] py-1 overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-empty:p-0">
               {(tag: Tag) => (
                 <Autocomplete.Item
                   key={tag.id}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
index 2764385c584..b4dba25c8b7 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
@@ -66,7 +66,7 @@
   background-color: white;
   color: var(--color-neutral-950);
   width: var(--anchor-width);
-  max-height: 23rem;
+  max-height: 22.5rem;
   max-width: var(--available-width);
   overflow: clip;
 
@@ -88,7 +88,7 @@
   padding-block: 0.25rem;
   scroll-padding-block: 0.25rem;
   outline: 0;
-  max-height: min(23rem, var(--available-height));
+  max-height: min(22.5rem, var(--available-height));
 
   &[data-empty] {
     padding: 0;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
index 03b4e3063fa..087f422a10f 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
@@ -14,13 +14,13 @@ export default function ExampleAutocomplete() {
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[22.5rem] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
               <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No tags found.
               </div>
             </Autocomplete.Empty>
-            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.25rem] py-1 overscroll-contain max-h-[min(23rem,var(--available-height))] data-empty:p-0">
+            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.25rem] py-1 overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-empty:p-0">
               {(tag: Tag) => (
                 <Autocomplete.Item
                   key={tag.id}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
index 18d510c4750..4b4c0dae6f8 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
@@ -76,7 +76,7 @@
   background-color: white;
   color: var(--color-neutral-950);
   width: var(--anchor-width);
-  max-height: 23rem;
+  max-height: 22.5rem;
   max-width: var(--available-width);
   overflow: clip;
 
@@ -98,7 +98,7 @@
   padding-block: 0.25rem;
   scroll-padding-block: 0.25rem;
   outline: 0;
-  max-height: min(23rem, var(--available-height));
+  max-height: min(22.5rem, var(--available-height));
 
   &[data-empty] {
     padding: 0;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
index 3cfe522208a..aeaae6b372e 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
@@ -14,8 +14,8 @@ export default function ExampleAutocompleteInline() {
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden data-empty:hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
-            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.25rem] py-1 overscroll-contain max-h-[min(23rem,var(--available-height))] data-empty:p-0">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[22.5rem] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.25rem] py-1 overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-empty:p-0">
               {(tag: Tag) => (
                 <Autocomplete.Item
                   key={tag.id}
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
index 02ba2f1a824..9e9202d08d5 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
@@ -67,7 +67,7 @@
   background-color: white;
   color: var(--color-neutral-950);
   width: var(--anchor-width);
-  max-height: min(var(--available-height), 23rem);
+  max-height: min(var(--available-height), 22.5rem);
   max-width: var(--available-width);
   overflow-y: auto;
   scroll-padding-block: 0.25rem;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
index c935723e261..d9084d083a1 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/tailwind/index.tsx
@@ -31,7 +31,7 @@ export default function ExampleAutocompleteLimit() {
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-1 scroll-pb-1 overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),22.5rem)] max-w-[var(--available-width)] overflow-y-auto scroll-pt-1 scroll-pb-1 overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
               <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No results found for "{value}"
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
index e066d5cda4f..a7a5b4029ca 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
@@ -58,7 +58,7 @@
   background-color: white;
   color: var(--color-neutral-950);
   width: var(--anchor-width);
-  max-height: min(22rem, var(--available-height));
+  max-height: min(22.5rem, var(--available-height));
   max-width: var(--available-width);
   overflow: clip;
   border: 1px solid var(--color-neutral-950);
@@ -74,7 +74,7 @@
 
 .Scroller {
   box-sizing: border-box;
-  height: min(22rem, var(--total-size));
+  height: min(22.5rem, var(--total-size));
   max-height: var(--available-height);
   overflow: auto;
   overscroll-behavior: contain;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
index aa25dd9c3a5..4f6a6dba545 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
@@ -37,7 +37,7 @@ export default function ExampleVirtualizedAutocomplete() {
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(22rem,var(--available-height))] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(22.5rem,var(--available-height))] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
               <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No items found.
@@ -95,7 +95,7 @@ function VirtualizedList({
     <div
       role="presentation"
       ref={handleScrollElementRef}
-      className="h-[min(22rem,var(--total-size))] max-h-[var(--available-height)] overflow-auto overscroll-contain scroll-py-1"
+      className="h-[min(22.5rem,var(--total-size))] max-h-[var(--available-height)] overflow-auto overscroll-contain scroll-py-1"
       style={{ '--total-size': `${totalSize}px` } as React.CSSProperties}
     >
       <div role="presentation" className="relative w-full" style={{ height: totalSize }}>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
index 5a48c274409..3167f1c00cd 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
@@ -215,7 +215,7 @@
 
 .Viewport {
   box-sizing: border-box;
-  max-height: min(var(--available-height), 24rem);
+  max-height: min(var(--available-height), 24.5rem);
   padding-block: 0.25rem;
   overflow-y: auto;
   overscroll-behavior: contain;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index af97c5096df..800e739efe5 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -179,7 +179,7 @@ export default function ExampleAsyncMultipleCombobox() {
             className="w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-busy={isPending || undefined}
           >
-            <div className="max-h-[min(var(--available-height),24rem)] overflow-y-auto overscroll-contain py-1 scroll-pt-1 scroll-pb-1">
+            <div className="max-h-[min(var(--available-height),24.5rem)] overflow-y-auto overscroll-contain py-1 scroll-pt-1 scroll-pb-1">
               <Combobox.Status>
                 {status ? (
                   <div className="flex items-center gap-2 py-1 pr-5 pl-2 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
index 7955a054024..b6bb3440d53 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
@@ -156,7 +156,7 @@
 
 .Viewport {
   box-sizing: border-box;
-  max-height: min(var(--available-height), 23rem);
+  max-height: min(var(--available-height), 22.5rem);
   padding-block: 0.25rem;
   overflow-y: auto;
   overscroll-behavior: contain;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index 11a0b5b6446..392e93776c1 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -142,7 +142,7 @@ export default function ExampleAsyncSingleCombobox() {
             className="w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:transition-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-busy={isPending || undefined}
           >
-            <div className="max-h-[min(var(--available-height),23rem)] overflow-y-auto overscroll-contain py-1 scroll-pt-1 scroll-pb-1">
+            <div className="max-h-[min(var(--available-height),22.5rem)] overflow-y-auto overscroll-contain py-1 scroll-pt-1 scroll-pb-1">
               <Combobox.Status>
                 {status ? (
                   <div className="flex items-center gap-2 py-1 pr-5 pl-2 text-sm leading-5 text-neutral-500 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
index 70f336549c4..0fe2d8f8aea 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
@@ -192,7 +192,7 @@
   color: var(--color-neutral-950);
   width: var(--anchor-width);
   max-width: var(--available-width);
-  max-height: min(var(--available-height), 24rem);
+  max-height: min(var(--available-height), 24.5rem);
   overflow-y: auto;
   scroll-padding-block: 0.25rem;
   overscroll-behavior: contain;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
index bffbffe63bb..12f1631f83d 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
@@ -164,7 +164,7 @@ export default function ExampleCreatableCombobox() {
 
         <Combobox.Portal>
           <Combobox.Positioner className="z-50 outline-none" sideOffset={4}>
-            <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24.5rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Combobox.Empty>
                 <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                   No labels found.
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
index efaadb54db7..c14ff3f20cb 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
@@ -125,7 +125,7 @@
   background-color: white;
   color: var(--color-neutral-950);
   width: var(--anchor-width);
-  max-height: 23rem;
+  max-height: 22.5rem;
   max-width: var(--available-width);
   transition:
     opacity 0.1s,
@@ -156,7 +156,7 @@
   padding-block: 0.25rem;
   scroll-padding-top: 0.25rem;
   scroll-padding-bottom: 0.25rem;
-  max-height: min(23rem, var(--available-height));
+  max-height: min(22.5rem, var(--available-height));
   outline: 0;
 }
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index 01737ee3966..a31b216a641 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -33,13 +33,13 @@ export default function ExampleGroupedCombobox() {
 
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
-          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[22.5rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Combobox.Empty>
               <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No produce found.
               </div>
             </Combobox.Empty>
-            <Combobox.List className="max-h-[min(23rem,var(--available-height))] overflow-auto overscroll-contain py-1 scroll-py-1 outline-0">
+            <Combobox.List className="max-h-[min(22.5rem,var(--available-height))] overflow-auto overscroll-contain py-1 scroll-py-1 outline-0">
               {(group: ProduceGroup) => (
                 <Combobox.Group key={group.value} items={group.items} className="block pb-2">
                   <Combobox.GroupLabel className="py-2 pr-2 pl-7 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
index 54c6f011d1d..6692c139a34 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
@@ -123,7 +123,7 @@
   background-color: white;
   color: var(--color-neutral-950);
   width: var(--anchor-width);
-  max-height: 23rem;
+  max-height: 22.5rem;
   max-width: var(--available-width);
   overflow: clip;
   transition:
@@ -155,7 +155,7 @@
   padding-block: 0.25rem;
   scroll-padding-block: 0.25rem;
   outline: 0;
-  max-height: min(23rem, var(--available-height));
+  max-height: min(22.5rem, var(--available-height));
 
   &[data-empty] {
     padding: 0;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
index 2290e8e6728..e95a35fbd33 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
@@ -33,13 +33,13 @@ export default function ExampleCombobox() {
 
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
-          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[23rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[22.5rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Combobox.Empty>
               <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No fruits found.
               </div>
             </Combobox.Empty>
-            <Combobox.List className="max-h-[min(23rem,var(--available-height))] overflow-y-auto overscroll-contain py-1 scroll-py-1 outline-0 data-empty:p-0">
+            <Combobox.List className="max-h-[min(22.5rem,var(--available-height))] overflow-y-auto overscroll-contain py-1 scroll-py-1 outline-0 data-empty:p-0">
               {(item: Fruit) => (
                 <Combobox.Item
                   key={item.value}
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
index 295382795de..3e6ef785ba7 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
@@ -168,7 +168,7 @@
     transform 150ms,
     opacity 150ms;
   max-width: var(--available-width);
-  max-height: 24rem;
+  max-height: 24.5rem;
 
   border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
@@ -194,7 +194,7 @@
   padding-block: 0.25rem;
   overscroll-behavior: contain;
   max-height: min(
-    calc(24rem - var(--input-container-height) - 2px),
+    calc(24.5rem - var(--input-container-height) - 2px),
     calc(var(--available-height) - var(--input-container-height) - 2px)
   );
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index 27b788b9449..358c4df58bd 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function ExamplePopoverCombobox() {
         <Combobox.Portal>
           <Combobox.Positioner align="start" sideOffset={4}>
             <Combobox.Popup
-              className="[--input-container-height:2rem] max-h-[24rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[transform,opacity] duration-150 data-starting-style:scale-90 data-starting-style:opacity-0 data-ending-style:scale-90 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+              className="[--input-container-height:2rem] max-h-[24.5rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[transform,opacity] duration-150 data-starting-style:scale-90 data-starting-style:opacity-0 data-ending-style:scale-90 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
               aria-label="Select country"
             >
               <div className="h-[var(--input-container-height)] w-80 bg-white text-center dark:bg-neutral-950">
@@ -32,7 +32,7 @@ export default function ExamplePopoverCombobox() {
                   No countries found.
                 </div>
               </Combobox.Empty>
-              <Combobox.List className="max-h-[min(calc(24rem-var(--input-container-height)-2px),calc(var(--available-height)-var(--input-container-height)-2px))] overflow-auto overscroll-contain py-1 scroll-py-1 empty:p-0">
+              <Combobox.List className="max-h-[min(calc(24.5rem-var(--input-container-height)-2px),calc(var(--available-height)-var(--input-container-height)-2px))] overflow-auto overscroll-contain py-1 scroll-py-1 empty:p-0">
                 {(country: Country) => (
                   <Combobox.Item
                     key={country.code}
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
index c41a0e1bfa9..34b1e471df3 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
@@ -205,7 +205,7 @@
   color: var(--color-neutral-950);
   width: var(--anchor-width);
   max-width: var(--available-width);
-  max-height: min(var(--available-height), 24rem);
+  max-height: min(var(--available-height), 24.5rem);
   overflow-y: auto;
   scroll-padding-block: 0.25rem;
   overscroll-behavior: contain;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
index d3f8e5de193..ba9a8a09222 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
@@ -48,7 +48,7 @@ export default function ExampleMultipleCombobox() {
 
       <Combobox.Portal>
         <Combobox.Positioner className="z-50 outline-none" sideOffset={4}>
-          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24.5rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Combobox.Empty>
               <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No languages found.
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
index 5834ef81724..f5690345b2d 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
@@ -58,7 +58,7 @@
   background-color: white;
   color: var(--color-neutral-950);
   width: var(--anchor-width);
-  max-height: min(22rem, var(--available-height));
+  max-height: min(22.5rem, var(--available-height));
   max-width: var(--available-width);
   overflow: clip;
   border: 1px solid var(--color-neutral-950);
@@ -74,7 +74,7 @@
 
 .Scroller {
   box-sizing: border-box;
-  height: min(22rem, var(--total-size));
+  height: min(22.5rem, var(--total-size));
   max-height: var(--available-height);
   overflow: auto;
   overscroll-behavior: contain;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
index 298f911ddd9..939eaecc5fa 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
@@ -39,7 +39,7 @@ export default function ExampleVirtualizedCombobox() {
 
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
-          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(22rem,var(--available-height))] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(22.5rem,var(--available-height))] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Combobox.Empty>
               <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No items found.
@@ -100,7 +100,7 @@ function VirtualizedList({
     <div
       role="presentation"
       ref={handleScrollElementRef}
-      className="h-[min(22rem,var(--total-size))] max-h-[var(--available-height)] overflow-auto overscroll-contain scroll-py-1"
+      className="h-[min(22.5rem,var(--total-size))] max-h-[var(--available-height)] overflow-auto overscroll-contain scroll-py-1"
       style={{ '--total-size': `${totalSize}px` } as React.CSSProperties}
     >
       <div role="presentation" className="relative w-full" style={{ height: totalSize }}>
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
index 30fbff99b41..d9c0d20e836 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
@@ -40,7 +40,7 @@ export function Popup({ className, ...props }: Autocomplete.Popup.Props) {
   return (
     <Autocomplete.Popup
       className={clsx(
-        'w-(--anchor-width) max-h-[23rem] max-w-(--available-width) overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none',
+        'w-(--anchor-width) max-h-[22.5rem] max-w-(--available-width) overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none',
         className,
       )}
       {...props}
@@ -52,7 +52,7 @@ export function List({ className, ...props }: Autocomplete.List.Props) {
   return (
     <Autocomplete.List
       className={clsx(
-        'max-h-[min(23rem,var(--available-height))] overflow-y-auto overscroll-contain py-1 scroll-py-1 outline-0 data-empty:p-0',
+        'max-h-[min(22.5rem,var(--available-height))] overflow-y-auto overscroll-contain py-1 scroll-py-1 outline-0 data-empty:p-0',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
index 48788ce8cd6..f6029fecd68 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
@@ -74,7 +74,7 @@ export function Popup({ className, ...props }: Combobox.Popup.Props) {
   return (
     <Combobox.Popup
       className={clsx(
-        'w-(--anchor-width) max-h-[23rem] max-w-(--available-width) origin-(--transform-origin) overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[opacity,transform] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none',
+        'w-(--anchor-width) max-h-[22.5rem] max-w-(--available-width) origin-(--transform-origin) overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[opacity,transform] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none',
         className,
       )}
       {...props}
@@ -103,7 +103,7 @@ export function List({ className, ...props }: Combobox.List.Props) {
   return (
     <Combobox.List
       className={clsx(
-        'outline-0 overflow-y-auto scroll-py-[0.25rem] py-1 overscroll-contain max-h-[min(23rem,var(--available-height))] data-empty:p-0',
+        'outline-0 overflow-y-auto scroll-py-[0.25rem] py-1 overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-empty:p-0',
         className,
       )}
       {...props}

From 649ff29c73a5c9f6d967b410c3af0a2050b20955 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 09:25:32 +0200
Subject: [PATCH 220/257] Autocomplete / Combobox: remove bottom padding from
 last group

---
 .../autocomplete/demos/grouped/css-modules/index.module.css   | 4 ++++
 .../components/autocomplete/demos/grouped/tailwind/index.tsx  | 2 +-
 .../combobox/demos/grouped/css-modules/index.module.css       | 4 ++++
 .../components/combobox/demos/grouped/tailwind/index.tsx      | 2 +-
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
index 66fc7cf8404..dae86046f43 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
@@ -99,6 +99,10 @@
 .Group {
   display: block;
   padding-bottom: 0.5rem;
+
+  &:last-child {
+    padding-bottom: 0;
+  }
 }
 
 .GroupLabel {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
index 31720cc4494..3d282ab627b 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
@@ -22,7 +22,7 @@ export default function ExampleGroupAutocomplete() {
             </Autocomplete.Empty>
             <Autocomplete.List className="outline-0 overflow-y-auto py-1 scroll-py-1 overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-empty:p-0">
               {(group: TagGroup) => (
-                <Autocomplete.Group key={group.value} items={group.items} className="block pb-2">
+                <Autocomplete.Group key={group.value} items={group.items} className="block pb-2 last:pb-0">
                   <Autocomplete.GroupLabel className="p-2 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
                     {group.value}
                   </Autocomplete.GroupLabel>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
index c14ff3f20cb..48d1ada92c5 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
@@ -163,6 +163,10 @@
 .Group {
   display: block;
   padding-bottom: 0.5rem;
+
+  &:last-child {
+    padding-bottom: 0;
+  }
 }
 
 .GroupLabel {
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index a31b216a641..be24337acda 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -41,7 +41,7 @@ export default function ExampleGroupedCombobox() {
             </Combobox.Empty>
             <Combobox.List className="max-h-[min(22.5rem,var(--available-height))] overflow-auto overscroll-contain py-1 scroll-py-1 outline-0">
               {(group: ProduceGroup) => (
-                <Combobox.Group key={group.value} items={group.items} className="block pb-2">
+                <Combobox.Group key={group.value} items={group.items} className="block pb-2 last:pb-0">
                   <Combobox.GroupLabel className="py-2 pr-2 pl-7 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
                     {group.value}
                   </Combobox.GroupLabel>

From e1704c0034e6a79e32f8b44f241ab649208f48ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 09:38:21 +0200
Subject: [PATCH 221/257] Update snapshot tests

---
 .../__snapshots__/mdxToMarkdown.test.mjs.snap | 110 +++++++++++-------
 1 file changed, 70 insertions(+), 40 deletions(-)

diff --git a/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap b/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap
index 5cb973da87e..80e73251564 100644
--- a/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap
+++ b/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap
@@ -23,9 +23,9 @@ export default function ExampleAccordion() {
     <Accordion.Root className="flex w-80 max-w-full flex-col border border-neutral-950 text-neutral-950 dark:border-white dark:text-white">
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             What is Base UI?
-            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
@@ -38,9 +38,9 @@ export default function ExampleAccordion() {
 
       <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             How do I get started?
-            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
@@ -53,9 +53,9 @@ export default function ExampleAccordion() {
 
       <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             Can I use it for my project?
-            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
@@ -68,9 +68,18 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
-      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
-      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
@@ -147,6 +156,7 @@ This example shows how to implement the component using CSS Modules.
   }
 
   &:focus-visible {
+    position: relative;
     outline: 2px solid var(--color-neutral-950);
     z-index: 1;
 
@@ -156,11 +166,7 @@ This example shows how to implement the component using CSS Modules.
   }
 }
 
-.TriggerIcon {
-  box-sizing: border-box;
-  flex-shrink: 0;
-  width: 0.75rem;
-  height: 0.75rem;
+.Icon {
   transition: transform 100ms ease-out;
 
   [data-panel-open] > & {
@@ -201,7 +207,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             What is Base UI?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -216,7 +222,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             How do I get started?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -231,7 +237,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             Can I use it for my project?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -244,9 +250,18 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
-      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
-      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
@@ -295,9 +310,9 @@ export default function ExampleAccordion() {
     >
       <Accordion.Item>
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             What is Base UI?
-            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
@@ -310,9 +325,9 @@ export default function ExampleAccordion() {
 
       <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             How do I get started?
-            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
@@ -325,9 +340,9 @@ export default function ExampleAccordion() {
 
       <Accordion.Item className="border-t border-neutral-950 dark:border-white">
         <Accordion.Header>
-          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
             Can I use it for my project?
-            <PlusIcon className="size-3 shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
@@ -340,9 +355,18 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
-      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
-      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }
@@ -419,6 +443,7 @@ This example shows how to implement the component using CSS Modules.
   }
 
   &:focus-visible {
+    position: relative;
     outline: 2px solid var(--color-neutral-950);
     z-index: 1;
 
@@ -428,11 +453,7 @@ This example shows how to implement the component using CSS Modules.
   }
 }
 
-.TriggerIcon {
-  box-sizing: border-box;
-  flex-shrink: 0;
-  width: 0.75rem;
-  height: 0.75rem;
+.Icon {
   transition: transform 100ms ease-out;
 
   [data-panel-open] > & {
@@ -473,7 +494,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             What is Base UI?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -488,7 +509,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             How do I get started?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -503,7 +524,7 @@ export default function ExampleAccordion() {
         <Accordion.Header className={styles.Header}>
           <Accordion.Trigger className={styles.Trigger}>
             Can I use it for my project?
-            <PlusIcon className={styles.TriggerIcon} />
+            <PlusIcon className={styles.Icon} />
           </Accordion.Trigger>
         </Accordion.Header>
         <Accordion.Panel className={styles.Panel}>
@@ -516,9 +537,18 @@ export default function ExampleAccordion() {
 
 function PlusIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg viewBox="0 0 12 12" fill="none" stroke="currentcolor" strokeWidth="1" {...props}>
-      <path d="M6 0.5V11.5" vectorEffect="non-scaling-stroke" />
-      <path d="M0.5 6H11.5" vectorEffect="non-scaling-stroke" />
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M1.5 8h13M8 14.5v-13" />
     </svg>
   );
 }

From 1ba540f4ff38262c7330b3945b8aa61ad9e29ff8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 09:55:24 +0200
Subject: [PATCH 222/257] Dialog: fix focus ring on inside scroll demo

---
 .../css-modules/index.module.css              | 31 +++++++++++--------
 .../demos/inside-scroll/tailwind/index.tsx    | 10 +++---
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
index de5e7a6f1ab..c3365bf99c0 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
@@ -157,7 +157,6 @@
   transition:
     transform 100ms ease-out,
     opacity 100ms ease-out;
-  overflow: hidden;
   min-height: 0;
 
   @media (prefers-color-scheme: dark) {
@@ -179,6 +178,11 @@
   flex-direction: column;
   gap: 0.25rem;
   padding: 1rem;
+  border-bottom: 1px solid var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    border-color: white;
+  }
 }
 
 .Title {
@@ -205,10 +209,14 @@
   display: flex;
   min-height: 0;
   overflow: hidden;
-  border-block: 1px solid var(--color-neutral-950);
 
-  @media (prefers-color-scheme: dark) {
-    border-block: 1px solid white;
+  &:has(.BodyViewport:focus-visible) {
+    outline: 2px solid var(--color-neutral-950);
+    outline-offset: 0;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
   }
 }
 
@@ -217,15 +225,7 @@
   flex: 1 1 auto;
   min-height: 0;
   overscroll-behavior: contain;
-
-  &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
-    outline-offset: 0;
-
-    @media (prefers-color-scheme: dark) {
-      outline-color: white;
-    }
-  }
+  outline: none;
 }
 
 .BodyContent {
@@ -264,4 +264,9 @@
   justify-content: flex-end;
   gap: 0.75rem;
   padding: 1rem;
+  border-top: 1px solid var(--color-neutral-950);
+
+  @media (prefers-color-scheme: dark) {
+    border-color: white;
+  }
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
index 15a78badca8..e661ef15918 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/tailwind/index.tsx
@@ -11,15 +11,15 @@ export default function InsideScrollDialog() {
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 data-starting-style:opacity-0 data-ending-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="fixed inset-0 flex items-center justify-center overflow-hidden py-6 [@media(min-height:600px)]:pb-12 [@media(min-height:600px)]:pt-8">
-          <Dialog.Popup className="relative flex w-[min(40rem,calc(100vw-2rem))] max-h-full max-w-full min-h-0 flex-col overflow-hidden bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-ending-style:scale-[0.98] data-ending-style:opacity-0">
-            <div className="flex flex-col gap-1 p-4">
+          <Dialog.Popup className="relative flex w-[min(40rem,calc(100vw-2rem))] max-h-full max-w-full min-h-0 flex-col bg-white dark:bg-neutral-950 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-ending-style:scale-[0.98] data-ending-style:opacity-0">
+            <div className="flex flex-col gap-1 p-4 border-b border-neutral-950 dark:border-white">
               <Dialog.Title className="text-base font-bold">Dialog</Dialog.Title>
               <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
                 This layout keeps the popup fully on screen while allowing its content to scroll.
               </Dialog.Description>
             </div>
-            <ScrollArea.Root className="relative flex min-h-0 flex-auto overflow-hidden border-y border-neutral-950 dark:border-white">
-              <ScrollArea.Viewport className="flex-auto min-h-0 overflow-y-auto overscroll-contain focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
+            <ScrollArea.Root className="relative flex min-h-0 flex-auto overflow-hidden has-[>_:first-child:focus-visible]:outline-2 has-[>_:first-child:focus-visible]:outline-offset-0 has-[>_:first-child:focus-visible]:outline-neutral-950 dark:has-[>_:first-child:focus-visible]:outline-white">
+              <ScrollArea.Viewport className="flex-auto min-h-0 overflow-y-auto overscroll-contain outline-none">
                 <ScrollArea.Content className="flex flex-col">
                   {CONTENT_SECTIONS.map((item) => (
                     <section className="flex flex-col gap-1 p-4" key={item.title}>
@@ -33,7 +33,7 @@ export default function InsideScrollDialog() {
                 <ScrollArea.Thumb className="w-full bg-neutral-950 dark:bg-white" />
               </ScrollArea.Scrollbar>
             </ScrollArea.Root>
-            <div className="flex justify-end gap-3 p-4">
+            <div className="flex justify-end gap-3 p-4 border-t border-neutral-950 dark:border-white">
               <Dialog.Close className="flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white">
                 Close
               </Dialog.Close>

From e32d23af4c1a7884cce513788670c969334a531e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 10:22:23 +0200
Subject: [PATCH 223/257] Prettier

---
 .../autocomplete/demos/grouped/tailwind/index.tsx           | 6 +++++-
 .../components/combobox/demos/grouped/tailwind/index.tsx    | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
index 3d282ab627b..085db9121bb 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
@@ -22,7 +22,11 @@ export default function ExampleGroupAutocomplete() {
             </Autocomplete.Empty>
             <Autocomplete.List className="outline-0 overflow-y-auto py-1 scroll-py-1 overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-empty:p-0">
               {(group: TagGroup) => (
-                <Autocomplete.Group key={group.value} items={group.items} className="block pb-2 last:pb-0">
+                <Autocomplete.Group
+                  key={group.value}
+                  items={group.items}
+                  className="block pb-2 last:pb-0"
+                >
                   <Autocomplete.GroupLabel className="p-2 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
                     {group.value}
                   </Autocomplete.GroupLabel>
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index be24337acda..21ad2065928 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -41,7 +41,11 @@ export default function ExampleGroupedCombobox() {
             </Combobox.Empty>
             <Combobox.List className="max-h-[min(22.5rem,var(--available-height))] overflow-auto overscroll-contain py-1 scroll-py-1 outline-0">
               {(group: ProduceGroup) => (
-                <Combobox.Group key={group.value} items={group.items} className="block pb-2 last:pb-0">
+                <Combobox.Group
+                  key={group.value}
+                  items={group.items}
+                  className="block pb-2 last:pb-0"
+                >
                   <Combobox.GroupLabel className="py-2 pr-2 pl-7 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
                     {group.value}
                   </Combobox.GroupLabel>

From 3cf8f3f13ca476456c4769fb053bb6200811b1bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 10:23:02 +0200
Subject: [PATCH 224/257] Autocomplete: increase contrast on secondary text

---
 .../autocomplete/demos/async/css-modules/index.module.css | 8 ++++++++
 .../autocomplete/demos/async/tailwind/index.tsx           | 4 ++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
index fb230f743bc..12ed1b1a91b 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
@@ -145,6 +145,14 @@
   @media (prefers-color-scheme: dark) {
     color: var(--color-neutral-400);
   }
+
+  .Item[data-highlighted] & {
+    color: var(--color-neutral-400);
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-neutral-500);
+    }
+  }
 }
 
 .Status {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
index 496b926ab7d..baac6f29fff 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
@@ -103,12 +103,12 @@ export default function ExampleAsyncAutocomplete() {
                 {(movie: Movie) => (
                   <Autocomplete.Item
                     key={movie.id}
-                    className="flex cursor-default py-2 pr-2 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
+                    className="group flex cursor-default py-2 pr-2 pl-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                     value={movie}
                   >
                     <span className="flex w-full flex-col gap-1">
                       <span className="font-bold leading-5">{movie.title}</span>
-                      <span className="text-sm leading-4 text-neutral-500 dark:text-neutral-400">
+                      <span className="text-sm leading-4 text-neutral-500 dark:text-neutral-400 group-data-highlighted:text-neutral-400 dark:group-data-highlighted:text-neutral-500">
                         {movie.year}
                       </span>
                     </span>

From 14ccd764a13ad7b50d758cd1f69e10090863fe39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 11:16:49 +0200
Subject: [PATCH 225/257] Combobox: fix creatable gap

---
 .../combobox/demos/creatable/css-modules/index.module.css     | 2 +-
 .../components/combobox/demos/creatable/tailwind/index.tsx    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
index 0fe2d8f8aea..67fc2e3f410 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
@@ -228,7 +228,7 @@
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
   font-size: 0.875rem;
   line-height: 1rem;
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
index 12f1631f83d..a4270986d26 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
@@ -175,7 +175,7 @@ export default function ExampleCreatableCombobox() {
                   item.creatable ? (
                     <Combobox.Item
                       key={item.id}
-                      className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-selected:relative data-selected:z-0 data-selected:text-neutral-950 data-selected:before:absolute data-selected:before:inset-0 data-selected:before:z-[-1] [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-white [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-950 dark:data-selected:text-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950 dark:[@media(hover:hover)]:data-highlighted:before:bg-white"
+                      className="grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-selected:relative data-selected:z-0 data-selected:text-neutral-950 data-selected:before:absolute data-selected:before:inset-0 data-selected:before:z-[-1] [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-white [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-950 dark:data-selected:text-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950 dark:[@media(hover:hover)]:data-highlighted:before:bg-white"
                       value={item}
                     >
                       <span className="col-start-1">
@@ -186,7 +186,7 @@ export default function ExampleCreatableCombobox() {
                   ) : (
                     <Combobox.Item
                       key={item.id}
-                      className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-selected:relative data-selected:z-0 data-selected:text-neutral-950 data-selected:before:absolute data-selected:before:inset-0 data-selected:before:z-[-1] [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-white [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-950 dark:data-selected:text-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950 dark:[@media(hover:hover)]:data-highlighted:before:bg-white"
+                      className="grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-selected:relative data-selected:z-0 data-selected:text-neutral-950 data-selected:before:absolute data-selected:before:inset-0 data-selected:before:z-[-1] [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-white [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-950 dark:data-selected:text-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950 dark:[@media(hover:hover)]:data-highlighted:before:bg-white"
                       value={item}
                     >
                       <Combobox.ItemIndicator className="col-start-1">

From 7db0ea4a488dac6d2b6ce38572ffbe071fae2cc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 11:29:01 +0200
Subject: [PATCH 226/257] Select: fix check icon column width

---
 .../select/demos/grouped/css-modules/index.module.css         | 4 ++--
 .../react/components/select/demos/grouped/tailwind/index.tsx  | 4 ++--
 .../components/select/demos/hero/css-modules/index.module.css | 4 ++--
 .../react/components/select/demos/hero/tailwind/index.tsx     | 4 ++--
 .../select/demos/multiple/css-modules/index.module.css        | 4 ++--
 .../react/components/select/demos/multiple/tailwind/index.tsx | 4 ++--
 .../select/demos/object-values/css-modules/index.module.css   | 4 ++--
 .../components/select/demos/object-values/tailwind/index.tsx  | 4 ++--
 8 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index 3468eb87d5d..e02e952c810 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -136,7 +136,7 @@
     transition: none;
     transform: translateY(1px);
     opacity: 1;
-    min-width: calc(var(--anchor-width) + 1.5rem);
+    min-width: calc(var(--anchor-width) + 1.75rem);
   }
 }
 
@@ -185,7 +185,7 @@
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
   cursor: default;
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index 5044424cd33..87a26159e64 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -24,7 +24,7 @@ export default function ExampleSelectGrouped() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={4}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1.5rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1.75rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[2] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
                 <CaretUpIcon />
               </Select.ScrollUpArrow>
@@ -39,7 +39,7 @@ export default function ExampleSelectGrouped() {
                         <Select.Item
                           key={item.value}
                           value={item.value}
-                          className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none group-data-[side=none]:pr-12 data-highlighted:bg-neutral-950 data-highlighted:text-white dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
+                          className="grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none group-data-[side=none]:pr-12 data-highlighted:bg-neutral-950 data-highlighted:text-white dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
                         >
                           <Select.ItemIndicator className="col-start-1">
                             <CheckIcon />
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
index f7c33daad92..99a8c88a5b0 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
@@ -136,7 +136,7 @@
     transition: none;
     transform: translateY(1px);
     opacity: 1;
-    min-width: calc(var(--anchor-width) + 1.5rem);
+    min-width: calc(var(--anchor-width) + 1.75rem);
   }
 }
 
@@ -160,7 +160,7 @@
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
   cursor: default;
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index f111d5a4631..4baaa54fde8 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -27,7 +27,7 @@ export default function ExampleSelect() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={4}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1.5rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1.75rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
                 <CaretUpIcon />
               </Select.ScrollUpArrow>
@@ -36,7 +36,7 @@ export default function ExampleSelect() {
                   <Select.Item
                     key={label}
                     value={value}
-                    className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none data-highlighted:bg-neutral-950 data-highlighted:text-white dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
+                    className="grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none data-highlighted:bg-neutral-950 data-highlighted:text-white dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
                   >
                     <Select.ItemIndicator className="col-start-1">
                       <CheckIcon />
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
index c0f449f97bf..d4f33be0502 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
@@ -138,7 +138,7 @@
     transition: none;
     transform: none;
     opacity: 1;
-    min-width: calc(var(--anchor-width) + 1.5rem);
+    min-width: calc(var(--anchor-width) + 1.75rem);
   }
 }
 
@@ -153,7 +153,7 @@
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
   cursor: default;
   user-select: none;
   scroll-margin-block: 0.25rem;
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index 743b0a4692c..e8e93af4420 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -50,12 +50,12 @@ export default function MultiSelectExample() {
             sideOffset={4}
             alignItemWithTrigger={false}
           >
-            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding overflow-y-auto border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1.5rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding overflow-y-auto border border-neutral-950 bg-white py-1 text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1.75rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               {values.map((value) => (
                 <Select.Item
                   key={value}
                   value={value}
-                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-2.5 pl-2.5 text-sm outline-hidden select-none scroll-my-1 [@media(hover:hover)]:data-highlighted:bg-neutral-950 [@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:bg-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950"
+                  className="grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 py-1.5 pr-2.5 pl-2.5 text-sm outline-hidden select-none scroll-my-1 [@media(hover:hover)]:data-highlighted:bg-neutral-950 [@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:bg-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950"
                 >
                   <Select.ItemIndicator className="col-start-1">
                     <CheckIcon />
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
index 60b278d7274..90a4e151587 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
@@ -151,7 +151,7 @@
     transition: none;
     transform: translateY(1px);
     opacity: 1;
-    min-width: calc(var(--anchor-width) + 1.5rem);
+    min-width: calc(var(--anchor-width) + 1.75rem);
   }
 }
 
@@ -175,7 +175,7 @@
   display: grid;
   gap: 0.5rem;
   align-items: flex-start;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
   cursor: default;
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index 011bd6dec4c..078f1f02018 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -26,7 +26,7 @@ export default function ObjectValueSelect() {
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner className="outline-hidden select-none z-10" sideOffset={4}>
-            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1.5rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group min-w-[var(--anchor-width)] origin-[var(--transform-origin)] bg-clip-padding border border-neutral-950 bg-white text-neutral-950 outline-hidden shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:translate-y-px data-[side=none]:min-w-[calc(var(--anchor-width)+1.75rem)] data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.ScrollUpArrow className="top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center bg-white text-center text-xs before:absolute data-[side=none]:before:top-[-100%] before:left-0 before:h-full before:w-full before:content-[''] dark:bg-neutral-950">
                 <CaretUpIcon />
               </Select.ScrollUpArrow>
@@ -35,7 +35,7 @@ export default function ObjectValueSelect() {
                   <Select.Item
                     key={method.id}
                     value={method}
-                    className="group/item grid cursor-default grid-cols-[0.75rem_1fr] items-start gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none [@media(hover:hover)]:data-highlighted:bg-neutral-950 [@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:bg-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950"
+                    className="group/item grid cursor-default grid-cols-[1rem_1fr] items-start gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-hidden select-none [@media(hover:hover)]:data-highlighted:bg-neutral-950 [@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:bg-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950"
                   >
                     <Select.ItemIndicator className="col-start-1 flex items-center justify-center self-start relative top-[0.4em]">
                       <CheckIcon />

From d15e767a36de679170ff5e7df545a7f8580a0280 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 11:39:18 +0200
Subject: [PATCH 227/257] Demo toolbar: replace Select caret icon and fix check
 icon size

---
 docs/src/components/Select.css                          | 4 ++--
 docs/src/components/Select.tsx                          | 4 ++--
 docs/src/icons/{CaretDownIcon.tsx => CaretSortIcon.tsx} | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)
 rename docs/src/icons/{CaretDownIcon.tsx => CaretSortIcon.tsx} (57%)

diff --git a/docs/src/components/Select.css b/docs/src/components/Select.css
index e701833e61a..0f64a3316f5 100644
--- a/docs/src/components/Select.css
+++ b/docs/src/components/Select.css
@@ -45,7 +45,7 @@
     z-index: 0;
 
     /* Spacing is built into the grid (it's a bit easier this way) */
-    grid-template-columns: 0.625rem 0.75rem 0.375rem auto 1.75rem;
+    grid-template-columns: 0.625rem 1rem 0.375rem auto 1.75rem;
 
     &[data-highlighted] {
       position: relative;
@@ -73,7 +73,7 @@
     @media (pointer: coarse) {
       font-size: var(--font-size-15);
       height: 2.25rem;
-      grid-template-columns: 0.5rem 0.75rem 0.5rem auto 1.5rem;
+      grid-template-columns: 0.5rem 1rem 0.5rem auto 1.5rem;
     }
   }
 
diff --git a/docs/src/components/Select.tsx b/docs/src/components/Select.tsx
index 8c940bf76ac..17d4227a4b6 100644
--- a/docs/src/components/Select.tsx
+++ b/docs/src/components/Select.tsx
@@ -1,6 +1,6 @@
 import { Select } from '@base-ui/react/select';
 import clsx from 'clsx';
-import { CaretDownIcon } from '../icons/CaretDownIcon';
+import { CaretSortIcon } from '../icons/CaretSortIcon';
 import { CheckIcon } from '../icons/CheckIcon';
 import './Select.css';
 
@@ -15,7 +15,7 @@ export function Trigger({ className, children, ...props }: TriggerProps) {
     // Implicitly relying on <GhostButton>, keep it in sync
     <Select.Trigger data-layout="text" className="GhostButton" type={undefined} {...props}>
       <Select.Value>{children}</Select.Value>
-      <Select.Icon render={<CaretDownIcon className="bui-ml--0.5" />} />
+      <Select.Icon render={<CaretSortIcon className="bui-ml--0.5" />} />
     </Select.Trigger>
   );
 }
diff --git a/docs/src/icons/CaretDownIcon.tsx b/docs/src/icons/CaretSortIcon.tsx
similarity index 57%
rename from docs/src/icons/CaretDownIcon.tsx
rename to docs/src/icons/CaretSortIcon.tsx
index c0a58e8f592..45b6ac29274 100644
--- a/docs/src/icons/CaretDownIcon.tsx
+++ b/docs/src/icons/CaretSortIcon.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 
-export function CaretDownIcon(props: React.ComponentProps<'svg'>) {
+export function CaretSortIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
-      <path d="M12 6H4l4 4.5z" />
+      <path d="M11 10H5l3 3.5zm0-4H5l3-3.5z" />
     </svg>
   );
 }

From 7916d57719b2d622bc121e1868e8004cd00254ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 11:41:22 +0200
Subject: [PATCH 228/257] Select / Combobox: fix check icon column size

---
 .../demos/async-multiple/css-modules/index.module.css       | 2 +-
 .../combobox/demos/async-multiple/tailwind/index.tsx        | 2 +-
 .../demos/async-single/css-modules/index.module.css         | 2 +-
 .../combobox/demos/async-single/tailwind/index.tsx          | 2 +-
 .../combobox/demos/creatable/css-modules/index.module.css   | 2 +-
 .../combobox/demos/grouped/css-modules/index.module.css     | 2 +-
 .../components/combobox/demos/grouped/tailwind/index.tsx    | 2 +-
 .../combobox/demos/hero/css-modules/index.module.css        | 2 +-
 .../react/components/combobox/demos/hero/tailwind/index.tsx | 2 +-
 .../demos/input-inside-popup/css-modules/index.module.css   | 2 +-
 .../combobox/demos/input-inside-popup/tailwind/index.tsx    | 2 +-
 .../combobox/demos/multiple/css-modules/index.module.css    | 2 +-
 .../components/combobox/demos/multiple/tailwind/index.tsx   | 2 +-
 .../combobox/demos/virtualized/css-modules/index.module.css | 2 +-
 .../combobox/demos/virtualized/tailwind/index.tsx           | 2 +-
 .../toolbar/demos/hero/css-modules/index.module.css         | 4 ++--
 .../react/components/toolbar/demos/hero/tailwind/index.tsx  | 6 +++---
 .../animated-select-motion/css-modules/index.module.css     | 4 ++--
 .../react/handbook/forms/demos/components/combobox.tsx      | 2 +-
 .../(docs)/react/handbook/forms/demos/components/select.tsx | 4 ++--
 20 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
index 3167f1c00cd..83f511a6ab6 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
@@ -276,7 +276,7 @@
   display: grid;
   gap: 0.5rem;
   align-items: flex-start;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
   font-size: 0.875rem;
   line-height: 1.2rem;
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index 800e739efe5..d146ec3bbd4 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -199,7 +199,7 @@ export default function ExampleAsyncMultipleCombobox() {
                   <Combobox.Item
                     key={user.id}
                     value={user}
-                    className="grid cursor-default grid-cols-[0.75rem_1fr] items-start gap-2 px-2 py-2 text-sm leading-[1.2rem] outline-none select-none [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-neutral-950 [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-100 dark:[@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:before:bg-neutral-800"
+                    className="grid cursor-default grid-cols-[1rem_1fr] items-start gap-2 px-2 py-2 text-sm leading-[1.2rem] outline-none select-none [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-neutral-950 [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-100 dark:[@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:before:bg-neutral-800"
                   >
                     <Combobox.ItemIndicator className="col-start-1 mt-1">
                       <CheckIcon />
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
index b6bb3440d53..5eefe01c6af 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
@@ -205,7 +205,7 @@
   display: grid;
   gap: 0.5rem;
   align-items: flex-start;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
   font-size: 0.875rem;
   line-height: 1.2rem;
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index 392e93776c1..54ab6c3b20d 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -162,7 +162,7 @@ export default function ExampleAsyncSingleCombobox() {
                   <Combobox.Item
                     key={user.id}
                     value={user}
-                    className="grid cursor-default grid-cols-[0.75rem_1fr] items-start gap-2 px-2 py-2 text-sm leading-[1.2rem] outline-none select-none [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-neutral-950 [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-100 dark:[@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:before:bg-neutral-800"
+                    className="grid cursor-default grid-cols-[1rem_1fr] items-start gap-2 px-2 py-2 text-sm leading-[1.2rem] outline-none select-none [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-neutral-950 [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-100 dark:[@media(hover:hover)]:data-highlighted:text-white dark:[@media(hover:hover)]:data-highlighted:before:bg-neutral-800"
                   >
                     <Combobox.ItemIndicator className="col-start-1 mt-1">
                       <CheckIcon />
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
index 67fc2e3f410..0d9ed90d8c6 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
@@ -297,7 +297,7 @@
   box-sizing: border-box;
   width: 100%;
   display: grid;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
   align-items: center;
   gap: 0.5rem;
   border: none;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
index 48d1ada92c5..8ca6d64fd38 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
@@ -189,7 +189,7 @@
   user-select: none;
   padding: 0.5rem;
   display: grid;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
   gap: 0.5rem;
   align-items: center;
   font-size: 0.875rem;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index 21ad2065928..d75b3afe29e 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -53,7 +53,7 @@ export default function ExampleGroupedCombobox() {
                     {(item: Produce) => (
                       <Combobox.Item
                         key={item.id}
-                        className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
+                        className="grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                         value={item}
                       >
                         <Combobox.ItemIndicator className="col-start-1 flex items-center justify-center">
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
index 6692c139a34..c0b5044bf64 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
@@ -173,7 +173,7 @@
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
   font-size: 0.875rem;
   line-height: 1rem;
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
index e95a35fbd33..3eae8bafc48 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
@@ -44,7 +44,7 @@ export default function ExampleCombobox() {
                 <Combobox.Item
                   key={item.value}
                   value={item}
-                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
+                  className="grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                 >
                   <Combobox.ItemIndicator className="col-start-1">
                     <CheckIcon />
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
index 3e6ef785ba7..7c81ccf51b5 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
@@ -215,7 +215,7 @@
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
   font-size: 0.875rem;
   line-height: 1rem;
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index 358c4df58bd..efb3198917a 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -37,7 +37,7 @@ export default function ExamplePopoverCombobox() {
                   <Combobox.Item
                     key={country.code}
                     value={country}
-                    className="grid min-w-[var(--anchor-width)] cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
+                    className="grid min-w-[var(--anchor-width)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
                   >
                     <Combobox.ItemIndicator className="col-start-1">
                       <CheckIcon />
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
index 34b1e471df3..f3fb2027c7f 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
@@ -241,7 +241,7 @@
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
   font-size: 0.875rem;
   line-height: 1rem;
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
index ba9a8a09222..d32d819d1bb 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
@@ -58,7 +58,7 @@ export default function ExampleMultipleCombobox() {
               {(language: ProgrammingLanguage) => (
                 <Combobox.Item
                   key={language.id}
-                  className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-selected:relative data-selected:z-0 data-selected:text-neutral-950 data-selected:before:absolute data-selected:before:inset-0 data-selected:before:z-[-1] [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-white [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-950 dark:data-selected:text-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950 dark:[@media(hover:hover)]:data-highlighted:before:bg-white"
+                  className="grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-selected:relative data-selected:z-0 data-selected:text-neutral-950 data-selected:before:absolute data-selected:before:inset-0 data-selected:before:z-[-1] [@media(hover:hover)]:data-highlighted:relative [@media(hover:hover)]:data-highlighted:z-0 [@media(hover:hover)]:data-highlighted:text-white [@media(hover:hover)]:data-highlighted:before:absolute [@media(hover:hover)]:data-highlighted:before:inset-0 [@media(hover:hover)]:data-highlighted:before:z-[-1] [@media(hover:hover)]:data-highlighted:before:bg-neutral-950 dark:data-selected:text-white dark:[@media(hover:hover)]:data-highlighted:text-neutral-950 dark:[@media(hover:hover)]:data-highlighted:before:bg-white"
                   value={language}
                 >
                   <Combobox.ItemIndicator className="col-start-1">
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
index f5690345b2d..50c52f15afd 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
@@ -102,7 +102,7 @@
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
   font-size: 0.875rem;
   line-height: 1rem;
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
index 939eaecc5fa..ef81a4963a6 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
@@ -117,7 +117,7 @@ function VirtualizedList({
               data-index={virtualItem.index}
               ref={virtualizer.measureElement}
               value={item}
-              className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
+              className="grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white"
               aria-setsize={filteredItems.length}
               aria-posinset={virtualItem.index + 1}
               style={{
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
index 4e0005cfd12..fa27f66ad81 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
@@ -193,7 +193,7 @@
     transition: none;
     transform: translateY(1px);
     opacity: 1;
-    min-width: calc(var(--anchor-width) + 1.5rem);
+    min-width: calc(var(--anchor-width) + 1.75rem);
   }
 }
 
@@ -208,7 +208,7 @@
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
   cursor: default;
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
index 3f931c20039..062731d0efd 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
@@ -53,10 +53,10 @@ export default function ExampleToolbar() {
         </Toolbar.Button>
         <Select.Portal>
           <Select.Positioner className="z-10 outline-none select-none" sideOffset={4}>
-            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto border border-neutral-950 bg-white bg-clip-padding text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1.5rem)] data-[side=none]:translate-y-px data-[side=none]:scale-100 data-[side=none]:opacity-100 data-[side=none]:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-starting-style:opacity-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Select.Popup className="group max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto border border-neutral-950 bg-white bg-clip-padding text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:min-w-[calc(var(--anchor-width)+1.75rem)] data-[side=none]:translate-y-px data-[side=none]:scale-100 data-[side=none]:opacity-100 data-[side=none]:transition-none data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-starting-style:opacity-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Select.Item
                 value="Helvetica"
-                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none data-highlighted:bg-neutral-950 data-highlighted:text-white pointer-coarse:py-2.5 dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
+                className="grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none data-highlighted:bg-neutral-950 data-highlighted:text-white pointer-coarse:py-2.5 dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
               >
                 <Select.ItemIndicator className="col-start-1">
                   <CheckIcon />
@@ -65,7 +65,7 @@ export default function ExampleToolbar() {
               </Select.Item>
               <Select.Item
                 value="Arial"
-                className="grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none data-highlighted:bg-neutral-950 data-highlighted:text-white pointer-coarse:py-2.5 dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
+                className="grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none data-highlighted:bg-neutral-950 data-highlighted:text-white pointer-coarse:py-2.5 dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950"
               >
                 <Select.ItemIndicator className="col-start-1">
                   <CheckIcon />
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
index d2eee9e8ab4..9ca803c4544 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
@@ -94,7 +94,7 @@
   }
 
   &[data-side='none'] {
-    min-width: calc(var(--anchor-width) + 1.5rem);
+    min-width: calc(var(--anchor-width) + 1.75rem);
   }
 }
 
@@ -166,7 +166,7 @@
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
   cursor: default;
   user-select: none;
 
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
index f6029fecd68..d5fd31540c9 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
@@ -115,7 +115,7 @@ export function Item({ className, ...props }: Combobox.Item.Props) {
   return (
     <Combobox.Item
       className={clsx(
-        'grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white',
+        'grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
index 46cad6fb505..a229ea031b4 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/select.tsx
@@ -64,7 +64,7 @@ export function Popup({ className, ...props }: Select.Popup.Props) {
   return (
     <Select.Popup
       className={clsx(
-        'group min-w-(--anchor-width) origin-(--transform-origin) border border-neutral-950 bg-white bg-clip-padding text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[side=none]:min-w-[calc(var(--anchor-width)+1.5rem)] data-[side=none]:translate-y-px data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none',
+        'group min-w-(--anchor-width) origin-(--transform-origin) border border-neutral-950 bg-white bg-clip-padding text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[scale,opacity] duration-100 ease-out data-[side=none]:min-w-[calc(var(--anchor-width)+1.75rem)] data-[side=none]:translate-y-px data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-[side=none]:data-ending-style:transition-none data-starting-style:scale-[0.98] 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:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none',
         className,
       )}
       {...props}
@@ -112,7 +112,7 @@ export function Item({ className, ...props }: Select.Item.Props) {
   return (
     <Select.Item
       className={clsx(
-        'grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none group-data-[side=none]:pr-12 data-highlighted:bg-neutral-950 data-highlighted:text-white dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950',
+        'grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none group-data-[side=none]:pr-12 data-highlighted:bg-neutral-950 data-highlighted:text-white dark:data-highlighted:bg-white dark:data-highlighted:text-neutral-950',
         className,
       )}
       {...props}

From 525797c0a1bab7be7aed0126519c2a5ff0893095 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 11:55:02 +0200
Subject: [PATCH 229/257] Combobox: fix scale transition

---
 .../autocomplete/demos/command-palette/tailwind/index.tsx       | 2 +-
 .../components/combobox/demos/async-multiple/tailwind/index.tsx | 2 +-
 .../components/combobox/demos/async-single/tailwind/index.tsx   | 2 +-
 .../components/combobox/demos/creatable/tailwind/index.tsx      | 2 +-
 .../react/components/combobox/demos/grouped/tailwind/index.tsx  | 2 +-
 .../react/components/combobox/demos/hero/tailwind/index.tsx     | 2 +-
 .../combobox/demos/input-inside-popup/tailwind/index.tsx        | 2 +-
 .../react/components/combobox/demos/multiple/tailwind/index.tsx | 2 +-
 .../(docs)/react/handbook/forms/demos/components/combobox.tsx   | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
index a3cf92495e6..6deff901766 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx
@@ -20,7 +20,7 @@ export default function ExampleAutocompleteCommandPalette() {
         <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-opacity duration-150 ease-[cubic-bezier(0.45,1.005,0,1.005)] data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-70 supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="fixed inset-0 flex items-start justify-center overflow-hidden px-2 pt-18 pb-2">
           <Dialog.Popup
-            className="relative flex max-h-[min(36rem,calc(100dvh-5rem))] w-[calc(100vw-1rem)] max-w-md flex-col border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[transform,opacity] duration-150 data-ending-style:-translate-y-4 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:-translate-y-4 data-starting-style:scale-95 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+            className="relative flex max-h-[min(36rem,calc(100dvh-5rem))] w-[calc(100vw-1rem)] max-w-md flex-col border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 transition-[translate,scale,opacity] duration-150 data-ending-style:-translate-y-4 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:-translate-y-4 data-starting-style:scale-95 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-label="Command palette"
           >
             <Autocomplete.Root
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index d146ec3bbd4..60e62937742 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -176,7 +176,7 @@ export default function ExampleAsyncMultipleCombobox() {
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
           <Combobox.Popup
-            className="w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+            className="w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[scale,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-busy={isPending || undefined}
           >
             <div className="max-h-[min(var(--available-height),24.5rem)] overflow-y-auto overscroll-contain py-1 scroll-pt-1 scroll-pb-1">
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index 54ab6c3b20d..0967008abc6 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -139,7 +139,7 @@ export default function ExampleAsyncSingleCombobox() {
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
           <Combobox.Popup
-            className="w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:transition-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+            className="w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[scale,opacity] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:transition-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-busy={isPending || undefined}
           >
             <div className="max-h-[min(var(--available-height),22.5rem)] overflow-y-auto overscroll-contain py-1 scroll-pt-1 scroll-pb-1">
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
index a4270986d26..51217a0ad9e 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
@@ -164,7 +164,7 @@ export default function ExampleCreatableCombobox() {
 
         <Combobox.Portal>
           <Combobox.Positioner className="z-50 outline-none" sideOffset={4}>
-            <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24.5rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+            <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24.5rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[scale,opacity] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
               <Combobox.Empty>
                 <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                   No labels found.
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index d75b3afe29e..b47d365b176 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -33,7 +33,7 @@ export default function ExampleGroupedCombobox() {
 
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
-          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[22.5rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[22.5rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[scale,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Combobox.Empty>
               <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No produce found.
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
index 3eae8bafc48..58bc244f975 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
@@ -33,7 +33,7 @@ export default function ExampleCombobox() {
 
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
-          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[22.5rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[22.5rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[scale,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Combobox.Empty>
               <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No fruits found.
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index efb3198917a..ad211c2ca5b 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -18,7 +18,7 @@ export default function ExamplePopoverCombobox() {
         <Combobox.Portal>
           <Combobox.Positioner align="start" sideOffset={4}>
             <Combobox.Popup
-              className="[--input-container-height:2rem] max-h-[24.5rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[transform,opacity] duration-150 data-starting-style:scale-90 data-starting-style:opacity-0 data-ending-style:scale-90 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+              className="[--input-container-height:2rem] max-h-[24.5rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[scale,opacity] duration-150 data-starting-style:scale-90 data-starting-style:opacity-0 data-ending-style:scale-90 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
               aria-label="Select country"
             >
               <div className="h-[var(--input-container-height)] w-80 bg-white text-center dark:bg-neutral-950">
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
index d32d819d1bb..f4457796216 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
@@ -48,7 +48,7 @@ export default function ExampleMultipleCombobox() {
 
       <Combobox.Portal>
         <Combobox.Positioner className="z-50 outline-none" sideOffset={4}>
-          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24.5rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[opacity,transform] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(var(--available-height),24.5rem)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-y-auto overscroll-contain border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[scale,opacity] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Combobox.Empty>
               <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No languages found.
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
index d5fd31540c9..d80e112b3aa 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
@@ -74,7 +74,7 @@ export function Popup({ className, ...props }: Combobox.Popup.Props) {
   return (
     <Combobox.Popup
       className={clsx(
-        'w-(--anchor-width) max-h-[22.5rem] max-w-(--available-width) origin-(--transform-origin) overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[opacity,transform] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none',
+        'w-(--anchor-width) max-h-[22.5rem] max-w-(--available-width) origin-(--transform-origin) overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none',
         className,
       )}
       {...props}

From a3b860408df98f3e725fc413faf40dbf4558a43e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 15:41:17 +0200
Subject: [PATCH 230/257] Switch: transition bg

---
 .../switch/demos/hero/css-modules/index.module.css           | 5 ++++-
 .../react/components/switch/demos/hero/tailwind/index.tsx    | 4 ++--
 .../(docs)/react/handbook/forms/demos/components/switch.tsx  | 4 ++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
index 45d9008f6b5..ae202e2b783 100644
--- a/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
@@ -21,6 +21,7 @@
   width: 2.25rem;
   height: 1.25rem;
   background-color: white;
+  transition: background-color 150ms ease;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
@@ -49,7 +50,9 @@
   width: 0.875rem;
   height: 0.875rem;
   background-color: var(--color-neutral-950);
-  transition: translate 150ms ease;
+  transition:
+    translate 150ms ease,
+    background-color 150ms ease;
 
   @media (prefers-color-scheme: dark) {
     background-color: white;
diff --git a/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
index df0e0473afa..7b4f0f59866 100644
--- a/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/switch/demos/hero/tailwind/index.tsx
@@ -5,9 +5,9 @@ export default function ExampleSwitch() {
     <label className="flex items-center gap-2 text-sm font-normal text-neutral-950 dark:text-white">
       <Switch.Root
         defaultChecked
-        className="flex h-5 w-9 shrink-0 border border-neutral-950 bg-white p-0.5 dark:border-white dark:bg-neutral-950 data-checked:bg-neutral-950 dark:data-checked:bg-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+        className="flex h-5 w-9 shrink-0 border border-neutral-950 bg-white p-0.5 transition-colors duration-150 dark:border-white dark:bg-neutral-950 data-checked:bg-neutral-950 dark:data-checked:bg-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
       >
-        <Switch.Thumb className="size-3.5 bg-neutral-950 transition-transform duration-150 data-checked:translate-x-4 data-checked:bg-white dark:bg-white dark:data-checked:bg-neutral-950" />
+        <Switch.Thumb className="size-3.5 bg-neutral-950 transition-transform transition-colors duration-150 data-checked:translate-x-4 data-checked:bg-white dark:bg-white dark:data-checked:bg-neutral-950" />
       </Switch.Root>
       Notifications
     </label>
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx
index 477a0d8ed5e..7be1c8ccc5b 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/switch.tsx
@@ -6,7 +6,7 @@ export function Root({ className, ...props }: Switch.Root.Props) {
   return (
     <Switch.Root
       className={clsx(
-        'flex h-5 w-9 shrink-0 border border-neutral-950 bg-white p-0.5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-checked:bg-neutral-950 dark:border-white dark:bg-neutral-950 dark:data-checked:bg-white',
+        'flex h-5 w-9 shrink-0 border border-neutral-950 bg-white p-0.5 transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-checked:bg-neutral-950 dark:border-white dark:bg-neutral-950 dark:data-checked:bg-white',
         className,
       )}
       {...props}
@@ -18,7 +18,7 @@ export function Thumb({ className, ...props }: Switch.Thumb.Props) {
   return (
     <Switch.Thumb
       className={clsx(
-        'size-3.5 bg-neutral-950 transition-transform duration-150 data-checked:translate-x-4 data-checked:bg-white dark:bg-white dark:data-checked:bg-neutral-950',
+        'size-3.5 bg-neutral-950 transition-transform transition-colors duration-150 data-checked:translate-x-4 data-checked:bg-white dark:bg-white dark:data-checked:bg-neutral-950',
         className,
       )}
       {...props}

From af5becaf02206317dab757bde5d67947727b8c25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 15:58:47 +0200
Subject: [PATCH 231/257] Tabs: fix focus ring on TW

---
 .../react/components/tabs/demos/hero/tailwind/index.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
index 33b78a025ad..9989b63060c 100644
--- a/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tabs/demos/hero/tailwind/index.tsx
@@ -1,10 +1,10 @@
 import { Tabs } from '@base-ui/react/tabs';
 
 const tabClassName =
-  'flex h-[calc(2rem+1px)] items-center justify-center bg-transparent px-2 py-0 font-inherit text-sm font-normal leading-5 break-keep whitespace-nowrap text-neutral-600 outline-none select-none hover:text-neutral-950 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-active:text-neutral-950 dark:text-neutral-300 dark:hover:text-white dark:data-active:text-white';
+  'flex h-[calc(2rem+1px)] items-center justify-center bg-transparent px-2 py-0 font-inherit text-sm font-normal leading-5 break-keep whitespace-nowrap text-neutral-600 outline-none select-none hover:text-neutral-950 focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-active:text-neutral-950 dark:text-neutral-300 dark:hover:text-white dark:data-active:text-white';
 
 const panelClassName =
-  'col-start-1 row-start-1 flex w-full items-center justify-center bg-white p-4 text-center text-sm text-neutral-950 outline-none focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:bg-neutral-950 dark:text-white [[hidden]]:hidden';
+  'col-start-1 row-start-1 flex w-full items-center justify-center bg-white p-4 text-center text-sm text-neutral-950 outline-none focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:bg-neutral-950 dark:text-white [[hidden]]:hidden';
 
 export default function ExampleTabs() {
   return (

From 9318f29072dfeed2bf61b9893e68f7d3865e356c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 16:02:45 +0200
Subject: [PATCH 232/257] Update icons

---
 .../checkbox-group/demos/hero/css-modules/index.tsx           | 2 +-
 .../components/checkbox-group/demos/hero/tailwind/index.tsx   | 2 +-
 .../checkbox-group/demos/nested/css-modules/index.tsx         | 2 +-
 .../checkbox-group/demos/parent/css-modules/index.tsx         | 2 +-
 .../components/checkbox/demos/hero/css-modules/index.tsx      | 2 +-
 .../react/components/checkbox/demos/hero/tailwind/index.tsx   | 2 +-
 .../combobox/demos/async-multiple/css-modules/index.tsx       | 2 +-
 .../combobox/demos/async-multiple/tailwind/index.tsx          | 2 +-
 .../combobox/demos/async-single/css-modules/index.tsx         | 2 +-
 .../components/combobox/demos/async-single/tailwind/index.tsx | 2 +-
 .../components/combobox/demos/creatable/css-modules/index.tsx | 2 +-
 .../components/combobox/demos/creatable/tailwind/index.tsx    | 2 +-
 .../components/combobox/demos/grouped/css-modules/index.tsx   | 2 +-
 .../components/combobox/demos/grouped/tailwind/index.tsx      | 2 +-
 .../components/combobox/demos/hero/css-modules/index.tsx      | 2 +-
 .../react/components/combobox/demos/hero/tailwind/index.tsx   | 2 +-
 .../combobox/demos/input-inside-popup/css-modules/index.tsx   | 2 +-
 .../combobox/demos/input-inside-popup/tailwind/index.tsx      | 2 +-
 .../components/combobox/demos/multiple/css-modules/index.tsx  | 2 +-
 .../components/combobox/demos/multiple/tailwind/index.tsx     | 2 +-
 .../combobox/demos/virtualized/css-modules/index.tsx          | 2 +-
 .../components/combobox/demos/virtualized/tailwind/index.tsx  | 2 +-
 .../menu/demos/checkbox-items/css-modules/index.tsx           | 2 +-
 .../components/menu/demos/checkbox-items/tailwind/index.tsx   | 2 +-
 .../components/menu/demos/group-labels/css-modules/index.tsx  | 2 +-
 .../components/menu/demos/group-labels/tailwind/index.tsx     | 2 +-
 .../components/menu/demos/radio-items/css-modules/index.tsx   | 2 +-
 .../components/menu/demos/radio-items/tailwind/index.tsx      | 2 +-
 .../components/number-field/demos/hero/css-modules/index.tsx  | 2 +-
 .../components/number-field/demos/hero/tailwind/index.tsx     | 2 +-
 .../components/select/demos/grouped/css-modules/index.tsx     | 2 +-
 .../react/components/select/demos/grouped/tailwind/index.tsx  | 2 +-
 .../react/components/select/demos/hero/css-modules/index.tsx  | 2 +-
 .../react/components/select/demos/hero/tailwind/index.tsx     | 2 +-
 .../components/select/demos/multiple/css-modules/index.tsx    | 2 +-
 .../react/components/select/demos/multiple/tailwind/index.tsx | 2 +-
 .../select/demos/object-values/css-modules/index.tsx          | 2 +-
 .../components/select/demos/object-values/tailwind/index.tsx  | 2 +-
 .../components/toast/demos/anchored/css-modules/index.tsx     | 2 +-
 .../react/components/toast/demos/anchored/tailwind/index.tsx  | 2 +-
 .../react/components/toolbar/demos/hero/css-modules/index.tsx | 2 +-
 .../react/components/toolbar/demos/hero/tailwind/index.tsx    | 2 +-
 .../demos/animated-select-motion/css-modules/index.tsx        | 2 +-
 .../(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx | 4 ++--
 .../handbook/forms/demos/react-hook-form/tailwind/index.tsx   | 4 ++--
 .../handbook/forms/demos/tanstack-form/tailwind/index.tsx     | 4 ++--
 docs/src/app/(website)/icons/MinusIcon.tsx                    | 2 +-
 docs/src/icons/CheckIcon.tsx                                  | 2 +-
 docs/src/icons/CopyIcon.tsx                                   | 3 ++-
 docs/src/icons/MagnifyingGlassIcon.tsx                        | 4 ++--
 docs/src/icons/MoreVertIcon.tsx                               | 4 +---
 51 files changed, 56 insertions(+), 57 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
index 78fc64943e5..630f655071a 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
@@ -59,7 +59,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
index 727a6a23a0d..5bbccc22849 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
@@ -70,7 +70,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
index 7deea2fc424..4032a8aa436 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
@@ -147,7 +147,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
index 305b0bee1c4..be4833b93ec 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
@@ -74,7 +74,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
index 5dd29fd9388..b453fdef47c 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
@@ -28,7 +28,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
index ac8fd5e641d..3466064c87a 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
@@ -30,7 +30,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
index f47995d76fc..03521297c8e 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
@@ -212,7 +212,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index 60e62937742..31237b69d88 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -236,7 +236,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
index ebd93301d4c..f3bc4dfb971 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
@@ -173,7 +173,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index 0967008abc6..38440d32720 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -199,7 +199,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
index d3f65d1be46..b6d9cbb1059 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
@@ -232,7 +232,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
index 51217a0ad9e..c2360b9f595 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
@@ -252,7 +252,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
index a7b36c5ec3f..cb4e5a9554d 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
@@ -67,7 +67,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index b47d365b176..31d3cda13f8 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -86,7 +86,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
index e72b35d5184..ec9e015f547 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
@@ -58,7 +58,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
index 58bc244f975..c634aac58c4 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
@@ -73,7 +73,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
index 6d4a41f8e03..c061816e53c 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
@@ -69,7 +69,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index ad211c2ca5b..f0a8520fd91 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -82,7 +82,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
index faa2e97946a..8df18b0ab21 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
@@ -80,7 +80,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
index f4457796216..4adc9483464 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
@@ -88,7 +88,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
index e53af2e8968..3f215ee1b07 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
@@ -151,7 +151,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
index ef81a4963a6..9cb30efd4f5 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
@@ -154,7 +154,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
index 577f65e3a48..5a37cfa92af 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
@@ -81,7 +81,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index 38d34b26818..1f2c9fa39b9 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -83,7 +83,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
index 8cc19e489bf..0e28090abef 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
@@ -111,7 +111,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index 09dc174654a..99bc50c6e50 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -117,7 +117,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
index 14e98e6d860..99d7f821292 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
@@ -68,7 +68,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index 1f68ca3926d..6ab010e9fed 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -70,7 +70,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx
index 17f1ead44ef..88f581ef8b7 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.tsx
@@ -75,7 +75,7 @@ function MinusIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M2.5 8h11" />
+      <path d="M1.5 8h13" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
index 699d91e1273..55250d1f63f 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/tailwind/index.tsx
@@ -80,7 +80,7 @@ function MinusIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M2.5 8h11" />
+      <path d="M1.5 8h13" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
index 00c4de1db84..7748d28a921 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
@@ -85,7 +85,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index 87a26159e64..7e7b5bb945c 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -93,7 +93,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
index 407cb026bae..e08cbac70dd 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
@@ -76,7 +76,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index 4baaa54fde8..a8c4402a331 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -84,7 +84,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
index 60ba82e3b6d..ce561dba1a5 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
@@ -92,7 +92,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index e8e93af4420..350fff0946a 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -99,7 +99,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
index 9efe6fb01bc..62c6ed2af41 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
@@ -83,7 +83,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index 078f1f02018..687aa9e5a7b 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -88,7 +88,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
index f0297f83b4c..7b19413e6bd 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
@@ -156,7 +156,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index de2be3f963a..4bac764a535 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -172,7 +172,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
index 01a6f88392c..d674f786fc4 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
@@ -98,7 +98,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
index 062731d0efd..2c2e49e7681 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
@@ -115,7 +115,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
index c1938f4a263..01c0ff4ff30 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
@@ -103,7 +103,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
index 9803c314d61..ce7be286a19 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
@@ -288,7 +288,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
@@ -324,7 +324,7 @@ function MinusIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M2.5 8h11" />
+      <path d="M1.5 8h13" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
index 5e2cf1f363c..521c11d0843 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
@@ -442,7 +442,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
@@ -478,7 +478,7 @@ function MinusIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M2.5 8h11" />
+      <path d="M1.5 8h13" />
     </svg>
   );
 }
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
index ca949a9241c..979fda758c9 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
@@ -514,7 +514,7 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
@@ -550,7 +550,7 @@ function MinusIcon(props: React.ComponentProps<'svg'>) {
       {...props}
       style={{ display: 'block', ...props.style }}
     >
-      <path d="M2.5 8h11" />
+      <path d="M1.5 8h13" />
     </svg>
   );
 }
diff --git a/docs/src/app/(website)/icons/MinusIcon.tsx b/docs/src/app/(website)/icons/MinusIcon.tsx
index 092a2bbc7a3..1ad616c7476 100644
--- a/docs/src/app/(website)/icons/MinusIcon.tsx
+++ b/docs/src/app/(website)/icons/MinusIcon.tsx
@@ -13,7 +13,7 @@ export function MinusIcon(props: React.ComponentProps<'svg'>) {
       className="Icon"
       {...props}
     >
-      <path d="M2.5 8h11" />
+      <path d="M1.5 8h13" />
     </svg>
   );
 }
diff --git a/docs/src/icons/CheckIcon.tsx b/docs/src/icons/CheckIcon.tsx
index 91bb508ba09..bac483e7af7 100644
--- a/docs/src/icons/CheckIcon.tsx
+++ b/docs/src/icons/CheckIcon.tsx
@@ -12,7 +12,7 @@ export function CheckIcon(props: React.ComponentProps<'svg'>) {
       strokeLinejoin="round"
       {...props}
     >
-      <path d="m3 9 3.5 3.5 6.5-9" />
+      <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );
 }
diff --git a/docs/src/icons/CopyIcon.tsx b/docs/src/icons/CopyIcon.tsx
index 9ba8ccdcdb5..423677b88d7 100644
--- a/docs/src/icons/CopyIcon.tsx
+++ b/docs/src/icons/CopyIcon.tsx
@@ -1,8 +1,9 @@
 export function CopyIcon() {
   return (
     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor">
-      <path strokeLinecap="square" d="M4.5 4.5h10v10h-10z" />
+      <path strokeLinecap="square" d="M1.5 1.5h10v10h-10z" />
       <path strokeLinecap="square" d="M4.5 11.5h-3v-10h10v3" />
+      <path d="M12 4.5h2.5v10h-10V12" />
     </svg>
   );
 }
diff --git a/docs/src/icons/MagnifyingGlassIcon.tsx b/docs/src/icons/MagnifyingGlassIcon.tsx
index 0a321fa5299..3e84e1eeddc 100644
--- a/docs/src/icons/MagnifyingGlassIcon.tsx
+++ b/docs/src/icons/MagnifyingGlassIcon.tsx
@@ -12,8 +12,8 @@ export function MagnifyingGlassIcon(props: React.ComponentProps<'svg'>) {
       strokeLinejoin="round"
       {...props}
     >
-      <path d="m10.5 10.5 4 4" />
-      <circle cx="6.5" cy="6.5" r="5" />
+      <path d="m11 11 3.5 3.5" />
+      <circle cx="7" cy="7" r="5.5" />
     </svg>
   );
 }
diff --git a/docs/src/icons/MoreVertIcon.tsx b/docs/src/icons/MoreVertIcon.tsx
index b04ff471ce9..8c3fc240b16 100644
--- a/docs/src/icons/MoreVertIcon.tsx
+++ b/docs/src/icons/MoreVertIcon.tsx
@@ -3,9 +3,7 @@ import * as React from 'react';
 export function MoreVertIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
-      <circle cx="8" cy="3" r="1" />
-      <circle cx="8" cy="8" r="1" />
-      <circle cx="8" cy="13" r="1" />
+      <path d="M9.5 13c0 .8284-.67157 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.67157-1.5 1.5-1.5 1.5.6716 1.5 1.5m0-5c0 .82843-.67157 1.5-1.5 1.5S6.5 8.82843 6.5 8 7.17157 6.5 8 6.5s1.5.67157 1.5 1.5m0-5c0 .82843-.67157 1.5-1.5 1.5S6.5 3.82843 6.5 3 7.17157 1.5 8 1.5s1.5.67157 1.5 1.5" />
     </svg>
   );
 }

From 0cae77633ae7d6517fd227767560214a125bf9e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 16:12:21 +0200
Subject: [PATCH 233/257] Autocomplete: center grid demo

---
 .../autocomplete/demos/grid/css-modules/index.module.css      | 2 ++
 .../components/autocomplete/demos/grid/tailwind/index.tsx     | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
index cb04867180d..3bad466d7bc 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
@@ -6,10 +6,12 @@
 .InputGroup {
   position: relative;
   display: flex;
+  width: 100%;
 }
 
 .TextInput {
   box-sizing: border-box;
+  flex: 1;
   padding: 0 0.5rem;
   margin: 0;
   margin-right: -1px;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
index 415b9cdf1c9..75dfe7ec401 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
@@ -31,11 +31,11 @@ export default function ExampleEmojiPicker() {
 
   return (
     <div className="mx-auto w-[16rem]">
-      <div className="relative flex">
+      <div className="relative flex w-full">
         <input
           ref={textInputRef}
           type="text"
-          className="-mr-px h-8 border border-r-0 border-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 bg-white dark:bg-neutral-950 focus:relative focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
+          className="-mr-px h-8 flex-1 border border-r-0 border-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 bg-white dark:bg-neutral-950 focus:relative focus:outline-2 focus:-outline-offset-1 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white"
           placeholder="iMessage"
           value={textValue}
           onChange={(event) => setTextValue(event.target.value)}

From fcff33a378e68c3fc9055f1b53dc900bca70678c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 16:14:19 +0200
Subject: [PATCH 234/257] Fix copy icon size

---
 docs/src/components/Demo/Demo.tsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/docs/src/components/Demo/Demo.tsx b/docs/src/components/Demo/Demo.tsx
index b7a48324240..b9a612b9063 100644
--- a/docs/src/components/Demo/Demo.tsx
+++ b/docs/src/components/Demo/Demo.tsx
@@ -213,9 +213,7 @@ export function Demo({
                 {externalPlaygroundLink}
                 <GhostButton aria-label="Copy code" onClick={demo.copy}>
                   Copy
-                  <span className="DemoCopyIconWrap">
-                    {copyTimeout ? <CheckIcon /> : <CopyIcon />}
-                  </span>
+                  {copyTimeout ? <CheckIcon /> : <CopyIcon />}
                 </GhostButton>
 
                 {githubUrl && (
@@ -239,13 +237,11 @@ export function Demo({
                       </Menu.LinkItem>
 
                       <Menu.Item closeOnClick={false} onClick={onCopySourceLink}>
-                        <span className="DemoCopyIconWrap">
-                          {sourceLinkCopied ? (
-                            <CheckIcon aria-hidden="true" />
-                          ) : (
-                            <CopyIcon aria-hidden="true" />
-                          )}
-                        </span>
+                        {sourceLinkCopied ? (
+                          <CheckIcon aria-hidden="true" />
+                        ) : (
+                          <CopyIcon aria-hidden="true" />
+                        )}
                         Copy link to source
                         <span className="sr-only" aria-live="polite">
                           {sourceLinkCopied && 'Link copied!'}

From e54f05d68e458b70815da5592c8ad6c22963d6f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 16:14:45 +0200
Subject: [PATCH 235/257] Remove unused CSS

---
 docs/src/components/Demo/Demo.css | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/docs/src/components/Demo/Demo.css b/docs/src/components/Demo/Demo.css
index c0c76f86ee3..6826d04f231 100644
--- a/docs/src/components/Demo/Demo.css
+++ b/docs/src/components/Demo/Demo.css
@@ -28,14 +28,6 @@
     right: 1.125rem;
   }
 
-  .DemoCopyIconWrap {
-    display: flex;
-    width: 0.875rem;
-    height: 0.875rem;
-    align-items: center;
-    justify-content: center;
-  }
-
   .DemoPlayground {
     position: relative;
 

From 1a6a563e1693deba9ce45520d91354510799fd69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 16:15:51 +0200
Subject: [PATCH 236/257] New npm icon

---
 docs/src/icons/NpmIcon.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/src/icons/NpmIcon.tsx b/docs/src/icons/NpmIcon.tsx
index 1d4679e7baa..e49cb6f067a 100644
--- a/docs/src/icons/NpmIcon.tsx
+++ b/docs/src/icons/NpmIcon.tsx
@@ -3,7 +3,9 @@ import * as React from 'react';
 export function NpmIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" {...props}>
-      <path fillRule="evenodd" clipRule="evenodd" d="M1 1h14v14H1zM4 4h8v8H4zM7.5 6h3v6h-3z" />
+      <rect width="16" height="16" fill="black" />
+      <rect x="3" y="3" width="10" height="10" fill="white" />
+      <path d="M8 5H11V13H8V5Z" fill="black" />
     </svg>
   );
 }

From d602f22ec7c9be5c6862a4e82ee1a2ae770cdfb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 16:28:48 +0200
Subject: [PATCH 237/257] Menu: fix check icon column width

---
 .../menu/demos/checkbox-items/css-modules/index.module.css      | 2 +-
 .../components/menu/demos/checkbox-items/tailwind/index.tsx     | 2 +-
 .../menu/demos/group-labels/css-modules/index.module.css        | 2 +-
 .../react/components/menu/demos/group-labels/tailwind/index.tsx | 2 +-
 .../menu/demos/radio-items/css-modules/index.module.css         | 2 +-
 .../react/components/menu/demos/radio-items/tailwind/index.tsx  | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
index 49fbb2c4d25..e8ee86e3388 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
@@ -117,7 +117,7 @@
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
 
   &[data-highlighted] {
     z-index: 0;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index 1f2c9fa39b9..345a1dafc69 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const checkboxItemClass =
-  "grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
+  "grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
 
 export default function ExampleMenu() {
   const [showMinimap, setShowMinimap] = React.useState(true);
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
index 3755aeef97d..151acef8e82 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
@@ -117,7 +117,7 @@
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
 
   &[data-highlighted] {
     z-index: 0;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index 99bc50c6e50..5ff4b3d568b 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const itemClass =
-  "grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
+  "grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
 
 export default function ExampleMenu() {
   const [value, setValue] = React.useState('date');
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
index 71e90f2eb6b..ae3771eaf0f 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
@@ -116,7 +116,7 @@
   display: grid;
   gap: 0.5rem;
   align-items: center;
-  grid-template-columns: 0.75rem 1fr;
+  grid-template-columns: 1rem 1fr;
 
   &[data-highlighted] {
     z-index: 0;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index 6ab010e9fed..f99d93a1bf1 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Menu } from '@base-ui/react/menu';
 
 const radioItemClass =
-  "grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
+  "grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 py-2 pr-8 pl-2.5 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
 
 export default function ExampleMenu() {
   const [value, setValue] = React.useState('date');

From 5a8951bfefe552149fafefff6069a2bc45821cce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 16:32:02 +0200
Subject: [PATCH 238/257] Autocomplete: reduce group bottom padding

---
 .../autocomplete/demos/grid/css-modules/index.module.css    | 1 -
 .../components/autocomplete/demos/grid/tailwind/index.tsx   | 6 +-----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
index 3bad466d7bc..49528d515b7 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
@@ -283,7 +283,6 @@
 
 .Group {
   display: block;
-  padding-bottom: 0.5rem;
 }
 
 .Grid {
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
index 75dfe7ec401..d7d46cbea38 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
@@ -79,11 +79,7 @@ export default function ExampleEmojiPicker() {
                 </Autocomplete.Empty>
                 <Autocomplete.List className="max-h-[min(calc(20.5rem-var(--input-container-height)-2px),calc(var(--available-height)-var(--input-container-height)-2px))] overflow-auto scroll-pt-1 scroll-pb-[0.35rem] overscroll-contain empty:p-0">
                   {(group: EmojiGroup) => (
-                    <Autocomplete.Group
-                      key={group.value}
-                      items={group.items}
-                      className="block pb-2"
-                    >
+                    <Autocomplete.Group key={group.value} items={group.items} className="block">
                       <Autocomplete.GroupLabel className="p-2 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
                         {group.label}
                       </Autocomplete.GroupLabel>

From 88e250a48b6f10fda3307b04f64150cb99b2dd07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 16:33:49 +0200
Subject: [PATCH 239/257] Clean up icons

---
 .../checkbox-group/demos/hero/css-modules/index.tsx   |  2 --
 .../checkbox-group/demos/hero/tailwind/index.tsx      |  2 --
 .../checkbox-group/demos/nested/css-modules/index.tsx |  2 --
 .../checkbox-group/demos/parent/css-modules/index.tsx |  2 --
 .../checkbox/demos/hero/css-modules/index.tsx         |  2 --
 .../components/checkbox/demos/hero/tailwind/index.tsx |  2 --
 .../demos/async-multiple/css-modules/index.tsx        |  2 --
 .../combobox/demos/async-multiple/tailwind/index.tsx  |  2 --
 .../combobox/demos/async-single/css-modules/index.tsx |  2 --
 .../combobox/demos/async-single/tailwind/index.tsx    |  2 --
 .../combobox/demos/creatable/css-modules/index.tsx    |  2 --
 .../combobox/demos/creatable/tailwind/index.tsx       |  2 --
 .../combobox/demos/grouped/css-modules/index.tsx      |  2 --
 .../combobox/demos/grouped/tailwind/index.tsx         |  2 --
 .../combobox/demos/hero/css-modules/index.tsx         |  2 --
 .../components/combobox/demos/hero/tailwind/index.tsx |  2 --
 .../demos/input-inside-popup/css-modules/index.tsx    |  2 --
 .../demos/input-inside-popup/tailwind/index.tsx       |  2 --
 .../combobox/demos/multiple/css-modules/index.tsx     |  2 --
 .../combobox/demos/multiple/tailwind/index.tsx        |  2 --
 .../combobox/demos/virtualized/css-modules/index.tsx  |  2 --
 .../combobox/demos/virtualized/tailwind/index.tsx     |  2 --
 .../menu/demos/checkbox-items/css-modules/index.tsx   |  2 --
 .../menu/demos/checkbox-items/tailwind/index.tsx      |  2 --
 .../menu/demos/group-labels/css-modules/index.tsx     |  2 --
 .../menu/demos/group-labels/tailwind/index.tsx        |  2 --
 .../menu/demos/radio-items/css-modules/index.tsx      |  2 --
 .../menu/demos/radio-items/tailwind/index.tsx         |  2 --
 .../select/demos/grouped/css-modules/index.tsx        |  2 --
 .../select/demos/grouped/tailwind/index.tsx           |  2 --
 .../select/demos/hero/css-modules/index.tsx           |  2 --
 .../components/select/demos/hero/tailwind/index.tsx   |  2 --
 .../select/demos/multiple/css-modules/index.tsx       |  2 --
 .../select/demos/multiple/tailwind/index.tsx          |  2 --
 .../select/demos/object-values/css-modules/index.tsx  |  2 --
 .../select/demos/object-values/tailwind/index.tsx     |  2 --
 .../toast/demos/anchored/css-modules/index.tsx        |  2 --
 .../toast/demos/anchored/tailwind/index.tsx           |  2 --
 .../toolbar/demos/hero/css-modules/index.tsx          |  2 --
 .../components/toolbar/demos/hero/tailwind/index.tsx  |  2 --
 .../animated-select-motion/css-modules/index.tsx      |  2 --
 .../handbook/forms/demos/hero/tailwind/index.tsx      |  2 --
 .../forms/demos/react-hook-form/tailwind/index.tsx    |  2 --
 .../forms/demos/tanstack-form/tailwind/index.tsx      |  2 --
 docs/src/icons/CheckIcon.tsx                          | 11 +----------
 45 files changed, 1 insertion(+), 98 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
index 630f655071a..bc7da968cc5 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.tsx
@@ -54,8 +54,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
index 5bbccc22849..77e729e6725 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/tailwind/index.tsx
@@ -65,8 +65,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
index 4032a8aa436..35c7c968d21 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx
@@ -142,8 +142,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
index be4833b93ec..a6364da78af 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.tsx
@@ -69,8 +69,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
index b453fdef47c..d22c16bcba0 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.tsx
@@ -23,8 +23,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
index 3466064c87a..b7143441b9e 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/tailwind/index.tsx
@@ -25,8 +25,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
index 03521297c8e..79bc0d1c130 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.tsx
@@ -207,8 +207,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index 31237b69d88..41a62b0d73e 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -231,8 +231,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
index f3bc4dfb971..149fd4fc5e8 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.tsx
@@ -168,8 +168,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index 38440d32720..192385c07a0 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -194,8 +194,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
index b6d9cbb1059..63d12511d22 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.tsx
@@ -227,8 +227,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
index c2360b9f595..a360f5fd0e8 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/tailwind/index.tsx
@@ -247,8 +247,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
index cb4e5a9554d..5caec3b838a 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.tsx
@@ -62,8 +62,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index 31d3cda13f8..382b48ca88d 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -81,8 +81,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
index ec9e015f547..73c197c0592 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.tsx
@@ -53,8 +53,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
index c634aac58c4..358c5eaac75 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
@@ -68,8 +68,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
index c061816e53c..5b77997f422 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.tsx
@@ -64,8 +64,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
index f0a8520fd91..aaf465de555 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/tailwind/index.tsx
@@ -77,8 +77,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
index 8df18b0ab21..a7c2473fe4c 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.tsx
@@ -75,8 +75,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
index 4adc9483464..4ee8aa1e0f4 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/tailwind/index.tsx
@@ -83,8 +83,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
index 3f215ee1b07..e0aab071f7a 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx
@@ -146,8 +146,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
index 9cb30efd4f5..b4b905632dd 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
@@ -149,8 +149,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
index 5a37cfa92af..49f147be71d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.tsx
@@ -76,8 +76,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
index 345a1dafc69..a2a7f9d649d 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/tailwind/index.tsx
@@ -78,8 +78,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
index 0e28090abef..393a457f390 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.tsx
@@ -106,8 +106,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index 5ff4b3d568b..2248d73154b 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -112,8 +112,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
index 99d7f821292..598ef447041 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.tsx
@@ -63,8 +63,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
index f99d93a1bf1..b6a3869c7c8 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/tailwind/index.tsx
@@ -65,8 +65,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
index 7748d28a921..a01d1d292fd 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.tsx
@@ -80,8 +80,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index 7e7b5bb945c..edcdb7720be 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -88,8 +88,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
index e08cbac70dd..65e2d7c5f19 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.tsx
@@ -71,8 +71,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
index a8c4402a331..162ae5eb0e5 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/tailwind/index.tsx
@@ -79,8 +79,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
index ce561dba1a5..5abf68c5b73 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.tsx
@@ -87,8 +87,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
index 350fff0946a..9ebc64c0b04 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/tailwind/index.tsx
@@ -94,8 +94,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
index 62c6ed2af41..558aea54e93 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.tsx
@@ -78,8 +78,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
index 687aa9e5a7b..b4ce9340133 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/tailwind/index.tsx
@@ -83,8 +83,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
index 7b19413e6bd..c26f40d11d0 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.tsx
@@ -151,8 +151,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
index 4bac764a535..49941966a96 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/tailwind/index.tsx
@@ -167,8 +167,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
index d674f786fc4..4ffa6122dab 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.tsx
@@ -93,8 +93,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
index 2c2e49e7681..471ceac729f 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/tailwind/index.tsx
@@ -110,8 +110,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
index 01c0ff4ff30..d1935b27032 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.tsx
@@ -98,8 +98,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
index ce7be286a19..9a32c90acda 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/hero/tailwind/index.tsx
@@ -283,8 +283,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
index 521c11d0843..4a082a7efcf 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/react-hook-form/tailwind/index.tsx
@@ -437,8 +437,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
index 979fda758c9..74021267b03 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/tanstack-form/tailwind/index.tsx
@@ -509,8 +509,6 @@ function CheckIcon(props: React.ComponentProps<'svg'>) {
       viewBox="0 0 16 16"
       fill="none"
       stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
       {...props}
       style={{ display: 'block', ...props.style }}
     >
diff --git a/docs/src/icons/CheckIcon.tsx b/docs/src/icons/CheckIcon.tsx
index bac483e7af7..4adbb999ef6 100644
--- a/docs/src/icons/CheckIcon.tsx
+++ b/docs/src/icons/CheckIcon.tsx
@@ -2,16 +2,7 @@ import * as React from 'react';
 
 export function CheckIcon(props: React.ComponentProps<'svg'>) {
   return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="square"
-      strokeLinejoin="round"
-      {...props}
-    >
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" {...props}>
       <path d="m2.5 8.5 4 4 7-9" />
     </svg>
   );

From 0a724daa5a99ac36c48b82180a968ea23199dfde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 16:36:53 +0200
Subject: [PATCH 240/257] Autocomplete: tweak secondary text color

---
 .../autocomplete/demos/async/css-modules/index.module.css       | 2 +-
 .../components/autocomplete/demos/async/tailwind/index.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
index 12ed1b1a91b..a00d2df3ad6 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
@@ -147,7 +147,7 @@
   }
 
   .Item[data-highlighted] & {
-    color: var(--color-neutral-400);
+    color: var(--color-neutral-300);
 
     @media (prefers-color-scheme: dark) {
       color: var(--color-neutral-500);
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
index baac6f29fff..ed2fd836907 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
@@ -108,7 +108,7 @@ export default function ExampleAsyncAutocomplete() {
                   >
                     <span className="flex w-full flex-col gap-1">
                       <span className="font-bold leading-5">{movie.title}</span>
-                      <span className="text-sm leading-4 text-neutral-500 dark:text-neutral-400 group-data-highlighted:text-neutral-400 dark:group-data-highlighted:text-neutral-500">
+                      <span className="text-sm leading-4 text-neutral-500 dark:text-neutral-400 group-data-highlighted:text-neutral-300 dark:group-data-highlighted:text-neutral-500">
                         {movie.year}
                       </span>
                     </span>

From db7eee734a9d3076c58b858fdebc888e269c02f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 16:57:54 +0200
Subject: [PATCH 241/257] Demo toolbar: cursor:pointer on menu link items

---
 docs/src/components/Demo/Demo.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/src/components/Demo/Demo.tsx b/docs/src/components/Demo/Demo.tsx
index b9a612b9063..35d2e764d3c 100644
--- a/docs/src/components/Demo/Demo.tsx
+++ b/docs/src/components/Demo/Demo.tsx
@@ -231,9 +231,11 @@ export function Demo({
                         target="_blank"
                         rel="noopener"
                         onClick={onViewSource}
+                        style={{ cursor: 'pointer' }}
                       >
-                        <GitHubIcon aria-hidden="true" height={14} width={14} />
+                        <GitHubIcon aria-hidden="true" />
                         View source on GitHub
+                        <ExternalLinkIcon aria-hidden="true" />
                       </Menu.LinkItem>
 
                       <Menu.Item closeOnClick={false} onClick={onCopySourceLink}>

From 31364140caf749523b4d19920a6030550a7c4d53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 17:02:58 +0200
Subject: [PATCH 242/257] Fix cursor on demo toolbar

---
 docs/src/components/Demo/Demo.css | 1 -
 docs/src/components/Demo/Demo.tsx | 1 -
 docs/src/components/Menu.css      | 1 -
 3 files changed, 3 deletions(-)

diff --git a/docs/src/components/Demo/Demo.css b/docs/src/components/Demo/Demo.css
index 6826d04f231..69943702bcd 100644
--- a/docs/src/components/Demo/Demo.css
+++ b/docs/src/components/Demo/Demo.css
@@ -143,7 +143,6 @@
 
   .DemoTab {
     font-family: var(--font-mono);
-    cursor: default;
     position: relative;
     z-index: 0;
     outline: 0;
diff --git a/docs/src/components/Demo/Demo.tsx b/docs/src/components/Demo/Demo.tsx
index 35d2e764d3c..cf27e2514a7 100644
--- a/docs/src/components/Demo/Demo.tsx
+++ b/docs/src/components/Demo/Demo.tsx
@@ -231,7 +231,6 @@ export function Demo({
                         target="_blank"
                         rel="noopener"
                         onClick={onViewSource}
-                        style={{ cursor: 'pointer' }}
                       >
                         <GitHubIcon aria-hidden="true" />
                         View source on GitHub
diff --git a/docs/src/components/Menu.css b/docs/src/components/Menu.css
index 9da88541b1b..1e177208624 100644
--- a/docs/src/components/Menu.css
+++ b/docs/src/components/Menu.css
@@ -47,7 +47,6 @@
     z-index: 0;
     color: var(--gray-t2);
     text-decoration: none;
-    cursor: default;
 
     &[data-highlighted] {
       position: relative;

From b01369fd1d901d86aeb439ca17ca250875ce5096 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 17:29:12 +0200
Subject: [PATCH 243/257] Remove `overflow: clip` from all popups and fix
 overflowing scrollbar

---
 .../autocomplete/demos/async/css-modules/index.module.css      | 2 --
 .../components/autocomplete/demos/async/tailwind/index.tsx     | 2 +-
 .../demos/auto-highlight/css-modules/index.module.css          | 2 --
 .../autocomplete/demos/auto-highlight/tailwind/index.tsx       | 2 +-
 .../demos/fuzzy-matching/css-modules/index.module.css          | 2 --
 .../autocomplete/demos/fuzzy-matching/tailwind/index.tsx       | 2 +-
 .../autocomplete/demos/grouped/css-modules/index.module.css    | 3 ---
 .../components/autocomplete/demos/grouped/tailwind/index.tsx   | 2 +-
 .../autocomplete/demos/hero/css-modules/index.module.css       | 3 ---
 .../components/autocomplete/demos/hero/tailwind/index.tsx      | 2 +-
 .../autocomplete/demos/inline/css-modules/index.module.css     | 3 ---
 .../components/autocomplete/demos/inline/tailwind/index.tsx    | 2 +-
 .../demos/virtualized/css-modules/index.module.css             | 2 --
 .../autocomplete/demos/virtualized/tailwind/index.tsx          | 2 +-
 .../combobox/demos/async-multiple/css-modules/index.module.css | 1 -
 .../combobox/demos/async-multiple/tailwind/index.tsx           | 2 +-
 .../combobox/demos/async-single/css-modules/index.module.css   | 1 -
 .../components/combobox/demos/async-single/tailwind/index.tsx  | 2 +-
 .../combobox/demos/grouped/css-modules/index.module.css        | 2 --
 .../react/components/combobox/demos/grouped/tailwind/index.tsx | 2 +-
 .../combobox/demos/hero/css-modules/index.module.css           | 2 --
 .../react/components/combobox/demos/hero/tailwind/index.tsx    | 2 +-
 .../combobox/demos/virtualized/css-modules/index.module.css    | 2 --
 .../components/combobox/demos/virtualized/tailwind/index.tsx   | 2 +-
 .../react/handbook/forms/demos/components/autocomplete.tsx     | 2 +-
 .../(docs)/react/handbook/forms/demos/components/combobox.tsx  | 2 +-
 26 files changed, 14 insertions(+), 39 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
index a00d2df3ad6..0b1f0fe8bdf 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
@@ -67,8 +67,6 @@
   color: var(--color-neutral-950);
   width: var(--anchor-width);
   max-width: var(--available-width);
-  overflow: clip;
-
   border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
index ed2fd836907..21f2cc9625d 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/tailwind/index.tsx
@@ -88,7 +88,7 @@ export default function ExampleAsyncAutocomplete() {
       <Autocomplete.Portal hidden={!status}>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4} align="start">
           <Autocomplete.Popup
-            className="w-[var(--anchor-width)] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+            className="w-[var(--anchor-width)] max-w-[var(--available-width)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-busy={isPending || undefined}
           >
             <div className="max-h-[min(var(--available-height),22.5rem)] overflow-y-auto overscroll-contain py-1 scroll-pt-1 scroll-pb-1">
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
index 11a28748c95..5e818316e13 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
@@ -66,9 +66,7 @@
   background-color: white;
   color: var(--color-neutral-950);
   width: var(--anchor-width);
-  max-height: 22.5rem;
   max-width: var(--available-width);
-  overflow: clip;
   border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
index 54a055a1a47..081d73fd0fd 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleAutocompleteAutoHighlight() {
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[22.5rem] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-w-[var(--available-width)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
               <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No tags found.
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
index 8a2dfd368d3..9e2d385cd28 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
@@ -67,8 +67,6 @@
   color: var(--color-neutral-950);
   width: var(--anchor-width);
   max-width: var(--available-width);
-  overflow: clip;
-
   border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
index 193c7ad164b..42af89d7d4b 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/tailwind/index.tsx
@@ -20,7 +20,7 @@ export default function ExampleFuzzyMatchingAutocomplete() {
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-(--anchor-width) max-w-(--available-width) overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Autocomplete.Popup className="w-(--anchor-width) max-w-(--available-width) border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
               <div className="py-2 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No results found for "{<Autocomplete.Value />}"
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
index dae86046f43..82ddccae1ff 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
@@ -66,10 +66,7 @@
   background-color: white;
   color: var(--color-neutral-950);
   width: var(--anchor-width);
-  max-height: 22.5rem;
   max-width: var(--available-width);
-  overflow: clip;
-
   border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
index 085db9121bb..a8f4555e400 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleGroupAutocomplete() {
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[22.5rem] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-w-[var(--available-width)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
               <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No tags found.
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
index b4dba25c8b7..37a5325796e 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
@@ -66,10 +66,7 @@
   background-color: white;
   color: var(--color-neutral-950);
   width: var(--anchor-width);
-  max-height: 22.5rem;
   max-width: var(--available-width);
-  overflow: clip;
-
   border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
index 087f422a10f..9caaf30177f 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleAutocomplete() {
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[22.5rem] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-w-[var(--available-width)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
               <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No tags found.
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
index 4b4c0dae6f8..08fc3dc27f1 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
@@ -76,10 +76,7 @@
   background-color: white;
   color: var(--color-neutral-950);
   width: var(--anchor-width);
-  max-height: 22.5rem;
   max-width: var(--available-width);
-  overflow: clip;
-
   border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
index aeaae6b372e..4a98844e0e8 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function ExampleAutocompleteInline() {
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden data-empty:hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[22.5rem] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-w-[var(--available-width)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.List className="outline-0 overflow-y-auto scroll-py-[0.25rem] py-1 overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-empty:p-0">
               {(tag: Tag) => (
                 <Autocomplete.Item
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
index a7a5b4029ca..4f84268ba8b 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
@@ -58,9 +58,7 @@
   background-color: white;
   color: var(--color-neutral-950);
   width: var(--anchor-width);
-  max-height: min(22.5rem, var(--available-height));
   max-width: var(--available-width);
-  overflow: clip;
   border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
index 4f6a6dba545..dc62677f030 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx
@@ -37,7 +37,7 @@ export default function ExampleVirtualizedAutocomplete() {
 
       <Autocomplete.Portal>
         <Autocomplete.Positioner className="outline-hidden" sideOffset={4}>
-          <Autocomplete.Popup className="w-[var(--anchor-width)] max-h-[min(22.5rem,var(--available-height))] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Autocomplete.Popup className="w-[var(--anchor-width)] max-w-[var(--available-width)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Autocomplete.Empty>
               <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No items found.
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
index 83f511a6ab6..34e613fe9d9 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
@@ -191,7 +191,6 @@
   color: var(--color-neutral-950);
   width: var(--anchor-width);
   max-width: var(--available-width);
-  overflow: clip;
   transition:
     opacity 0.1s,
     transform 0.1s;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
index 41a62b0d73e..7387446b43a 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/tailwind/index.tsx
@@ -176,7 +176,7 @@ export default function ExampleAsyncMultipleCombobox() {
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
           <Combobox.Popup
-            className="w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[scale,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+            className="w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[scale,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-busy={isPending || undefined}
           >
             <div className="max-h-[min(var(--available-height),24.5rem)] overflow-y-auto overscroll-contain py-1 scroll-pt-1 scroll-pb-1">
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
index 5eefe01c6af..8d4b4f2e957 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
@@ -128,7 +128,6 @@
   color: var(--color-neutral-950);
   width: var(--anchor-width);
   max-width: var(--available-width);
-  overflow: clip;
   transition:
     opacity 0.1s,
     transform 0.1s;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
index 192385c07a0..4973c210795 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/tailwind/index.tsx
@@ -139,7 +139,7 @@ export default function ExampleAsyncSingleCombobox() {
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
           <Combobox.Popup
-            className="w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[scale,opacity] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:transition-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+            className="w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[scale,opacity] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:transition-none dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
             aria-busy={isPending || undefined}
           >
             <div className="max-h-[min(var(--available-height),22.5rem)] overflow-y-auto overscroll-contain py-1 scroll-pt-1 scroll-pb-1">
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
index 8ca6d64fd38..ba62dd2de4e 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
@@ -121,11 +121,9 @@
 
 .Popup {
   box-sizing: border-box;
-  overflow: clip;
   background-color: white;
   color: var(--color-neutral-950);
   width: var(--anchor-width);
-  max-height: 22.5rem;
   max-width: var(--available-width);
   transition:
     opacity 0.1s,
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index 382b48ca88d..2b5c07f8615 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -33,7 +33,7 @@ export default function ExampleGroupedCombobox() {
 
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
-          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[22.5rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[scale,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Combobox.Popup className="w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[scale,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Combobox.Empty>
               <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No produce found.
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
index c0b5044bf64..d2f6945cce1 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
@@ -123,9 +123,7 @@
   background-color: white;
   color: var(--color-neutral-950);
   width: var(--anchor-width);
-  max-height: 22.5rem;
   max-width: var(--available-width);
-  overflow: clip;
   transition:
     opacity 0.1s,
     transform 0.1s;
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
index 358c5eaac75..56fa85826ca 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/tailwind/index.tsx
@@ -33,7 +33,7 @@ export default function ExampleCombobox() {
 
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
-          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[22.5rem] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[scale,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Combobox.Popup className="w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[scale,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Combobox.Empty>
               <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No fruits found.
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
index 50c52f15afd..84a2c7d44ca 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
@@ -58,9 +58,7 @@
   background-color: white;
   color: var(--color-neutral-950);
   width: var(--anchor-width);
-  max-height: min(22.5rem, var(--available-height));
   max-width: var(--available-width);
-  overflow: clip;
   border: 1px solid var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
index b4b905632dd..6cdb6295d24 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx
@@ -39,7 +39,7 @@ export default function ExampleVirtualizedCombobox() {
 
       <Combobox.Portal>
         <Combobox.Positioner className="outline-none" sideOffset={4}>
-          <Combobox.Popup className="w-[var(--anchor-width)] max-h-[min(22.5rem,var(--available-height))] max-w-[var(--available-width)] overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
+          <Combobox.Popup className="w-[var(--anchor-width)] max-w-[var(--available-width)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Combobox.Empty>
               <div className="py-4 pr-4 pl-2 text-sm leading-4 text-neutral-500 dark:text-neutral-400">
                 No items found.
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
index d9c0d20e836..ac0f8fd012b 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/autocomplete.tsx
@@ -40,7 +40,7 @@ export function Popup({ className, ...props }: Autocomplete.Popup.Props) {
   return (
     <Autocomplete.Popup
       className={clsx(
-        'w-(--anchor-width) max-h-[22.5rem] max-w-(--available-width) overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none',
+        'w-(--anchor-width) max-w-(--available-width) border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none',
         className,
       )}
       {...props}
diff --git a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
index d80e112b3aa..16f9aa0efa0 100644
--- a/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
+++ b/docs/src/app/(docs)/react/handbook/forms/demos/components/combobox.tsx
@@ -74,7 +74,7 @@ export function Popup({ className, ...props }: Combobox.Popup.Props) {
   return (
     <Combobox.Popup
       className={clsx(
-        'w-(--anchor-width) max-h-[22.5rem] max-w-(--available-width) origin-(--transform-origin) overflow-clip border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none',
+        'w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] transition-[scale,opacity] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none',
         className,
       )}
       {...props}

From dfa8513843de701a7b973e0bc75dffe99b2db633 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 17:37:55 +0200
Subject: [PATCH 244/257] Dialog: reduce transition duration

---
 .../demos/close-confirmation/css-modules/index.module.css | 8 ++++----
 .../dialog/demos/close-confirmation/tailwind/index.tsx    | 4 ++--
 .../dialog/demos/nested/css-modules/index.module.css      | 8 ++++----
 .../components/dialog/demos/nested/tailwind/index.tsx     | 4 ++--
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
index cb6a4dbb6b3..4396ae8506e 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
@@ -103,9 +103,9 @@
   translate: -50% calc(-50% + 1.25rem * var(--nested-dialogs));
   scale: calc(1 - 0.1 * var(--nested-dialogs));
   transition:
-    translate 150ms ease-out,
-    scale 150ms ease-out,
-    opacity 150ms ease-out;
+    translate 100ms ease-out,
+    scale 100ms ease-out,
+    opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
@@ -121,7 +121,7 @@
     background-color: rgb(0 0 0 / 0.05);
     opacity: 0;
     pointer-events: none;
-    transition: opacity 150ms ease-out;
+    transition: opacity 100ms ease-out;
   }
 
   &[data-nested-dialog-open]::after {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
index 0c4df6e1cf9..57fb33de640 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/tailwind/index.tsx
@@ -29,7 +29,7 @@ export default function ExampleDialog() {
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] flex-col gap-1 translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-ending-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
+        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] flex-col gap-1 translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-100 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-100 after:ease-out after:pointer-events-none data-ending-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
           <Dialog.Title id={titleId} className="text-base font-bold">
             New tweet
           </Dialog.Title>
@@ -67,7 +67,7 @@ export default function ExampleDialog() {
       {/* Confirmation dialog */}
       <AlertDialog.Root open={confirmationOpen} onOpenChange={setConfirmationOpen}>
         <AlertDialog.Portal>
-          <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] flex-col gap-4 translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-ending-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
+          <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] flex-col gap-4 translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-100 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-100 after:ease-out after:pointer-events-none data-ending-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
             <div className="flex flex-col gap-1">
               <AlertDialog.Title className="text-base font-bold">Discard tweet?</AlertDialog.Title>
               <AlertDialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
index 45f91457ba9..825919fa35b 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
@@ -145,9 +145,9 @@
   translate: -50% calc(-50% + 1.25rem * var(--nested-dialogs));
   scale: calc(1 - 0.1 * var(--nested-dialogs));
   transition:
-    translate 150ms ease-out,
-    scale 150ms ease-out,
-    opacity 150ms ease-out;
+    translate 100ms ease-out,
+    scale 100ms ease-out,
+    opacity 100ms ease-out;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
@@ -163,7 +163,7 @@
     background-color: rgb(0 0 0 / 0.05);
     opacity: 0;
     pointer-events: none;
-    transition: opacity 150ms ease-out;
+    transition: opacity 100ms ease-out;
   }
 
   &[data-nested-dialog-open]::after {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
index 6cbc6a4467a..b60d0880004 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/tailwind/index.tsx
@@ -8,7 +8,7 @@ export default function ExampleDialog() {
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute" />
-        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] flex-col gap-4 translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-ending-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
+        <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] flex-col gap-4 translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-100 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-100 after:ease-out after:pointer-events-none data-ending-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
           <div className="flex flex-col gap-1">
             <Dialog.Title className="text-base font-bold">Notifications</Dialog.Title>
             <Dialog.Description className="text-sm text-neutral-600 dark:text-neutral-400">
@@ -21,7 +21,7 @@ export default function ExampleDialog() {
                 Customize
               </Dialog.Trigger>
               <Dialog.Portal>
-                <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] flex-col gap-4 translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-150 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-150 after:ease-out after:pointer-events-none data-ending-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
+                <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] flex-col gap-4 translate-[-50%_calc(-50%_+_1.25rem_*_var(--nested-dialogs))] scale-[calc(1_-_0.1_*_var(--nested-dialogs))] bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate,scale,opacity] duration-100 ease-out after:absolute after:inset-0 after:bg-black/5 after:opacity-0 after:transition-opacity after:duration-100 after:ease-out after:pointer-events-none data-ending-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-nested-dialog-open:after:opacity-100 data-starting-style:translate-[-50%_calc(-50%_+_0.25rem_+_1.25rem_*_var(--nested-dialogs))] data-starting-style:scale-[0.96] data-starting-style:opacity-0">
                   <div className="flex flex-col gap-1">
                     <Dialog.Title className="text-base font-bold">
                       Customize notifications

From 676dcf2f9dc129dedd84267fe540552ca70a5a6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 17:42:37 +0200
Subject: [PATCH 245/257] Group labels: fix left padding

---
 .../combobox/demos/grouped/css-modules/index.module.css       | 2 +-
 .../components/combobox/demos/grouped/tailwind/index.tsx      | 2 +-
 .../menu/demos/group-labels/css-modules/index.module.css      | 2 +-
 .../components/menu/demos/group-labels/tailwind/index.tsx     | 4 ++--
 .../select/demos/grouped/css-modules/index.module.css         | 2 +-
 .../react/components/select/demos/grouped/tailwind/index.tsx  | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
index ba62dd2de4e..3bee49248b5 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
@@ -170,7 +170,7 @@
 .GroupLabel {
   box-sizing: border-box;
   user-select: none;
-  padding: 0.5rem 0.5rem 0.5rem 1.75rem;
+  padding: 0.5rem 0.5rem 0.5rem 2rem;
   font-size: 0.875rem;
   line-height: 1rem;
   color: var(--color-neutral-500);
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
index 2b5c07f8615..6d2afac276e 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/tailwind/index.tsx
@@ -46,7 +46,7 @@ export default function ExampleGroupedCombobox() {
                   items={group.items}
                   className="block pb-2 last:pb-0"
                 >
-                  <Combobox.GroupLabel className="py-2 pr-2 pl-7 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
+                  <Combobox.GroupLabel className="py-2 pr-2 pl-8 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
                     {group.value}
                   </Combobox.GroupLabel>
                   <Combobox.Collection>
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
index 151acef8e82..1fe49936595 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
@@ -175,7 +175,7 @@
 .GroupLabel {
   user-select: none;
   padding-block: 0.5rem;
-  padding-left: 1.875rem;
+  padding-left: 2.125rem;
   padding-right: 2rem;
   font-size: 0.875rem;
   line-height: 1rem;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
index 2248d73154b..621c3f124f7 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/tailwind/index.tsx
@@ -20,7 +20,7 @@ export default function ExampleMenu() {
         <Menu.Positioner className="outline-hidden" sideOffset={8}>
           <Menu.Popup className="relative origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none">
             <Menu.Group>
-              <Menu.GroupLabel className="py-2 pr-8 pl-7.5 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
+              <Menu.GroupLabel className="py-2 pr-8 pl-[2.125rem] text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
                 Sort
               </Menu.GroupLabel>
               <Menu.RadioGroup value={value} onValueChange={setValue}>
@@ -48,7 +48,7 @@ export default function ExampleMenu() {
             <Menu.Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
 
             <Menu.Group>
-              <Menu.GroupLabel className="py-2 pr-8 pl-7.5 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
+              <Menu.GroupLabel className="py-2 pr-8 pl-[2.125rem] text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400">
                 Workspace
               </Menu.GroupLabel>
               <Menu.CheckboxItem
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index e02e952c810..81bd0054a6e 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -162,7 +162,7 @@
 .GroupLabel {
   box-sizing: border-box;
   padding-block: 0.375rem;
-  padding-left: calc(0.625rem + 0.75rem + 0.5rem);
+  padding-left: calc(0.625rem + 1rem + 0.5rem);
   padding-right: 1rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index edcdb7720be..7df3167257d 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -32,7 +32,7 @@ export default function ExampleSelectGrouped() {
                 {groupedProduce.map((group, index) => (
                   <React.Fragment key={group.value}>
                     <Select.Group className="block pb-0.5 last:pb-0">
-                      <Select.GroupLabel className="py-1.5 pr-4 pl-[1.875rem] text-sm leading-5 text-neutral-500 select-none dark:text-neutral-400">
+                      <Select.GroupLabel className="py-1.5 pr-4 pl-[2.125rem] text-sm leading-5 text-neutral-500 select-none dark:text-neutral-400">
                         {group.value}
                       </Select.GroupLabel>
                       {group.items.map((item) => (

From 13d47158bdd361224c8370620dd4d3ad6dd8107e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 17:51:58 +0200
Subject: [PATCH 246/257] Dialog: increase transition duration on outside
 scroll demo

---
 .../demos/outside-scroll/css-modules/index.module.css     | 8 ++++----
 .../dialog/demos/outside-scroll/tailwind/index.tsx        | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
index 79ad9eef19e..bd983999c2c 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
@@ -65,7 +65,7 @@
   position: fixed;
   inset: 0;
   background-color: rgb(0 0 0 / 20%);
-  transition-duration: 350ms;
+  transition-duration: 600ms;
   transition-property: opacity;
   transition-timing-function: var(--ease-out-fast);
 
@@ -84,7 +84,7 @@
   }
 
   &[data-ending-style] {
-    transition-duration: 220ms;
+    transition-duration: 350ms;
     transition-timing-function: cubic-bezier(0.375, 0.015, 0.545, 0.455);
   }
 }
@@ -160,7 +160,7 @@
   background-color: white;
   color: var(--color-neutral-950);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
-  transition: transform 350ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  transition: transform 700ms cubic-bezier(0.45, 1.005, 0, 1.005);
   outline: 0;
 
   @media (prefers-reduced-motion: reduce) {
@@ -180,7 +180,7 @@
 
   &[data-ending-style] {
     transform: translateY(max(100dvh, 100%));
-    transition-duration: 220ms;
+    transition-duration: 350ms;
     transition-timing-function: cubic-bezier(0.375, 0.015, 0.545, 0.455);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
index 547dcf709fd..01248909e53 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/tailwind/index.tsx
@@ -11,7 +11,7 @@ export default function OutsideScrollDialog() {
         Open dialog
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 bg-black/20 dark:bg-black/50 transition-opacity duration-[350ms] ease-[var(--ease-out-fast)] data-starting-style:opacity-0 data-ending-style:opacity-0 data-ending-style:duration-[220ms] data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] supports-[-webkit-touch-callout:none]:absolute" />
+        <Dialog.Backdrop className="fixed inset-0 bg-black/20 dark:bg-black/50 transition-opacity duration-[600ms] ease-[var(--ease-out-fast)] data-starting-style:opacity-0 data-ending-style:opacity-0 data-ending-style:duration-[350ms] data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] supports-[-webkit-touch-callout:none]:absolute" />
         <Dialog.Viewport className="group/dialog fixed inset-0">
           <ScrollArea.Root
             style={{ position: undefined }}
@@ -22,7 +22,7 @@ export default function OutsideScrollDialog() {
                 <Dialog.Popup
                   ref={popupRef}
                   initialFocus={popupRef}
-                  className="outline-0 relative mx-auto my-16 flex w-[min(40rem,calc(100vw-2rem))] flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate] duration-[350ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-starting-style:translate-y-[100dvh] data-ending-style:translate-y-[max(100dvh,100%)] data-ending-style:duration-[220ms] data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] motion-reduce:transition-none"
+                  className="outline-0 relative mx-auto my-16 flex w-[min(40rem,calc(100vw-2rem))] flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[translate] duration-[700ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] data-starting-style:translate-y-[100dvh] data-ending-style:translate-y-[max(100dvh,100%)] data-ending-style:duration-[350ms] data-ending-style:ease-[cubic-bezier(0.375,0.015,0.545,0.455)] motion-reduce:transition-none"
                 >
                   <div className="relative flex flex-col gap-1 pr-8">
                     <Dialog.Title className="text-base font-bold">Dialog</Dialog.Title>

From 07eaa3414afcbe31668bc6445f6890675c716172 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 18:00:02 +0200
Subject: [PATCH 247/257] Docs shell: make all outlines black

---
 docs/src/components/Accordion.css                           | 2 +-
 docs/src/components/CodeBlock/CodeBlock.css                 | 2 +-
 docs/src/components/Demo/Demo.css                           | 4 ++--
 docs/src/components/Header.css                              | 4 ++--
 docs/src/components/InstallationBlock/InstallationBlock.css | 2 +-
 docs/src/components/MobileNav.css                           | 4 ++--
 docs/src/components/QuickNav/QuickNav.css                   | 2 +-
 docs/src/components/ReleaseTimeline/ReleaseTimeline.css     | 2 +-
 docs/src/components/ScrollArea.css                          | 2 +-
 docs/src/components/Search/SearchBar.css                    | 2 +-
 docs/src/components/SideNav.css                             | 4 ++--
 docs/src/components/SkipNav.css                             | 2 +-
 docs/src/components/Subtitle/MarkdownLink.css               | 2 +-
 13 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/docs/src/components/Accordion.css b/docs/src/components/Accordion.css
index 1711fc0ed91..b224b9172e0 100644
--- a/docs/src/components/Accordion.css
+++ b/docs/src/components/Accordion.css
@@ -65,7 +65,7 @@
     }
 
     &:focus-visible {
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       z-index: 1;
     }
 
diff --git a/docs/src/components/CodeBlock/CodeBlock.css b/docs/src/components/CodeBlock/CodeBlock.css
index e9655565026..d820a0d6494 100644
--- a/docs/src/components/CodeBlock/CodeBlock.css
+++ b/docs/src/components/CodeBlock/CodeBlock.css
@@ -51,7 +51,7 @@
     /* Scroll containers may be focusable */
     &:focus-visible {
       position: relative;
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -1px;
       z-index: 1;
     }
diff --git a/docs/src/components/Demo/Demo.css b/docs/src/components/Demo/Demo.css
index 69943702bcd..007eccd35c0 100644
--- a/docs/src/components/Demo/Demo.css
+++ b/docs/src/components/Demo/Demo.css
@@ -42,7 +42,7 @@
 
     /* Scroll containers may be focusable */
     &:focus-visible {
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -1px;
       z-index: 1;
     }
@@ -90,7 +90,7 @@
     /* Scroll containers may be focusable */
     &:focus-visible {
       position: relative;
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -1px;
       z-index: 1;
     }
diff --git a/docs/src/components/Header.css b/docs/src/components/Header.css
index fce3d8cfd30..e71e46f5163 100644
--- a/docs/src/components/Header.css
+++ b/docs/src/components/Header.css
@@ -50,7 +50,7 @@
 
     &:focus-visible {
       z-index: 1;
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -2px;
     }
 
@@ -101,7 +101,7 @@
 
     &:focus-visible {
       border-radius: var(--radius-6);
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -1px;
     }
   }
diff --git a/docs/src/components/InstallationBlock/InstallationBlock.css b/docs/src/components/InstallationBlock/InstallationBlock.css
index f63441fd8a5..e7726246a8e 100644
--- a/docs/src/components/InstallationBlock/InstallationBlock.css
+++ b/docs/src/components/InstallationBlock/InstallationBlock.css
@@ -52,7 +52,7 @@
     }
 
     &:focus-visible::before {
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -1px;
     }
   }
diff --git a/docs/src/components/MobileNav.css b/docs/src/components/MobileNav.css
index 66d62c5c02c..8274a168498 100644
--- a/docs/src/components/MobileNav.css
+++ b/docs/src/components/MobileNav.css
@@ -197,7 +197,7 @@
     padding-inline: var(--mobile-nav-item-padding-x);
 
     &:focus-visible {
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -1px;
     }
 
@@ -257,7 +257,7 @@
     backdrop-filter: blur(1rem);
 
     &:focus-visible {
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -1px;
     }
 
diff --git a/docs/src/components/QuickNav/QuickNav.css b/docs/src/components/QuickNav/QuickNav.css
index d3d6287b312..ea78d10fe64 100644
--- a/docs/src/components/QuickNav/QuickNav.css
+++ b/docs/src/components/QuickNav/QuickNav.css
@@ -119,7 +119,7 @@
 
     &:focus-visible {
       z-index: 1;
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -2px;
     }
 
diff --git a/docs/src/components/ReleaseTimeline/ReleaseTimeline.css b/docs/src/components/ReleaseTimeline/ReleaseTimeline.css
index d6ba06b3875..476c12a55b0 100644
--- a/docs/src/components/ReleaseTimeline/ReleaseTimeline.css
+++ b/docs/src/components/ReleaseTimeline/ReleaseTimeline.css
@@ -177,7 +177,7 @@
 
     &:focus-visible {
       border-radius: 0.125rem;
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       text-decoration-line: none;
     }
   }
diff --git a/docs/src/components/ScrollArea.css b/docs/src/components/ScrollArea.css
index d9ff61afc5c..712053fc303 100644
--- a/docs/src/components/ScrollArea.css
+++ b/docs/src/components/ScrollArea.css
@@ -5,7 +5,7 @@
     /* Scroll containers may be focusable */
     &:focus-visible {
       position: relative;
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -1px;
       z-index: 1;
     }
diff --git a/docs/src/components/Search/SearchBar.css b/docs/src/components/Search/SearchBar.css
index 424cc88c7b4..506e6210177 100644
--- a/docs/src/components/Search/SearchBar.css
+++ b/docs/src/components/Search/SearchBar.css
@@ -101,7 +101,7 @@
   }
 
   .SearchTrigger:focus-visible {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid var(--gray-t2);
     outline-offset: -1px;
   }
 
diff --git a/docs/src/components/SideNav.css b/docs/src/components/SideNav.css
index 7e8bf277ffd..8050ae43e5f 100644
--- a/docs/src/components/SideNav.css
+++ b/docs/src/components/SideNav.css
@@ -47,7 +47,7 @@
       inset: 0;
       pointer-events: none;
       position: absolute;
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -2px;
       /* Don't inset the outline on the right */
       right: -2px;
@@ -135,7 +135,7 @@
 
     &:focus-visible {
       z-index: 1;
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -1px;
     }
   }
diff --git a/docs/src/components/SkipNav.css b/docs/src/components/SkipNav.css
index 7e752e3ebc8..bcdd08ca5df 100644
--- a/docs/src/components/SkipNav.css
+++ b/docs/src/components/SkipNav.css
@@ -30,7 +30,7 @@
       text-underline-offset: 2px;
       text-decoration-thickness: 1px;
       text-decoration-color: color-mix(in oklab, var(--color-blue), transparent);
-      outline: 2px solid var(--color-blue);
+      outline: 2px solid var(--gray-t2);
       outline-offset: -2px;
       border-radius: var(--radius-4);
     }
diff --git a/docs/src/components/Subtitle/MarkdownLink.css b/docs/src/components/Subtitle/MarkdownLink.css
index 8c8885c883f..967050e25fa 100644
--- a/docs/src/components/Subtitle/MarkdownLink.css
+++ b/docs/src/components/Subtitle/MarkdownLink.css
@@ -19,7 +19,7 @@
   }
 
   .MarkdownLinkAnchor:focus-visible .MarkdownLink {
-    outline: 2px solid var(--color-blue);
+    outline: 2px solid var(--gray-t2);
     outline-offset: -2px;
     border-radius: var(--radius-4);
   }

From 32ee10b11ba62df4795a7e9b140852a2d6e94a02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 18:15:18 +0200
Subject: [PATCH 248/257] Search: add focus rings

---
 docs/src/components/Search/SearchBar.css | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/docs/src/components/Search/SearchBar.css b/docs/src/components/Search/SearchBar.css
index 506e6210177..cef7df9e0f7 100644
--- a/docs/src/components/Search/SearchBar.css
+++ b/docs/src/components/Search/SearchBar.css
@@ -331,7 +331,6 @@
   .SearchPopupContained {
     max-height: min(29.5rem, calc(100vh - 6rem));
     width: min(34rem, calc(100vw - 2rem));
-    overflow: hidden;
   }
 
   .SearchPopupDefault {
@@ -358,7 +357,13 @@
   .SearchHeadContained {
     flex-shrink: 0;
     border-bottom: 1px solid var(--gray-c1);
+    border-radius: 1rem 1rem 0 0;
     padding: 0.5rem 0.5rem 0.375rem;
+
+    &:has(.SearchInput:focus-visible) {
+      outline: 2px solid var(--gray-t2);
+      outline-offset: -1px;
+    }
   }
 
   .SearchHeadDefault {
@@ -377,7 +382,11 @@
     display: flex;
     min-height: 0;
     flex: 1;
-    overflow: hidden;
+
+    &:has(.SearchScrollAreaViewport:focus-visible) {
+      outline: 2px solid var(--gray-t2);
+      outline-offset: -1px;
+    }
   }
 
   .SearchScrollAreaViewport {
@@ -387,6 +396,7 @@
     overscroll-behavior: contain;
     scroll-padding-top: 2.25rem;
     scroll-padding-bottom: 0.5rem;
+    outline: none;
   }
 
   .SearchList {
@@ -433,6 +443,11 @@
   .SearchRootScrollable {
     height: 100%;
     overscroll-behavior: contain;
+
+    &:focus-visible {
+      outline: 2px solid var(--gray-t2);
+      outline-offset: -2px;
+    }
   }
 
   .SearchRootScrollable[data-ending-style] {

From 04075f7c2602465044aa94e393d0d4782922b496 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 18:19:35 +0200
Subject: [PATCH 249/257] TypeRef: tweak focus ring

---
 docs/src/components/TypeRef/TypeRef.css | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/docs/src/components/TypeRef/TypeRef.css b/docs/src/components/TypeRef/TypeRef.css
index b522a368e8e..0e7b2dfcbab 100644
--- a/docs/src/components/TypeRef/TypeRef.css
+++ b/docs/src/components/TypeRef/TypeRef.css
@@ -4,16 +4,22 @@
     border: 0;
     background: transparent;
     padding: 0;
+    border-radius: var(--radius-4);
     font: inherit;
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-decoration-style: dotted;
     text-decoration-color: color-mix(in oklab, var(--color-violet), transparent);
     text-underline-offset: 3px;
-  }
 
-  .TypeRefTrigger:hover {
-    text-decoration-color: var(--color-violet);
+    &:hover {
+      text-decoration-color: var(--color-violet);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--gray-t2);
+      outline-offset: 2px;
+    }
   }
 
   .TypeRefPopup {

From b368ac51d45f434f6e63593dbc7200377c541599 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 18:27:47 +0200
Subject: [PATCH 250/257] Quick nav focus ring

---
 docs/src/components/QuickNav/QuickNav.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/docs/src/components/QuickNav/QuickNav.css b/docs/src/components/QuickNav/QuickNav.css
index ea78d10fe64..179bf741d68 100644
--- a/docs/src/components/QuickNav/QuickNav.css
+++ b/docs/src/components/QuickNav/QuickNav.css
@@ -62,6 +62,11 @@
 
     /* Scroll containers are focusable */
     outline: 0;
+
+    &:focus-visible {
+      outline: 2px solid var(--gray-t2);
+      outline-offset: -2px;
+    }
   }
 
   .QuickNavScrollbar {

From cf8ecae6bea16d8f8b0d653f2d000b0f3ecb1b54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 18:30:40 +0200
Subject: [PATCH 251/257] Installation block focus ring

---
 .../components/InstallationBlock/InstallationBlock.css | 10 ++++++++++
 .../components/InstallationBlock/InstallationBlock.tsx |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/docs/src/components/InstallationBlock/InstallationBlock.css b/docs/src/components/InstallationBlock/InstallationBlock.css
index e7726246a8e..e5f4414ca88 100644
--- a/docs/src/components/InstallationBlock/InstallationBlock.css
+++ b/docs/src/components/InstallationBlock/InstallationBlock.css
@@ -69,4 +69,14 @@
     pointer-events: none;
     grid-area: 1 / 1;
   }
+
+  .InstallationBlockTabPanel {
+    border-bottom-left-radius: var(--radius-4);
+    border-bottom-right-radius: var(--radius-4);
+    outline: 0;
+
+    &:focus-visible {
+      outline: 2px solid var(--gray-t2);
+    }
+  }
 }
diff --git a/docs/src/components/InstallationBlock/InstallationBlock.tsx b/docs/src/components/InstallationBlock/InstallationBlock.tsx
index 757ccc8cfb1..ff0b62ea2c1 100644
--- a/docs/src/components/InstallationBlock/InstallationBlock.tsx
+++ b/docs/src/components/InstallationBlock/InstallationBlock.tsx
@@ -51,7 +51,7 @@ export function InstallationBlock(props: InstallationBlockProps) {
         </CodeBlock.Panel>
 
         {INSTALLATION_PACKAGE_MANAGERS.map((pm) => (
-          <Tabs.Panel key={pm.value} value={pm.value}>
+          <Tabs.Panel key={pm.value} value={pm.value} className="InstallationBlockTabPanel">
             <CodeBlock.Pre>
               <Code className="language-bash">
                 <span className="frame">

From ec93ea989673c944b272318b8e2ea9fc7da7c376 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 18:33:08 +0200
Subject: [PATCH 252/257] Code block focus ring

---
 docs/src/components/CodeBlock/CodeBlock.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/docs/src/components/CodeBlock/CodeBlock.css b/docs/src/components/CodeBlock/CodeBlock.css
index d820a0d6494..4dfcbe6cd92 100644
--- a/docs/src/components/CodeBlock/CodeBlock.css
+++ b/docs/src/components/CodeBlock/CodeBlock.css
@@ -73,7 +73,15 @@
   }
 
   .CodeBlockViewport {
+    outline: 0;
+    border-bottom-right-radius: var(--radius-6);
+    border-bottom-left-radius: var(--radius-6);
     overscroll-behavior-x: contain;
+
+    &:focus-visible {
+      outline: 2px solid var(--gray-t2);
+      outline-offset: 0;
+    }
   }
 
   .CodeBlockPreInline {

From dd2c6f913bf6c8a10897d036990ea1eb78d1347e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 18:38:09 +0200
Subject: [PATCH 253/257] Tooltip: move aria-label from icons to triggers

---
 .../css-modules/index.tsx                     | 27 ++++++++++++++-----
 .../tailwind/index.tsx                        | 15 ++++++++---
 .../css-modules/index.tsx                     | 15 ++++++++---
 .../detached-triggers-full/tailwind/index.tsx |  9 ++++---
 .../css-modules/index.tsx                     |  4 +--
 .../tailwind/index.tsx                        |  4 +--
 .../tooltip/demos/hero/css-modules/index.tsx  | 12 ++++-----
 .../tooltip/demos/hero/tailwind/index.tsx     | 12 ++++-----
 8 files changed, 65 insertions(+), 33 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx
index d4d184f17b5..6e2a09f1364 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/css-modules/index.tsx
@@ -18,16 +18,31 @@ export default function TooltipDetachedTriggersControlledDemo() {
     <Tooltip.Provider>
       <div className={styles.Container}>
         <div className={styles.ButtonGroup}>
-          <Tooltip.Trigger className={styles.IconButton} handle={demoTooltip} id="trigger-1">
-            <HeadphonesIcon aria-label="Controlled tooltip" />
+          <Tooltip.Trigger
+            className={styles.IconButton}
+            handle={demoTooltip}
+            id="trigger-1"
+            aria-label="Trigger 1"
+          >
+            <HeadphonesIcon aria-hidden="true" />
           </Tooltip.Trigger>
 
-          <Tooltip.Trigger className={styles.IconButton} handle={demoTooltip} id="trigger-2">
-            <StopwatchIcon aria-label="Controlled tooltip" />
+          <Tooltip.Trigger
+            className={styles.IconButton}
+            handle={demoTooltip}
+            id="trigger-2"
+            aria-label="Trigger 2"
+          >
+            <StopwatchIcon aria-hidden="true" />
           </Tooltip.Trigger>
 
-          <Tooltip.Trigger className={styles.IconButton} handle={demoTooltip} id="trigger-3">
-            <TrashIcon aria-label="Controlled tooltip" />
+          <Tooltip.Trigger
+            className={styles.IconButton}
+            handle={demoTooltip}
+            id="trigger-3"
+            aria-label="Trigger 3"
+          >
+            <TrashIcon aria-hidden="true" />
           </Tooltip.Trigger>
         </div>
 
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
index 441906e5624..1fa6a79f0f3 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -30,24 +30,31 @@ export default function TooltipDetachedTriggersControlledDemo() {
     <Tooltip.Provider>
       <div className="flex gap-2 flex-wrap justify-center">
         <div className="flex">
-          <Tooltip.Trigger className={iconButtonClass} handle={demoTooltip} id="trigger-1">
-            <HeadphonesIcon aria-label="Controlled tooltip" />
+          <Tooltip.Trigger
+            className={iconButtonClass}
+            handle={demoTooltip}
+            id="trigger-1"
+            aria-label="Controlled tooltip"
+          >
+            <HeadphonesIcon aria-hidden="true" />
           </Tooltip.Trigger>
 
           <Tooltip.Trigger
             className={`${iconButtonClass} border-l-0`}
             handle={demoTooltip}
             id="trigger-2"
+            aria-label="Controlled tooltip"
           >
-            <StopwatchIcon aria-label="Controlled tooltip" />
+            <StopwatchIcon aria-hidden="true" />
           </Tooltip.Trigger>
 
           <Tooltip.Trigger
             className={`${iconButtonClass} border-l-0`}
             handle={demoTooltip}
             id="trigger-3"
+            aria-label="Controlled tooltip"
           >
-            <TrashIcon aria-label="Controlled tooltip" />
+            <TrashIcon aria-hidden="true" />
           </Tooltip.Trigger>
         </div>
 
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx
index e4f1221e9da..3b906e00391 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.tsx
@@ -13,20 +13,27 @@ export default function TooltipDetachedTriggersFullDemo() {
           className={styles.Button}
           handle={demoTooltip}
           payload="Listen to audio preview"
+          aria-label="Listen to audio preview"
         >
-          <HeadphonesIcon aria-label="Listen to audio preview" />
+          <HeadphonesIcon aria-hidden="true" />
         </Tooltip.Trigger>
 
-        <Tooltip.Trigger className={styles.Button} handle={demoTooltip} payload="Set a timer">
-          <StopwatchIcon aria-label="Set a timer" />
+        <Tooltip.Trigger
+          className={styles.Button}
+          handle={demoTooltip}
+          payload="Set a timer"
+          aria-label="Set a timer"
+        >
+          <StopwatchIcon aria-hidden="true" />
         </Tooltip.Trigger>
 
         <Tooltip.Trigger
           className={styles.Button}
           handle={demoTooltip}
           payload="Delete: This action cannot be undone"
+          aria-label="Delete: This action cannot be undone"
         >
-          <TrashIcon aria-label="Delete: This action cannot be undone" />
+          <TrashIcon aria-hidden="true" />
         </Tooltip.Trigger>
       </div>
 
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
index fec56f309f1..f21261d3e22 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/tailwind/index.tsx
@@ -19,24 +19,27 @@ export default function TooltipDetachedTriggersFullDemo() {
           className={triggerClass}
           handle={demoTooltip}
           payload="Listen to audio preview"
+          aria-label="Listen to audio preview"
         >
-          <HeadphonesIcon aria-label="Listen to audio preview" />
+          <HeadphonesIcon aria-hidden="true" />
         </Tooltip.Trigger>
 
         <Tooltip.Trigger
           className={`${triggerClass} border-l-0`}
           handle={demoTooltip}
           payload="Set a timer"
+          aria-label="Set a timer"
         >
-          <StopwatchIcon aria-label="Set a timer" />
+          <StopwatchIcon aria-hidden="true" />
         </Tooltip.Trigger>
 
         <Tooltip.Trigger
           className={`${triggerClass} border-l-0`}
           handle={demoTooltip}
           payload="Delete: This action cannot be undone"
+          aria-label="Delete: This action cannot be undone"
         >
-          <TrashIcon aria-label="Delete: This action cannot be undone" />
+          <TrashIcon aria-hidden="true" />
         </Tooltip.Trigger>
       </div>
 
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx
index f72baea3a62..34f61b812d0 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/css-modules/index.tsx
@@ -8,8 +8,8 @@ const demoTooltip = Tooltip.createHandle();
 export default function TooltipDetachedTriggersSimpleDemo() {
   return (
     <Tooltip.Provider>
-      <Tooltip.Trigger className={styles.IconButton} handle={demoTooltip}>
-        <TrashIcon aria-label="Delete" />
+      <Tooltip.Trigger className={styles.IconButton} handle={demoTooltip} aria-label="Delete">
+        <TrashIcon aria-hidden="true" />
       </Tooltip.Trigger>
 
       <Tooltip.Root handle={demoTooltip}>
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
index 7a9a7584e1b..fec48a5a585 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-simple/tailwind/index.tsx
@@ -17,8 +17,8 @@ const arrowClass =
 export default function TooltipDetachedTriggersSimpleDemo() {
   return (
     <Tooltip.Provider>
-      <Tooltip.Trigger className={triggerClass} handle={demoTooltip}>
-        <TrashIcon aria-label="Delete" />
+      <Tooltip.Trigger className={triggerClass} handle={demoTooltip} aria-label="Delete">
+        <TrashIcon aria-hidden="true" />
       </Tooltip.Trigger>
 
       <Tooltip.Root handle={demoTooltip}>
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.tsx
index 961399b1733..7750806d31c 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.tsx
@@ -7,8 +7,8 @@ export default function ExampleTooltip() {
     <Tooltip.Provider>
       <div className={styles.Panel}>
         <Tooltip.Root>
-          <Tooltip.Trigger className={styles.Button}>
-            <BoldIcon aria-label="Bold" />
+          <Tooltip.Trigger className={styles.Button} aria-label="Bold">
+            <BoldIcon aria-hidden="true" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
             <Tooltip.Positioner sideOffset={11}>
@@ -21,8 +21,8 @@ export default function ExampleTooltip() {
         </Tooltip.Root>
 
         <Tooltip.Root>
-          <Tooltip.Trigger className={styles.Button}>
-            <ItalicIcon aria-label="Italic" />
+          <Tooltip.Trigger className={styles.Button} aria-label="Italic">
+            <ItalicIcon aria-hidden="true" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
             <Tooltip.Positioner sideOffset={11}>
@@ -35,8 +35,8 @@ export default function ExampleTooltip() {
         </Tooltip.Root>
 
         <Tooltip.Root>
-          <Tooltip.Trigger className={styles.Button}>
-            <UnderlineIcon aria-label="Underline" />
+          <Tooltip.Trigger className={styles.Button} aria-label="Underline">
+            <UnderlineIcon aria-hidden="true" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
             <Tooltip.Positioner sideOffset={11}>
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
index 8e4e9d0fea9..cf2331ec290 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/tailwind/index.tsx
@@ -15,8 +15,8 @@ export default function ExampleTooltip() {
     <Tooltip.Provider>
       <div className="flex border border-neutral-950 bg-white dark:border-white dark:bg-neutral-950">
         <Tooltip.Root>
-          <Tooltip.Trigger className={triggerClass}>
-            <BoldIcon aria-label="Bold" />
+          <Tooltip.Trigger className={triggerClass} aria-label="Bold">
+            <BoldIcon aria-hidden="true" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
             <Tooltip.Positioner sideOffset={11}>
@@ -29,8 +29,8 @@ export default function ExampleTooltip() {
         </Tooltip.Root>
 
         <Tooltip.Root>
-          <Tooltip.Trigger className={triggerClass}>
-            <ItalicIcon aria-label="Italic" />
+          <Tooltip.Trigger className={triggerClass} aria-label="Italic">
+            <ItalicIcon aria-hidden="true" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
             <Tooltip.Positioner sideOffset={11}>
@@ -43,8 +43,8 @@ export default function ExampleTooltip() {
         </Tooltip.Root>
 
         <Tooltip.Root>
-          <Tooltip.Trigger className={triggerClass}>
-            <UnderlineIcon aria-label="Underline" />
+          <Tooltip.Trigger className={triggerClass} aria-label="Underline">
+            <UnderlineIcon aria-hidden="true" />
           </Tooltip.Trigger>
           <Tooltip.Portal>
             <Tooltip.Positioner sideOffset={11}>

From c52eb9d919ed3e21a1fc8f97eb19ff91b4a51071 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 19:18:02 +0200
Subject: [PATCH 254/257] Fix regression test box-sizing setup?

---
 test/regressions/TestViewer.tsx | 36 +++++++++++++++++++--------------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/test/regressions/TestViewer.tsx b/test/regressions/TestViewer.tsx
index 18d9309065b..db7c3a75543 100644
--- a/test/regressions/TestViewer.tsx
+++ b/test/regressions/TestViewer.tsx
@@ -35,24 +35,30 @@ function TestViewer(props: { children: React.ReactNode }) {
     };
   }, []);
 
+  // Wrapped in @layer all so Tailwind's preflight (in @layer base) wins for
+  // box-sizing, while unlayered demo styles still win over both. !important
+  // rules still apply everywhere because the !important cascade is inverted
+  // across layers.
   const globalStyles = `
-    html {
-      --webkit-font-smoothing: antialiased;
-      --moz-osx-font-smoothing: grayscale;
-      /* Do the opposite of the docs in order to help catching issues. */
-      box-sizing: content-box;
-    }
+    @layer all {
+      html {
+        --webkit-font-smoothing: antialiased;
+        --moz-osx-font-smoothing: grayscale;
+        /* Do the opposite of the docs in order to help catching issues. */
+        box-sizing: content-box;
+      }
 
-    *, *::before, *::after {
-      box-sizing: inherit;
-      /* Disable transitions to avoid flaky screenshots */
-      transition: none !important;
-      animation: none !important;
-    }
+      *, *::before, *::after {
+        box-sizing: inherit;
+        /* Disable transitions to avoid flaky screenshots */
+        transition: none !important;
+        animation: none !important;
+      }
 
-    body {
-      margin: 0;
-      overflow-x: hidden;
+      body {
+        margin: 0;
+        overflow-x: hidden;
+      }
     }
   `;
 

From 7c99b11696146bb24d9174a736a0a98863eab4ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 19:21:12 +0200
Subject: [PATCH 255/257] =?UTF-8?q?Bye=20CSS=20vars=20on=20CSS=20modules?=
 =?UTF-8?q?=20demos=20=F0=9F=AB=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__snapshots__/mdxToMarkdown.test.mjs.snap | 40 ++++----
 .../accordion/demos/_index.module.css         | 14 +--
 .../alert-dialog/demos/_index.module.css      | 38 ++++----
 .../demos/hero/css-modules/index.module.css   | 38 ++++----
 .../demos/async/css-modules/index.module.css  | 36 +++----
 .../css-modules/index.module.css              | 28 +++---
 .../css-modules/index.module.css              | 78 +++++++--------
 .../css-modules/index.module.css              | 36 +++----
 .../demos/grid/css-modules/index.module.css   | 78 +++++++--------
 .../grouped/css-modules/index.module.css      | 36 +++----
 .../demos/hero/css-modules/index.module.css   | 32 +++----
 .../demos/inline/css-modules/index.module.css | 24 ++---
 .../demos/limit/css-modules/index.module.css  | 32 +++----
 .../virtualized/css-modules/index.module.css  | 24 ++---
 .../demos/hero/css-modules/index.module.css   |  6 +-
 .../demos/hero/css-modules/index.module.css   | 24 ++---
 .../loading/css-modules/index.module.css      | 24 ++---
 .../demos/hero/css-modules/index.module.css   | 14 +--
 .../demos/nested/css-modules/index.module.css | 14 +--
 .../demos/parent/css-modules/index.module.css | 14 +--
 .../demos/hero/css-modules/index.module.css   | 14 +--
 .../demos/hero/css-modules/index.module.css   | 26 ++---
 .../css-modules/index.module.css              | 62 ++++++------
 .../async-single/css-modules/index.module.css | 46 ++++-----
 .../creatable/css-modules/index.module.css    | 94 +++++++++----------
 .../grouped/css-modules/index.module.css      | 40 ++++----
 .../demos/hero/css-modules/index.module.css   | 36 +++----
 .../css-modules/index.module.css              | 58 ++++++------
 .../multiple/css-modules/index.module.css     | 54 +++++------
 .../virtualized/css-modules/index.module.css  | 24 ++---
 .../demos/hero/css-modules/index.module.css   | 22 ++---
 .../submenu/css-modules/index.module.css      | 34 +++----
 .../components/dialog/demos/_index.module.css | 34 +++----
 .../css-modules/index.module.css              | 46 ++++-----
 .../demos/hero/css-modules/index.module.css   | 34 +++----
 .../css-modules/index.module.css              | 46 ++++-----
 .../demos/nested/css-modules/index.module.css | 42 ++++-----
 .../css-modules/index.module.css              | 60 ++++++------
 .../uncontained/css-modules/index.module.css  | 46 ++++-----
 .../demos/hero/css-modules/index.module.css   | 36 +++----
 .../css-modules/index.module.css              | 46 ++++-----
 .../mobile-nav/css-modules/index.module.css   | 68 +++++++-------
 .../demos/nested/css-modules/index.module.css | 72 +++++++-------
 .../non-modal/css-modules/index.module.css    | 36 +++----
 .../position/css-modules/index.module.css     | 38 ++++----
 .../snap-points/css-modules/index.module.css  | 48 +++++-----
 .../swipe-area/css-modules/index.module.css   | 52 +++++-----
 .../uncontained/css-modules/index.module.css  | 62 ++++++------
 .../demos/hero/css-modules/index.module.css   | 22 ++---
 .../demos/hero/css-modules/index.module.css   | 28 +++---
 .../form-action/css-modules/index.module.css  | 42 ++++-----
 .../demos/hero/css-modules/index.module.css   | 42 ++++-----
 .../demos/zod/css-modules/index.module.css    | 42 ++++-----
 .../demos/hero/css-modules/index.module.css   | 14 +--
 .../components/menu/demos/_index.module.css   | 76 +++++++--------
 .../demos/arrow/css-modules/index.module.css  | 44 ++++-----
 .../css-modules/index.module.css              | 44 ++++-----
 .../group-labels/css-modules/index.module.css | 48 +++++-----
 .../demos/hero/css-modules/index.module.css   | 44 ++++-----
 .../css-modules/index.module.css              | 44 ++++-----
 .../radio-items/css-modules/index.module.css  | 44 ++++-----
 .../submenu/css-modules/index.module.css      | 50 +++++-----
 .../demos/hero/css-modules/index.module.css   | 40 ++++----
 .../demos/hero/css-modules/index.module.css   | 10 +-
 .../demos/hero/css-modules/index.module.css   | 38 ++++----
 .../css-modules/index.module.css              | 64 ++++++-------
 .../demos/nested/css-modules/index.module.css | 38 ++++----
 .../demos/hero/css-modules/index.module.css   | 32 +++----
 .../alphanumeric/css-modules/index.module.css | 14 +--
 .../css-modules/index.module.css              | 38 ++++----
 .../css-modules/index.module.css              | 18 ++--
 .../grouped/css-modules/index.module.css      | 12 +--
 .../demos/hero/css-modules/index.module.css   | 14 +--
 .../password/css-modules/index.module.css     | 14 +--
 .../popover/demos/_index.module.css           | 42 ++++-----
 .../css-modules/index.module.css              | 28 +++---
 .../css-modules/index.module.css              | 30 +++---
 .../preview-card/demos/index.module.css       | 46 ++++-----
 .../demos/hero/css-modules/index.module.css   | 10 +-
 .../demos/hero/css-modules/index.module.css   | 14 +--
 .../demos/both/css-modules/index.module.css   | 14 +--
 .../demos/hero/css-modules/index.module.css   | 10 +-
 .../scroll-fade/css-modules/index.module.css  | 14 +--
 .../grouped/css-modules/index.module.css      | 52 +++++-----
 .../demos/hero/css-modules/index.module.css   | 46 ++++-----
 .../multiple/css-modules/index.module.css     | 44 ++++-----
 .../css-modules/index.module.css              | 54 +++++------
 .../demos/hero/css-modules/index.module.css   | 12 +--
 .../css-modules/index.module.css              | 12 +--
 .../demos/hero/css-modules/index.module.css   | 12 +--
 .../range-slider/css-modules/index.module.css | 12 +--
 .../vertical/css-modules/index.module.css     | 12 +--
 .../demos/hero/css-modules/index.module.css   | 14 +--
 .../demos/hero/css-modules/index.module.css   | 26 ++---
 .../anchored/css-modules/index.module.css     | 80 ++++++++--------
 .../demos/custom/css-modules/index.module.css | 48 +++++-----
 .../deduplicate/css-modules/index.module.css  | 48 +++++-----
 .../demos/hero/css-modules/index.module.css   | 48 +++++-----
 .../position/css-modules/index.module.css     | 48 +++++-----
 .../promise/css-modules/index.module.css      | 56 +++++------
 .../demos/undo/css-modules/index.module.css   | 48 +++++-----
 .../css-modules/index.module.css              | 48 +++++-----
 .../demos/hero/css-modules/index.module.css   | 22 ++---
 .../multiple/css-modules/index.module.css     | 22 ++---
 .../demos/hero/css-modules/index.module.css   | 14 +--
 .../demos/hero/css-modules/index.module.css   | 50 +++++-----
 .../css-modules/index.module.css              | 38 ++++----
 .../demos/hero/css-modules/index.module.css   | 30 +++---
 .../components/tooltip/demos/index.module.css | 62 ++++++------
 .../css-modules/index.module.css              | 26 ++---
 .../css-modules/index.module.css              | 26 ++---
 .../css-modules/index.module.css              | 42 ++++-----
 .../demos/hero/css-modules/index.module.css   | 12 +--
 .../css-modules/index.module.css              | 30 +++---
 .../css-modules/index.module.css              | 16 ++--
 .../demos/render/css-modules/index.module.css |  2 +-
 116 files changed, 2071 insertions(+), 2071 deletions(-)

diff --git a/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap b/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap
index 80e73251564..32941ef06fc 100644
--- a/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap
+++ b/docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap
@@ -98,8 +98,8 @@ This example shows how to implement the component using CSS Modules.
   width: 20rem;
   max-width: 100%;
   flex-direction: column;
-  border: 1px solid var(--color-neutral-950);
-  color: var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
@@ -109,7 +109,7 @@ This example shows how to implement the component using CSS Modules.
 
 .Item {
   & + & {
-    border-top: 1px solid var(--color-neutral-950);
+    border-top: 1px solid oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       border-top: 1px solid white;
@@ -133,7 +133,7 @@ This example shows how to implement the component using CSS Modules.
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -147,17 +147,17 @@ This example shows how to implement the component using CSS Modules.
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:focus-visible {
     position: relative;
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     z-index: 1;
 
     @media (prefers-color-scheme: dark) {
@@ -385,8 +385,8 @@ This example shows how to implement the component using CSS Modules.
   width: 20rem;
   max-width: 100%;
   flex-direction: column;
-  border: 1px solid var(--color-neutral-950);
-  color: var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
@@ -396,7 +396,7 @@ This example shows how to implement the component using CSS Modules.
 
 .Item {
   & + & {
-    border-top: 1px solid var(--color-neutral-950);
+    border-top: 1px solid oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       border-top: 1px solid white;
@@ -420,7 +420,7 @@ This example shows how to implement the component using CSS Modules.
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -434,17 +434,17 @@ This example shows how to implement the component using CSS Modules.
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:focus-visible {
     position: relative;
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     z-index: 1;
 
     @media (prefers-color-scheme: dark) {
@@ -965,16 +965,16 @@ This example shows how to implement the component using CSS Modules.
 .Track {
   width: 100%;
   height: 0.25rem;
-  background-color: var(--color-neutral-200);
+  background-color: oklch(92.2% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-800);
+    background-color: oklch(26.9% 0 0deg);
   }
 }
 
 .Indicator {
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
@@ -986,17 +986,17 @@ This example shows how to implement the component using CSS Modules.
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: 2px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
index 854772623d8..67b041c2e8b 100644
--- a/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/accordion/demos/_index.module.css
@@ -4,8 +4,8 @@
   width: 20rem;
   max-width: 100%;
   flex-direction: column;
-  border: 1px solid var(--color-neutral-950);
-  color: var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
@@ -15,7 +15,7 @@
 
 .Item {
   & + & {
-    border-top: 1px solid var(--color-neutral-950);
+    border-top: 1px solid oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       border-top: 1px solid white;
@@ -39,7 +39,7 @@
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -53,17 +53,17 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:focus-visible {
     position: relative;
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     z-index: 1;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
index 196fec4ca99..aba3d3fe19d 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/_index.module.css
@@ -7,42 +7,42 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -51,21 +51,21 @@
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 }
 
 .DangerButton {
-  color: var(--color-red-700);
+  color: oklch(50.5% 0.213 27.518deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-red-400);
+    color: oklch(70.4% 0.191 22.216deg);
   }
 }
 
@@ -105,9 +105,9 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 1rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 100ms ease-out,
@@ -115,7 +115,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -144,10 +144,10 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
index 97fa5bea30e..de23a0e4799 100644
--- a/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/alert-dialog/demos/hero/css-modules/index.module.css
@@ -7,50 +7,50 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &[data-color='red'] {
-    color: var(--color-red-700);
+    color: oklch(50.5% 0.213 27.518deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-red-400);
+      color: oklch(70.4% 0.191 22.216deg);
     }
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -59,12 +59,12 @@
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 }
@@ -105,9 +105,9 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 1rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 100ms ease-out,
@@ -115,7 +115,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -144,10 +144,10 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
index 0b1f0fe8bdf..7d375c44f8a 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/async/css-modules/index.module.css
@@ -3,7 +3,7 @@
   padding: 0 0.5rem;
   margin: 0;
   border-radius: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 16rem;
   height: 2rem;
   font-family: inherit;
@@ -11,7 +11,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
   @media (any-pointer: coarse) {
@@ -21,20 +21,20 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -50,7 +50,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -64,14 +64,14 @@
 .Popup {
   box-sizing: border-box;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
   max-width: var(--available-width);
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     border: 1px solid white;
     box-shadow: none;
@@ -105,7 +105,7 @@
     color: white;
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
@@ -115,7 +115,7 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -138,17 +138,17 @@
 .MovieYear {
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 
   .Item[data-highlighted] & {
-    color: var(--color-neutral-300);
+    color: oklch(87% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-500);
+      color: oklch(55.6% 0 0deg);
     }
   }
 }
@@ -161,10 +161,10 @@
   padding-left: 0.5rem;
   padding-right: 2rem;
   font-size: 0.875rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
index 5e818316e13..7086b1c7bde 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/auto-highlight/css-modules/index.module.css
@@ -3,7 +3,7 @@
   padding: 0 0.5rem;
   margin: 0;
   border-radius: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 16rem;
   height: 2rem;
   font-family: inherit;
@@ -11,7 +11,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
   @media (any-pointer: coarse) {
@@ -21,20 +21,20 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -50,7 +50,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -64,14 +64,14 @@
 .Popup {
   box-sizing: border-box;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
   max-width: var(--available-width);
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     border: 1px solid white;
     box-shadow: none;
@@ -110,7 +110,7 @@
     color: white;
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
@@ -120,7 +120,7 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -133,9 +133,9 @@
   padding: 1rem 1rem 1rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
index 245f397a697..bf7ec18722e 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css
@@ -8,43 +8,43 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
   cursor: default;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -90,18 +90,18 @@
   width: calc(100vw - 1rem);
   max-width: 28rem;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   transition:
     transform 150ms,
     opacity 150ms;
   max-height: min(36rem, calc(100dvh - 5rem));
   display: flex;
   flex-direction: column;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     border: 1px solid white;
     box-shadow: none;
@@ -129,7 +129,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
   @media (any-pointer: coarse) {
@@ -138,20 +138,20 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -166,7 +166,7 @@
   min-height: 0;
   max-height: min(60dvh, 24rem);
   overflow: hidden;
-  border-top: 1px solid var(--color-neutral-950);
+  border-top: 1px solid oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     border-color: white;
@@ -181,7 +181,7 @@
   scroll-padding-block: 0.25rem;
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -218,10 +218,10 @@
   font-size: 0.875rem;
   line-height: 1;
   font-weight: 400;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -242,10 +242,10 @@
   font-weight: 400;
 
   &[data-highlighted] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 }
@@ -260,18 +260,18 @@
 
 .ItemType {
   font-size: 0.875rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
   white-space: nowrap;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 
   [data-highlighted] & {
-    color: var(--color-neutral-700);
+    color: oklch(37.1% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-300);
+      color: oklch(87% 0 0deg);
     }
   }
 }
@@ -284,11 +284,11 @@
   padding: 1rem 1rem 1rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
   min-height: 8rem;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -318,7 +318,7 @@
 
 .ScrollbarThumb {
   width: 100%;
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     background-color: white;
@@ -330,15 +330,15 @@
   align-items: center;
   justify-content: space-between;
   padding: 0.625rem 0.75rem;
-  border-top: 1px solid var(--color-neutral-950);
+  border-top: 1px solid oklch(14.5% 0 0deg);
   font-size: 0.75rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
   background-color: white;
 
   @media (prefers-color-scheme: dark) {
     border-top: 1px solid white;
-    color: var(--color-neutral-400);
-    background-color: var(--color-neutral-950);
+    color: oklch(70.8% 0 0deg);
+    background-color: oklch(14.5% 0 0deg);
   }
 }
 
@@ -361,14 +361,14 @@
     ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
   font-weight: 400;
   line-height: 1;
-  color: var(--color-neutral-600);
-  background-color: var(--color-neutral-100);
-  border: 1px solid var(--color-neutral-400);
+  color: oklch(43.9% 0 0deg);
+  background-color: oklch(97% 0 0deg);
+  border: 1px solid oklch(70.8% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
-    background-color: var(--color-neutral-900);
-    border: 1px solid var(--color-neutral-600);
+    color: oklch(70.8% 0 0deg);
+    background-color: oklch(20.5% 0 0deg);
+    border: 1px solid oklch(43.9% 0 0deg);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
index 9e2d385cd28..0f8ae4d3106 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/fuzzy-matching/css-modules/index.module.css
@@ -5,7 +5,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -17,7 +17,7 @@
   padding: 0 0.5rem;
   margin: 0;
   border-radius: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 16rem;
   height: 2rem;
   font-family: inherit;
@@ -25,7 +25,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
   @media (any-pointer: coarse) {
@@ -35,20 +35,20 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -64,14 +64,14 @@
 .Popup {
   box-sizing: border-box;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
   max-width: var(--available-width);
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     border: 1px solid white;
     box-shadow: none;
@@ -110,10 +110,10 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 }
@@ -140,11 +140,11 @@
 
 .ItemDescription {
   font-size: 0.875rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
   line-height: 1.25rem;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -152,20 +152,20 @@
   box-sizing: border-box;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
   padding: 0.5rem 1rem 0.5rem 0.5rem;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
 .Item mark {
   background-color: transparent;
-  color: var(--color-blue-800);
+  color: oklch(42.4% 0.199 265.638deg);
   font-weight: 700;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-blue-500);
+    color: oklch(62.3% 0.214 259.815deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
index 49528d515b7..e00c1e24da2 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
@@ -16,14 +16,14 @@
   margin: 0;
   margin-right: -1px;
   border-radius: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-right: 0;
   height: 2rem;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   outline: none;
   background-color: white;
 
@@ -36,20 +36,20 @@
     border: 1px solid white;
     border-right: 0;
     color: white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus {
     position: relative;
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -62,14 +62,14 @@
   box-sizing: border-box;
   width: 2rem;
   height: 2rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.25rem;
   line-height: 1;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
   @media (prefers-color-scheme: dark) {
@@ -78,31 +78,31 @@
   }
 
   &:hover {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -122,11 +122,11 @@
   padding-right: 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   font-family: inherit;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   cursor: default;
   user-select: none;
   min-width: 9rem;
@@ -135,29 +135,29 @@
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
     color: white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -175,7 +175,7 @@
   background: white;
 
   @media (prefers-color-scheme: dark) {
-    background: var(--color-neutral-950);
+    background: oklch(14.5% 0 0deg);
   }
 }
 
@@ -190,7 +190,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
   @media (any-pointer: coarse) {
@@ -199,20 +199,20 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -228,7 +228,7 @@
   --input-container-height: 2rem;
   box-sizing: border-box;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   transform-origin: var(--transform-origin);
   transition:
     transform 150ms,
@@ -236,11 +236,11 @@
   max-width: var(--available-width);
   max-height: 20.5rem;
 
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     border: 1px solid white;
     box-shadow: none;
@@ -273,11 +273,11 @@
   padding: 0.5rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -314,7 +314,7 @@
     color: white;
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
 
     &::before {
@@ -322,10 +322,10 @@
       z-index: -1;
       position: absolute;
       inset: 0;
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
@@ -357,9 +357,9 @@
   padding: 0.75rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
index 82ddccae1ff..d2d0efaac2b 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
@@ -3,7 +3,7 @@
   padding: 0 0.5rem;
   margin: 0;
   border-radius: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 16rem;
   height: 2rem;
   font-family: inherit;
@@ -11,7 +11,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
   @media (any-pointer: coarse) {
@@ -21,20 +21,20 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -50,7 +50,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -64,14 +64,14 @@
 .Popup {
   box-sizing: border-box;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
   max-width: var(--available-width);
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     border: 1px solid white;
     box-shadow: none;
@@ -108,10 +108,10 @@
   padding: 0.5rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -131,7 +131,7 @@
     color: white;
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
@@ -141,7 +141,7 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -152,10 +152,10 @@
 .Separator {
   margin: 0.375rem 1rem;
   height: 1px;
-  background-color: var(--color-neutral-100);
+  background-color: oklch(97% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-800);
+    background-color: oklch(26.9% 0 0deg);
   }
 }
 
@@ -164,9 +164,9 @@
   padding: 1rem 1rem 1rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
index 37a5325796e..521a975f3e2 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/hero/css-modules/index.module.css
@@ -3,7 +3,7 @@
   padding: 0 0.5rem;
   margin: 0;
   border-radius: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 16rem;
   height: 2rem;
   font-family: inherit;
@@ -11,7 +11,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
   @media (any-pointer: coarse) {
@@ -21,20 +21,20 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -50,7 +50,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -64,14 +64,14 @@
 .Popup {
   box-sizing: border-box;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
   max-width: var(--available-width);
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     border: 1px solid white;
     box-shadow: none;
@@ -110,7 +110,7 @@
     color: white;
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
@@ -120,7 +120,7 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -131,10 +131,10 @@
 .Separator {
   margin: 0.375rem 1rem;
   height: 1px;
-  background-color: var(--color-neutral-100);
+  background-color: oklch(97% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-800);
+    background-color: oklch(26.9% 0 0deg);
   }
 }
 
@@ -143,9 +143,9 @@
   padding: 1rem 1rem 1rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
index 08fc3dc27f1..b18b0bdcf1e 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/inline/css-modules/index.module.css
@@ -9,7 +9,7 @@
   padding: 0 0.5rem;
   margin: 0;
   border-radius: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 16rem;
   height: 2rem;
   font-family: inherit;
@@ -17,7 +17,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
   @media (any-pointer: coarse) {
@@ -27,20 +27,20 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -56,7 +56,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -74,14 +74,14 @@
 .Popup {
   box-sizing: border-box;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
   max-width: var(--available-width);
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     border: 1px solid white;
     box-shadow: none;
@@ -121,7 +121,7 @@
     color: white;
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
@@ -131,7 +131,7 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
index 9e9202d08d5..b77280e2385 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/limit/css-modules/index.module.css
@@ -3,7 +3,7 @@
   padding: 0 0.5rem;
   margin: 0;
   border-radius: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 16rem;
   height: 2rem;
   font-family: inherit;
@@ -11,7 +11,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
   @media (any-pointer: coarse) {
@@ -21,20 +21,20 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -50,7 +50,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -65,7 +65,7 @@
   box-sizing: border-box;
   padding-block: 0.25rem;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
   max-height: min(var(--available-height), 22.5rem);
   max-width: var(--available-width);
@@ -73,11 +73,11 @@
   scroll-padding-block: 0.25rem;
   overscroll-behavior: contain;
 
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     border: 1px solid white;
     box-shadow: none;
@@ -102,7 +102,7 @@
     color: white;
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
@@ -112,7 +112,7 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -125,10 +125,10 @@
   padding: 0.5rem 1rem 0.5rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -137,9 +137,9 @@
   padding: 0.5rem 1rem 0.5rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
index 4f84268ba8b..823c6efe8ee 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.module.css
@@ -3,7 +3,7 @@
   padding: 0 0.5rem;
   margin: 0;
   border-radius: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 16rem;
   height: 2rem;
   font-family: inherit;
@@ -11,7 +11,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
   @media (any-pointer: coarse) {
@@ -21,12 +21,12 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -42,7 +42,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -56,14 +56,14 @@
 .Popup {
   box-sizing: border-box;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
   max-width: var(--available-width);
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     border: 1px solid white;
     box-shadow: none;
@@ -106,7 +106,7 @@
     color: white;
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
@@ -116,7 +116,7 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -128,10 +128,10 @@
   box-sizing: border-box;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
   padding: 1rem 1rem 1rem 0.5rem;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css
index 3fddd6f6b90..b0d766924f5 100644
--- a/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/avatar/demos/hero/css-modules/index.module.css
@@ -6,8 +6,8 @@
   border-radius: 100%;
   user-select: none;
   font-weight: 400;
-  color: var(--color-neutral-950);
-  background-color: var(--color-neutral-200);
+  color: oklch(14.5% 0 0deg);
+  background-color: oklch(92.2% 0 0deg);
   font-size: 0.875rem;
   line-height: 1;
   overflow: hidden;
@@ -16,7 +16,7 @@
 
   @media (prefers-color-scheme: dark) {
     color: white;
-    background-color: var(--color-neutral-800);
+    background-color: oklch(26.9% 0 0deg);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
index 8f9d270c789..2b8a29e57c8 100644
--- a/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/hero/css-modules/index.module.css
@@ -7,7 +7,7 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
@@ -15,45 +15,45 @@
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
index 8f9d270c789..2b8a29e57c8 100644
--- a/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/button/demos/loading/css-modules/index.module.css
@@ -7,7 +7,7 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
@@ -15,45 +15,45 @@
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
index 8da4f3e4c90..5861b0af3be 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/hero/css-modules/index.module.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -33,7 +33,7 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   color: white;
@@ -42,23 +42,23 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
-    color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
+    color: oklch(14.5% 0 0deg);
   }
 
   &[data-checked],
   &[data-indeterminate] {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: 2px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
index 8da4f3e4c90..5861b0af3be 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.module.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -33,7 +33,7 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   color: white;
@@ -42,23 +42,23 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
-    color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
+    color: oklch(14.5% 0 0deg);
   }
 
   &[data-checked],
   &[data-indeterminate] {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: 2px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
index 8da4f3e4c90..5861b0af3be 100644
--- a/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox-group/demos/parent/css-modules/index.module.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -33,7 +33,7 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   color: white;
@@ -42,23 +42,23 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
-    color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
+    color: oklch(14.5% 0 0deg);
   }
 
   &[data-checked],
   &[data-indeterminate] {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: 2px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
index da3183f4cab..9be042682a6 100644
--- a/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/checkbox/demos/hero/css-modules/index.module.css
@@ -5,7 +5,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -20,7 +20,7 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   color: white;
@@ -29,23 +29,23 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
-    color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
+    color: oklch(14.5% 0 0deg);
   }
 
   &[data-checked],
   &[data-indeterminate] {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: 2px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
index cb98e5138fe..95984e8c99a 100644
--- a/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/collapsible/demos/hero/css-modules/index.module.css
@@ -4,7 +4,7 @@
   min-height: 9rem;
   flex-direction: column;
   justify-content: center;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -24,10 +24,10 @@
   height: 2rem;
   padding: 0 0.5rem 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -37,30 +37,30 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -73,12 +73,12 @@
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
index 34e613fe9d9..de75d58fc75 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-multiple/css-modules/index.module.css
@@ -12,7 +12,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -25,7 +25,7 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 0.125rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   min-height: 2rem;
   padding: 0.25rem 0.5rem;
@@ -38,7 +38,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 
   &:has(.Chip) {
@@ -46,7 +46,7 @@
   }
 
   &:focus-within {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -68,8 +68,8 @@
   display: flex;
   align-items: center;
   min-height: calc(1.5rem - 2px);
-  background-color: var(--color-neutral-100);
-  color: var(--color-neutral-950);
+  background-color: oklch(97% 0 0deg);
+  color: oklch(14.5% 0 0deg);
   font-size: 0.875rem;
   line-height: 1;
   padding: 0 0.2rem 0 0.4rem;
@@ -79,28 +79,28 @@
   cursor: default;
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-800);
+    background-color: oklch(26.9% 0 0deg);
     color: white;
   }
 
   &:focus-within {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
   @media (hover: hover) {
     &[data-highlighted] {
-      background-color: var(--color-neutral-950);
+      background-color: oklch(14.5% 0 0deg);
       color: white;
 
       @media (prefers-color-scheme: dark) {
         background-color: white;
-        color: var(--color-neutral-950);
+        color: oklch(14.5% 0 0deg);
       }
     }
   }
@@ -120,10 +120,10 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-200);
+      background-color: oklch(92.2% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-700);
+        background-color: oklch(37.1% 0 0deg);
       }
     }
   }
@@ -132,10 +132,10 @@
 .Chip:focus-within .ChipRemove {
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-200);
+        background-color: oklch(92.2% 0 0deg);
       }
     }
   }
@@ -154,7 +154,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   min-width: 3rem;
 
   @media (any-pointer: coarse) {
@@ -163,15 +163,15 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
@@ -188,18 +188,18 @@
 .Popup {
   box-sizing: border-box;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
   max-width: var(--available-width);
   transition:
     opacity 0.1s,
     transform 0.1s;
   transform-origin: var(--transform-origin);
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     border: 1px solid white;
     box-shadow: none;
@@ -230,10 +230,10 @@
   padding-right: 1.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -257,11 +257,11 @@
   box-sizing: border-box;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
   padding: 0.5rem 1rem 0.5rem 0.5rem;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -283,7 +283,7 @@
     &[data-highlighted] {
       z-index: 0;
       position: relative;
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
         color: white;
@@ -296,10 +296,10 @@
       position: absolute;
       inset-block: 0;
       inset-inline: 0;
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
@@ -328,10 +328,10 @@
   flex-wrap: wrap;
   gap: 0.5rem;
   font-size: 0.75rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
index 8d4b4f2e957..0c8ad2a9b08 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/async-single/css-modules/index.module.css
@@ -5,7 +5,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   position: relative;
 
   @media (prefers-color-scheme: dark) {
@@ -18,16 +18,16 @@
   position: relative;
   width: 16rem;
   height: 2rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 
   &:focus-within {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -57,7 +57,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (any-pointer: coarse) {
     font-size: 1rem;
@@ -65,15 +65,15 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
@@ -92,11 +92,11 @@
   height: 100%;
   right: 0;
   border: none;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
   padding: 0;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -108,7 +108,7 @@
   justify-content: center;
   width: 1.5rem;
   height: 100%;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   border: none;
   padding: 0;
   background: none;
@@ -125,7 +125,7 @@
 .Popup {
   box-sizing: border-box;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
   max-width: var(--available-width);
   transition:
@@ -133,11 +133,11 @@
     transform 0.1s;
   transform-origin: var(--transform-origin);
 
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     border: 1px solid white;
     box-shadow: none;
@@ -171,10 +171,10 @@
   padding-right: 1.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -212,7 +212,7 @@
     &[data-highlighted] {
       z-index: 0;
       position: relative;
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
         color: white;
@@ -225,10 +225,10 @@
       position: absolute;
       inset-block: 0;
       inset-inline: 0;
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
@@ -257,10 +257,10 @@
   flex-wrap: wrap;
   gap: 0.5rem;
   font-size: 0.75rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -272,10 +272,10 @@
   box-sizing: border-box;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
   padding: 0.5rem 1rem 0.5rem 0.5rem;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
index 0d9ed90d8c6..170dadbdc2d 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/creatable/css-modules/index.module.css
@@ -12,7 +12,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -25,7 +25,7 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 0.125rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   min-height: 2rem;
   padding: 0.25rem 0.5rem;
@@ -38,7 +38,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 
   &:has(.Chip) {
@@ -46,7 +46,7 @@
   }
 
   &:focus-within {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -68,8 +68,8 @@
   display: flex;
   align-items: center;
   min-height: calc(1.5rem - 2px);
-  background-color: var(--color-neutral-100);
-  color: var(--color-neutral-950);
+  background-color: oklch(97% 0 0deg);
+  color: oklch(14.5% 0 0deg);
   font-size: 0.875rem;
   line-height: 1;
   padding: 0 0.2rem 0 0.4rem;
@@ -79,28 +79,28 @@
   cursor: default;
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-800);
+    background-color: oklch(26.9% 0 0deg);
     color: white;
   }
 
   &:focus-within {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
   @media (hover: hover) {
     &[data-highlighted] {
-      background-color: var(--color-neutral-950);
+      background-color: oklch(14.5% 0 0deg);
       color: white;
 
       @media (prefers-color-scheme: dark) {
         background-color: white;
-        color: var(--color-neutral-950);
+        color: oklch(14.5% 0 0deg);
       }
     }
   }
@@ -120,10 +120,10 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-200);
+      background-color: oklch(92.2% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-700);
+        background-color: oklch(37.1% 0 0deg);
       }
     }
   }
@@ -132,10 +132,10 @@
 .Chip:focus-within .ChipRemove {
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-200);
+        background-color: oklch(92.2% 0 0deg);
       }
     }
   }
@@ -154,7 +154,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   min-width: 3rem;
 
   @media (any-pointer: coarse) {
@@ -163,15 +163,15 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
@@ -189,7 +189,7 @@
   box-sizing: border-box;
   padding-block: 0.25rem;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
   max-width: var(--available-width);
   max-height: min(var(--available-height), 24.5rem);
@@ -200,11 +200,11 @@
     opacity 0.1s,
     transform 0.1s;
   transform-origin: var(--transform-origin);
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     border: 1px solid white;
     box-shadow: none;
@@ -235,7 +235,7 @@
   &[data-selected] {
     z-index: 0;
     position: relative;
-    color: var(--color-neutral-950);
+    color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       color: white;
@@ -258,12 +258,12 @@
       color: white;
 
       @media (prefers-color-scheme: dark) {
-        color: var(--color-neutral-950);
+        color: oklch(14.5% 0 0deg);
       }
     }
 
     &[data-highlighted]::before {
-      background-color: var(--color-neutral-950);
+      background-color: oklch(14.5% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
         background-color: white;
@@ -284,11 +284,11 @@
   box-sizing: border-box;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
   padding: 0.5rem 1rem 0.5rem 0.5rem;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -303,7 +303,7 @@
   border: none;
   background: none;
   text-align: left;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   padding: 0.5rem;
   cursor: default;
 
@@ -350,15 +350,15 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 1.5rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition: all 150ms;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -381,10 +381,10 @@
   margin: 0 0 1rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -394,9 +394,9 @@
   height: 2rem;
   border-radius: 0;
   padding: 0 0.5rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   padding-inline: 0.5rem;
   font-family: inherit;
   font-size: 0.875rem;
@@ -410,20 +410,20 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -449,42 +449,42 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
index 3bee49248b5..337affcbbf7 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
@@ -3,16 +3,16 @@
   position: relative;
   width: 16rem;
   height: 2rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 
   &:focus-within {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -38,7 +38,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
   @media (any-pointer: coarse) {
@@ -47,15 +47,15 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
@@ -71,7 +71,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   position: relative;
 
   @media (prefers-color-scheme: dark) {
@@ -89,11 +89,11 @@
   height: 100%;
   right: 0;
   border: none;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
   padding: 0;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -105,7 +105,7 @@
   justify-content: center;
   width: 1.5rem;
   height: 100%;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   border: none;
   padding: 0;
   background: none;
@@ -122,7 +122,7 @@
 .Popup {
   box-sizing: border-box;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
   max-width: var(--available-width);
   transition:
@@ -130,11 +130,11 @@
     transform 0.1s;
   transform-origin: var(--transform-origin);
 
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     border: 1px solid white;
     box-shadow: none;
@@ -173,10 +173,10 @@
   padding: 0.5rem 0.5rem 0.5rem 2rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -199,7 +199,7 @@
     color: white;
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
@@ -209,7 +209,7 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -230,9 +230,9 @@
   padding: 1rem 1rem 1rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
index d2f6945cce1..f28c144c2d1 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/hero/css-modules/index.module.css
@@ -3,16 +3,16 @@
   position: relative;
   width: 14rem;
   height: 2rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 
   &:focus-within {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -38,7 +38,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (any-pointer: coarse) {
     font-size: 1rem;
@@ -46,15 +46,15 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
@@ -70,7 +70,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   position: relative;
 
   @media (prefers-color-scheme: dark) {
@@ -88,11 +88,11 @@
   height: 100%;
   right: 0;
   border: none;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
   padding: 0;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -104,7 +104,7 @@
   justify-content: center;
   width: 1.5rem;
   height: 100%;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   border: none;
   padding: 0;
   background: none;
@@ -121,7 +121,7 @@
 .Popup {
   box-sizing: border-box;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
   max-width: var(--available-width);
   transition:
@@ -129,11 +129,11 @@
     transform 0.1s;
   transform-origin: var(--transform-origin);
 
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     border: 1px solid white;
     box-shadow: none;
@@ -181,7 +181,7 @@
     color: white;
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
@@ -191,7 +191,7 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -212,9 +212,9 @@
   padding: 1rem 1rem 1rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
index 7c81ccf51b5..97052bdbd82 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/input-inside-popup/css-modules/index.module.css
@@ -16,13 +16,13 @@
   padding-right: 0.25rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1;
   white-space: nowrap;
   font-weight: 400;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   cursor: default;
   background-color: white;
   user-select: none;
@@ -31,37 +31,37 @@
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
     color: white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -70,16 +70,16 @@
   }
 
   &[data-placeholder] {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 }
 
 .TriggerIcon {
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -94,7 +94,7 @@
   background-color: white;
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 }
 
@@ -112,7 +112,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
   @media (any-pointer: coarse) {
@@ -121,20 +121,20 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -146,7 +146,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   cursor: default;
 
   @media (prefers-color-scheme: dark) {
@@ -162,7 +162,7 @@
   --input-container-height: 2rem;
   box-sizing: border-box;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   transform-origin: var(--transform-origin);
   transition:
     transform 150ms,
@@ -170,11 +170,11 @@
   max-width: var(--available-width);
   max-height: 24.5rem;
 
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     border: 1px solid white;
     box-shadow: none;
@@ -225,7 +225,7 @@
     color: white;
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
@@ -235,7 +235,7 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -254,10 +254,10 @@
 .Separator {
   margin: 0.375rem 1rem;
   height: 1px;
-  background-color: var(--color-neutral-100);
+  background-color: oklch(97% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-800);
+    background-color: oklch(26.9% 0 0deg);
   }
 }
 
@@ -265,10 +265,10 @@
   box-sizing: border-box;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
   padding: 1rem 1rem 1rem 0.5rem;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
index f3fb2027c7f..706fd4cfeb3 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/multiple/css-modules/index.module.css
@@ -12,7 +12,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -25,7 +25,7 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 0.125rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   min-height: 2rem;
   padding: 0.25rem 0.5rem;
@@ -38,7 +38,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 
   &:has(.Chip) {
@@ -46,7 +46,7 @@
   }
 
   &:focus-within {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -68,8 +68,8 @@
   display: flex;
   align-items: center;
   min-height: calc(1.5rem - 2px);
-  background-color: var(--color-neutral-100);
-  color: var(--color-neutral-950);
+  background-color: oklch(97% 0 0deg);
+  color: oklch(14.5% 0 0deg);
   font-size: 0.875rem;
   line-height: 1;
   padding: 0 0.2rem 0 0.4rem;
@@ -79,28 +79,28 @@
   cursor: default;
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-800);
+    background-color: oklch(26.9% 0 0deg);
     color: white;
   }
 
   &:focus-within {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
   @media (hover: hover) {
     &[data-highlighted] {
-      background-color: var(--color-neutral-950);
+      background-color: oklch(14.5% 0 0deg);
       color: white;
 
       @media (prefers-color-scheme: dark) {
         background-color: white;
-        color: var(--color-neutral-950);
+        color: oklch(14.5% 0 0deg);
       }
     }
   }
@@ -133,10 +133,10 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-200);
+      background-color: oklch(92.2% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-700);
+        background-color: oklch(37.1% 0 0deg);
       }
     }
   }
@@ -145,10 +145,10 @@
 .Chip:focus-within .ChipRemove {
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-200);
+        background-color: oklch(92.2% 0 0deg);
       }
     }
   }
@@ -167,7 +167,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   min-width: 3rem;
 
   @media (any-pointer: coarse) {
@@ -176,15 +176,15 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
@@ -202,7 +202,7 @@
   box-sizing: border-box;
   padding-block: 0.25rem;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
   max-width: var(--available-width);
   max-height: min(var(--available-height), 24.5rem);
@@ -213,11 +213,11 @@
     opacity 0.1s,
     transform 0.1s;
   transform-origin: var(--transform-origin);
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     border: 1px solid white;
     box-shadow: none;
@@ -248,7 +248,7 @@
   &[data-selected] {
     z-index: 0;
     position: relative;
-    color: var(--color-neutral-950);
+    color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       color: white;
@@ -271,12 +271,12 @@
       color: white;
 
       @media (prefers-color-scheme: dark) {
-        color: var(--color-neutral-950);
+        color: oklch(14.5% 0 0deg);
       }
     }
 
     &[data-highlighted]::before {
-      background-color: var(--color-neutral-950);
+      background-color: oklch(14.5% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
         background-color: white;
@@ -302,10 +302,10 @@
   box-sizing: border-box;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
   padding: 0.5rem 1rem 0.5rem 0.5rem;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
index 84a2c7d44ca..80a420e45d6 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.module.css
@@ -3,7 +3,7 @@
   padding: 0 0.5rem;
   margin: 0;
   border-radius: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 16rem;
   height: 2rem;
   font-family: inherit;
@@ -11,7 +11,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   outline: none;
 
   @media (any-pointer: coarse) {
@@ -21,12 +21,12 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -42,7 +42,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -56,14 +56,14 @@
 .Popup {
   box-sizing: border-box;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   width: var(--anchor-width);
   max-width: var(--available-width);
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     border: 1px solid white;
     box-shadow: none;
@@ -110,7 +110,7 @@
     color: white;
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
@@ -120,7 +120,7 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -140,10 +140,10 @@
   box-sizing: border-box;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
   padding: 1rem 1rem 1rem 0.5rem;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
index f9816a4d98a..0e5a8d4d7a5 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/hero/css-modules/index.module.css
@@ -6,16 +6,16 @@
   width: 15rem;
   height: 12rem;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-weight: 400;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 }
@@ -28,10 +28,10 @@
   box-sizing: border-box;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
@@ -40,7 +40,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -69,7 +69,7 @@
     color: white;
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
@@ -79,7 +79,7 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -87,10 +87,10 @@
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 }
@@ -98,7 +98,7 @@
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     background-color: white;
diff --git a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
index 09b8329fab4..729745b164c 100644
--- a/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/context-menu/demos/submenu/css-modules/index.module.css
@@ -6,16 +6,16 @@
   width: 15rem;
   height: 12rem;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-weight: 400;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 }
@@ -29,10 +29,10 @@
   box-sizing: border-box;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
@@ -41,7 +41,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -81,12 +81,12 @@
   fill: white;
 
   @media (prefers-color-scheme: dark) {
-    fill: var(--color-neutral-950);
+    fill: oklch(14.5% 0 0deg);
   }
 }
 
 .ArrowOuterStroke {
-  fill: var(--color-neutral-950);
+  fill: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     fill: white;
@@ -97,7 +97,7 @@
   fill: white;
 
   @media (prefers-color-scheme: dark) {
-    fill: var(--color-neutral-950);
+    fill: oklch(14.5% 0 0deg);
   }
 }
 
@@ -124,10 +124,10 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
@@ -137,7 +137,7 @@
     color: white;
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
@@ -147,7 +147,7 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -155,7 +155,7 @@
   }
 
   &[data-highlighted][data-popup-open]::before {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -163,10 +163,10 @@
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 }
@@ -181,7 +181,7 @@
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     background-color: white;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
index b3577992306..c12555fc560 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/_index.module.css
@@ -7,52 +7,52 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -97,9 +97,9 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 1rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 100ms ease-out,
@@ -107,7 +107,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -136,10 +136,10 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
index 4396ae8506e..e5dd562a31f 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/close-confirmation/css-modules/index.module.css
@@ -7,52 +7,52 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -96,9 +96,9 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 1rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   translate: -50% calc(-50% + 1.25rem * var(--nested-dialogs));
   scale: calc(1 - 0.1 * var(--nested-dialogs));
@@ -109,7 +109,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -154,10 +154,10 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -178,7 +178,7 @@
   padding: 0.5rem;
   margin: 0;
   border-radius: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 100%;
   min-height: 8rem;
   font-family: inherit;
@@ -186,7 +186,7 @@
   font-weight: 400;
   line-height: 1.25rem;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (any-pointer: coarse) {
     font-size: 1rem;
@@ -195,20 +195,20 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
index dfe76bff869..070e3ffa9d2 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css
@@ -7,52 +7,52 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -97,9 +97,9 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 1rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 100ms ease-out,
@@ -107,7 +107,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -136,10 +136,10 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
index c3365bf99c0..2adbce35a4a 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/inside-scroll/css-modules/index.module.css
@@ -7,52 +7,52 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -135,7 +135,7 @@
 
 .ScrollbarThumb {
   width: 100%;
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     background-color: white;
@@ -150,9 +150,9 @@
   width: min(40rem, calc(100vw - 2rem));
   max-height: 100%;
   max-width: 100%;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition:
     transform 100ms ease-out,
@@ -161,7 +161,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -178,7 +178,7 @@
   flex-direction: column;
   gap: 0.25rem;
   padding: 1rem;
-  border-bottom: 1px solid var(--color-neutral-950);
+  border-bottom: 1px solid oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     border-color: white;
@@ -196,10 +196,10 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -211,7 +211,7 @@
   overflow: hidden;
 
   &:has(.BodyViewport:focus-visible) {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: 0;
 
     @media (prefers-color-scheme: dark) {
@@ -252,10 +252,10 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-700);
+  color: oklch(37.1% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-300);
+    color: oklch(87% 0 0deg);
   }
 }
 
@@ -264,7 +264,7 @@
   justify-content: flex-end;
   gap: 0.75rem;
   padding: 1rem;
-  border-top: 1px solid var(--color-neutral-950);
+  border-top: 1px solid oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     border-color: white;
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
index 825919fa35b..05fb6d7649e 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/nested/css-modules/index.module.css
@@ -7,52 +7,52 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -76,7 +76,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
@@ -85,16 +85,16 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-200);
+      background-color: oklch(92.2% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -138,9 +138,9 @@
   max-width: calc(100vw - 3rem);
   margin-top: -2rem;
   padding: 1rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   translate: -50% calc(-50% + 1.25rem * var(--nested-dialogs));
   scale: calc(1 - 0.1 * var(--nested-dialogs));
@@ -151,7 +151,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -195,10 +195,10 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
index bd983999c2c..65b1ca7cc84 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/outside-scroll/css-modules/index.module.css
@@ -7,52 +7,52 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -140,7 +140,7 @@
 
 .ScrollbarThumb {
   width: 100%;
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     background-color: white;
@@ -156,9 +156,9 @@
   width: min(40rem, calc(100vw - 2rem));
   padding: 1rem;
   margin: 4rem auto;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition: transform 700ms cubic-bezier(0.45, 1.005, 0, 1.005);
   outline: 0;
@@ -169,7 +169,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -204,10 +204,10 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -224,7 +224,7 @@
   padding: 0;
   border: none;
   background-color: transparent;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -232,24 +232,24 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -282,10 +282,10 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-700);
+  color: oklch(37.1% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-300);
+    color: oklch(87% 0 0deg);
   }
 }
 
@@ -293,15 +293,15 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
 .FooterLink {
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   text-decoration: underline;
   text-decoration-thickness: 1px;
   text-underline-offset: 0.16em;
@@ -317,7 +317,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: 2px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
index 48652c88b7e..bb9e85438f9 100644
--- a/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/dialog/demos/uncontained/css-modules/index.module.css
@@ -7,52 +7,52 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -122,15 +122,15 @@
   max-width: 70rem;
   padding: 1rem;
   pointer-events: auto;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -152,9 +152,9 @@
   width: 2rem;
   height: 2rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (min-width: 80rem) {
@@ -163,31 +163,31 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
index f84483ebe4d..5dfb3080522 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css
@@ -7,52 +7,52 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -118,9 +118,9 @@
   padding: 1.5rem;
   padding-right: calc(1.5rem + var(--bleed));
   margin-right: calc(-1 * var(--bleed));
-  border-left: 1px solid var(--color-neutral-950);
+  border-left: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   outline: 0;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
@@ -132,7 +132,7 @@
 
   @media (prefers-color-scheme: dark) {
     border-left: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -153,7 +153,7 @@
   @supports (-webkit-touch-callout: none) {
     --bleed: 0px;
     margin-right: 0;
-    border: 1px solid var(--color-neutral-950);
+    border: 1px solid oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       border: 1px solid white;
@@ -179,10 +179,10 @@
   margin: 0 0 1.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
index f6d4fd89e0a..8d6c54be266 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css
@@ -15,10 +15,10 @@
     border-radius 0.25s cubic-bezier(0.32, 0.72, 0, 1);
   transform-origin: center top;
   will-change: transform;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   contain: layout;
   padding: 1rem;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   background-color: white;
   transition-duration:
     calc(400ms * var(--indent-transition)), calc(250ms * var(--indent-transition));
@@ -26,7 +26,7 @@
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
     color: white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 
   &[data-active] {
@@ -50,7 +50,7 @@
   background-color: black;
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-300);
+    background-color: oklch(87% 0 0deg);
   }
 }
 
@@ -63,52 +63,52 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -162,9 +162,9 @@
   margin-bottom: calc(-1 * var(--bleed));
   padding: 1rem 1.5rem 1.5rem;
   padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + var(--bleed));
-  border-top: 1px solid var(--color-neutral-950);
+  border-top: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   outline: 0;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
@@ -175,7 +175,7 @@
 
   @media (prefers-color-scheme: dark) {
     border-top: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -204,10 +204,10 @@
   width: 3rem;
   height: 0.25rem;
   margin: 0 auto 1rem;
-  background-color: var(--color-neutral-300);
+  background-color: oklch(87% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-700);
+    background-color: oklch(37.1% 0 0deg);
   }
 }
 
@@ -224,11 +224,11 @@
   margin: 0 0 1.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
   text-align: center;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
index 205d6bbc4f4..840a71e91cb 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css
@@ -7,52 +7,52 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -166,15 +166,15 @@
   display: flex;
   flex-direction: column;
   padding: 1rem 1.5rem 1.5rem;
-  border-top: 1px solid var(--color-neutral-950);
+  border-top: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   transition: box-shadow 350ms cubic-bezier(0.375, 0.015, 0.545, 0.455);
 
   @media (prefers-color-scheme: dark) {
     border-top: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 }
@@ -202,7 +202,7 @@
 
 @media (min-width: 42rem) {
   .Panel {
-    border: 1px solid var(--color-neutral-950);
+    border: 1px solid oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       border: 1px solid white;
@@ -213,11 +213,11 @@
 .Handle {
   width: 3rem;
   height: 0.25rem;
-  background-color: var(--color-neutral-300);
+  background-color: oklch(87% 0 0deg);
   justify-self: center;
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-700);
+    background-color: oklch(37.1% 0 0deg);
   }
 }
 
@@ -229,7 +229,7 @@
   justify-content: center;
   border: 0;
   background-color: transparent;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   justify-self: end;
 
   @media (prefers-color-scheme: dark) {
@@ -238,24 +238,24 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -275,10 +275,10 @@
   margin: 0 0 1.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -309,7 +309,7 @@
   width: 100%;
   height: 3rem;
   padding: 0 1rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: inherit;
@@ -318,29 +318,29 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -381,5 +381,5 @@
 .ScrollbarThumb {
   width: 100%;
   border-radius: inherit;
-  background-color: var(--color-neutral-500);
+  background-color: oklch(55.6% 0 0deg);
 }
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
index 6c1658ec028..3d572c27651 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/nested/css-modules/index.module.css
@@ -7,52 +7,52 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -133,9 +133,9 @@
   padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + var(--bleed));
   border-width: 1px 1px 0;
   border-style: solid;
-  border-color: var(--color-neutral-950);
+  border-color: oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   outline: 0;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
@@ -150,7 +150,7 @@
 
   @media (prefers-color-scheme: dark) {
     border-color: white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -212,11 +212,11 @@
   width: 3rem;
   height: 0.25rem;
   margin: 0 auto 1rem;
-  background-color: var(--color-neutral-300);
+  background-color: oklch(87% 0 0deg);
   transition: opacity 0.2s;
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-700);
+    background-color: oklch(37.1% 0 0deg);
   }
 
   [data-nested-drawer-open] & {
@@ -241,11 +241,11 @@
   margin: 0 0 1.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
   text-align: center;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -263,10 +263,10 @@
 .List {
   margin: 0 0 1.5rem;
   padding-left: 1.25rem;
-  color: var(--color-neutral-700);
+  color: oklch(37.1% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-300);
+    color: oklch(87% 0 0deg);
   }
 }
 
@@ -280,10 +280,10 @@
   font-size: 0.925rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-700);
+  color: oklch(37.1% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-300);
+    color: oklch(87% 0 0deg);
   }
 }
 .Input {
@@ -292,14 +292,14 @@
   height: 2rem;
   padding: 0 0.5rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (any-pointer: coarse) {
     font-size: 1rem;
@@ -308,20 +308,20 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -336,14 +336,14 @@
   min-height: 8rem;
   padding: 0.5rem 0.625rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   resize: vertical;
 
   @media (any-pointer: coarse) {
@@ -353,20 +353,20 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -377,7 +377,7 @@
 
 .Input:focus-visible,
 .Textarea:focus-visible {
-  outline: 2px solid var(--color-neutral-950);
+  outline: 2px solid oklch(14.5% 0 0deg);
   outline-offset: -1px;
 
   @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
index 055c0e8879f..171b88c4fc7 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/non-modal/css-modules/index.module.css
@@ -7,52 +7,52 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -119,9 +119,9 @@
   padding: 1.5rem;
   padding-right: calc(1.5rem + var(--bleed));
   margin-right: calc(-1 * var(--bleed));
-  border-left: 1px solid var(--color-neutral-950);
+  border-left: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   outline: 0;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -136,7 +136,7 @@
 
   @media (prefers-color-scheme: dark) {
     border-left: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -158,7 +158,7 @@
   @supports (-webkit-touch-callout: none) {
     --bleed: 0px;
     margin-right: 0;
-    border: 1px solid var(--color-neutral-950);
+    border: 1px solid oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       border: 1px solid white;
@@ -184,10 +184,10 @@
   margin: 0 0 1.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
index 8d0f05f908f..b2a539eb46f 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/position/css-modules/index.module.css
@@ -7,52 +7,52 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -107,9 +107,9 @@
   margin-bottom: calc(-1 * var(--bleed));
   padding: 1rem 1.5rem 1.5rem;
   padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + var(--bleed));
-  border-top: 1px solid var(--color-neutral-950);
+  border-top: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   outline: 0;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
@@ -120,7 +120,7 @@
 
   @media (prefers-color-scheme: dark) {
     border-top: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -149,10 +149,10 @@
   width: 3rem;
   height: 0.25rem;
   margin: 0 auto 1rem;
-  background-color: var(--color-neutral-300);
+  background-color: oklch(87% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-700);
+    background-color: oklch(37.1% 0 0deg);
   }
 }
 
@@ -169,11 +169,11 @@
   margin: 0 0 1.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
   text-align: center;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
index dc18f74132b..7933648dae4 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/snap-points/css-modules/index.module.css
@@ -7,52 +7,52 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -115,9 +115,9 @@
   width: 100%;
   max-height: calc(100dvh - var(--top-margin));
   padding-bottom: max(0px, calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y)));
-  border-top: 1px solid var(--color-neutral-950);
+  border-top: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   outline: 0;
   overflow: visible;
   touch-action: none;
@@ -130,7 +130,7 @@
 
   @media (prefers-color-scheme: dark) {
     border-top: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -164,11 +164,11 @@
 .DragArea {
   flex-shrink: 0;
   padding: 0.875rem 1.5rem 1rem;
-  border-bottom: 1px solid var(--color-neutral-300);
+  border-bottom: 1px solid oklch(87% 0 0deg);
   touch-action: none;
 
   @media (prefers-color-scheme: dark) {
-    border-bottom: 1px solid var(--color-neutral-700);
+    border-bottom: 1px solid oklch(37.1% 0 0deg);
   }
 }
 
@@ -186,10 +186,10 @@
   height: 0.25rem;
   margin: 0 auto 0.625rem;
   flex-shrink: 0;
-  background-color: var(--color-neutral-300);
+  background-color: oklch(87% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-700);
+    background-color: oklch(37.1% 0 0deg);
   }
 }
 
@@ -206,11 +206,11 @@
   margin: 0 0 1.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
   text-align: center;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -218,7 +218,7 @@
   margin: 0 0 1.5rem;
   font-size: 0.9375rem;
   line-height: 1.5rem;
-  color: var(--color-red);
+  color: oklch(50% 55% 31deg);
   text-align: center;
 }
 
@@ -230,10 +230,10 @@
 
 .Card {
   height: 3rem;
-  background-color: var(--color-neutral-200);
+  background-color: oklch(92.2% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-700);
+    background-color: oklch(37.1% 0 0deg);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
index cac988ed18b..6495f3626fe 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/swipe-area/css-modules/index.module.css
@@ -3,13 +3,13 @@
   width: 100%;
   min-height: 20rem;
   overflow: hidden;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 }
@@ -34,12 +34,12 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
   text-align: center;
   padding-right: 3rem;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -51,8 +51,8 @@
   width: 2.5rem;
   z-index: 1;
   box-sizing: border-box;
-  border-left: 2px dashed var(--color-blue);
-  background-color: color-mix(in oklch, var(--color-blue), transparent 90%);
+  border-left: 2px dashed oklch(45% 50% 264deg);
+  background-color: color-mix(in oklch, oklch(45% 50% 264deg), transparent 90%);
 }
 
 .SwipeLabel {
@@ -67,7 +67,7 @@
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: var(--color-blue);
+  color: oklch(45% 50% 264deg);
   white-space: nowrap;
   pointer-events: none;
 }
@@ -81,52 +81,52 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -188,9 +188,9 @@
   padding: 1.5rem;
   padding-right: calc(1.5rem + var(--bleed));
   margin-right: calc(-1 * var(--bleed));
-  border-left: 1px solid var(--color-neutral-950);
+  border-left: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   outline: 0;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow-y: auto;
@@ -201,7 +201,7 @@
 
   @media (prefers-color-scheme: dark) {
     border-left: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -222,7 +222,7 @@
   @supports (-webkit-touch-callout: none) {
     --bleed: 0px;
     margin-right: 0;
-    border: 1px solid var(--color-neutral-950);
+    border: 1px solid oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       border: 1px solid white;
@@ -248,10 +248,10 @@
   margin: 0 0 1.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
index c53eb8953b6..7b76eb86689 100644
--- a/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/drawer/demos/uncontained/css-modules/index.module.css
@@ -7,52 +7,52 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -133,15 +133,15 @@
 
 .Surface {
   pointer-events: auto;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow: hidden;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -154,7 +154,7 @@
 }
 
 .Action:not(:first-child) {
-  border-top: 1px solid var(--color-neutral-950);
+  border-top: 1px solid oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     border-top: 1px solid white;
@@ -178,42 +178,42 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
     outline: 0;
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 }
 
 .DangerSurface {
   pointer-events: auto;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   overflow: hidden;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     box-shadow: none;
   }
 }
@@ -230,33 +230,33 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   text-align: center;
-  color: var(--color-red);
+  color: oklch(50% 55% 31deg);
   user-select: none;
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
     outline: 0;
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
index 948519d3a9e..e9f619328ad 100644
--- a/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/field/demos/hero/css-modules/index.module.css
@@ -11,7 +11,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -23,7 +23,7 @@
   padding: 0 0.5rem;
   margin: 0;
   border-radius: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 100%;
   height: 2rem;
   font-family: inherit;
@@ -31,7 +31,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (any-pointer: coarse) {
     font-size: 1rem;
@@ -40,20 +40,20 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -65,10 +65,10 @@
 .Error {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-red-700);
+  color: oklch(50.5% 0.213 27.518deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-red-400);
+    color: oklch(70.4% 0.191 22.216deg);
   }
 }
 
@@ -76,9 +76,9 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
index 14873a41b67..808c55e0521 100644
--- a/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/fieldset/demos/hero/css-modules/index.module.css
@@ -10,14 +10,14 @@
 }
 
 .Legend {
-  border-bottom: 1px solid var(--color-neutral-950);
+  border-bottom: 1px solid oklch(14.5% 0 0deg);
   font-weight: 700;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    border-bottom: 1px solid var(--color-white);
+    border-bottom: 1px solid white;
     color: white;
   }
 }
@@ -33,7 +33,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -45,7 +45,7 @@
   padding: 0 0.5rem;
   margin: 0;
   border-radius: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 100%;
   height: 2rem;
   font-family: inherit;
@@ -53,7 +53,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (any-pointer: coarse) {
     font-size: 1rem;
@@ -62,20 +62,20 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -87,10 +87,10 @@
 .Error {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-red-700);
+  color: oklch(50.5% 0.213 27.518deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-red-400);
+    color: oklch(70.4% 0.191 22.216deg);
   }
 }
 
@@ -98,9 +98,9 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
index 564fa94db9a..d37a7ea2dee 100644
--- a/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/form-action/css-modules/index.module.css
@@ -17,7 +17,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -29,7 +29,7 @@
   padding: 0 0.5rem;
   margin: 0;
   border-radius: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 100%;
   height: 2rem;
   font-family: inherit;
@@ -37,7 +37,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (any-pointer: coarse) {
     font-size: 1rem;
@@ -46,20 +46,20 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -71,10 +71,10 @@
 .Error {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-red-700);
+  color: oklch(50.5% 0.213 27.518deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-red-400);
+    color: oklch(70.4% 0.191 22.216deg);
   }
 }
 
@@ -88,7 +88,7 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
@@ -96,45 +96,45 @@
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
index 564fa94db9a..d37a7ea2dee 100644
--- a/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/hero/css-modules/index.module.css
@@ -17,7 +17,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -29,7 +29,7 @@
   padding: 0 0.5rem;
   margin: 0;
   border-radius: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 100%;
   height: 2rem;
   font-family: inherit;
@@ -37,7 +37,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (any-pointer: coarse) {
     font-size: 1rem;
@@ -46,20 +46,20 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -71,10 +71,10 @@
 .Error {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-red-700);
+  color: oklch(50.5% 0.213 27.518deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-red-400);
+    color: oklch(70.4% 0.191 22.216deg);
   }
 }
 
@@ -88,7 +88,7 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
@@ -96,45 +96,45 @@
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
index 564fa94db9a..d37a7ea2dee 100644
--- a/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/form/demos/zod/css-modules/index.module.css
@@ -17,7 +17,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -29,7 +29,7 @@
   padding: 0 0.5rem;
   margin: 0;
   border-radius: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 100%;
   height: 2rem;
   font-family: inherit;
@@ -37,7 +37,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (any-pointer: coarse) {
     font-size: 1rem;
@@ -46,20 +46,20 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -71,10 +71,10 @@
 .Error {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-red-700);
+  color: oklch(50.5% 0.213 27.518deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-red-400);
+    color: oklch(70.4% 0.191 22.216deg);
   }
 }
 
@@ -88,7 +88,7 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
@@ -96,45 +96,45 @@
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
index 4e6fd0a09db..8d077d29231 100644
--- a/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/input/demos/hero/css-modules/index.module.css
@@ -6,7 +6,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -18,7 +18,7 @@
   padding: 0 0.5rem;
   margin: 0;
   border-radius: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 10rem;
   height: 2rem;
   font-family: inherit;
@@ -26,7 +26,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (any-pointer: coarse) {
     font-size: 1rem;
@@ -35,20 +35,20 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
index 19178578ff8..25228760fd4 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/_index.module.css
@@ -8,56 +8,56 @@
   padding: 0;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -83,7 +83,7 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
@@ -91,53 +91,53 @@
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -155,10 +155,10 @@
   position: relative;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
@@ -167,7 +167,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -197,7 +197,7 @@
     color: white;
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
@@ -207,7 +207,7 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -215,10 +215,10 @@
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 }
@@ -228,17 +228,17 @@
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     background-color: white;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
index 59b2e55bfdf..79c3cb8e347 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/arrow/css-modules/index.module.css
@@ -8,7 +8,7 @@
   padding: 0 0.5rem 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
@@ -16,53 +16,53 @@
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -80,10 +80,10 @@
   position: relative;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
@@ -92,7 +92,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -141,11 +141,11 @@
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
     background-color: white;
-    border: 1px solid var(--color-neutral-950);
+    border: 1px solid oklch(14.5% 0 0deg);
     transform: translate(-50%, 50%) rotate(45deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-950);
+      background-color: oklch(14.5% 0 0deg);
       border: 1px solid white;
     }
   }
@@ -168,7 +168,7 @@
     color: white;
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
@@ -178,7 +178,7 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -189,7 +189,7 @@
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     background-color: white;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
index e8ee86e3388..eeda6286da0 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/checkbox-items/css-modules/index.module.css
@@ -8,7 +8,7 @@
   padding: 0 0.5rem 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
@@ -16,53 +16,53 @@
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -80,10 +80,10 @@
   position: relative;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
@@ -92,7 +92,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -125,7 +125,7 @@
     color: white;
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
@@ -135,7 +135,7 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -143,10 +143,10 @@
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 }
@@ -162,7 +162,7 @@
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     background-color: white;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
index 1fe49936595..c5b6651db25 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/group-labels/css-modules/index.module.css
@@ -8,7 +8,7 @@
   padding: 0 0.5rem 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
@@ -16,53 +16,53 @@
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -80,10 +80,10 @@
   position: relative;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
@@ -92,7 +92,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -125,7 +125,7 @@
     color: white;
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
@@ -135,7 +135,7 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -143,10 +143,10 @@
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 }
@@ -165,7 +165,7 @@
   margin-block: 0.25rem;
   margin-inline: 0.25rem;
   height: 1px;
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     background-color: white;
@@ -179,9 +179,9 @@
   padding-right: 2rem;
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
index 18ae364743d..7d30bb51b05 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/hero/css-modules/index.module.css
@@ -8,7 +8,7 @@
   padding: 0 0.5rem 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
@@ -16,53 +16,53 @@
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -80,10 +80,10 @@
   position: relative;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
@@ -92,7 +92,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -121,7 +121,7 @@
     color: white;
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
@@ -131,7 +131,7 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -139,10 +139,10 @@
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 }
@@ -150,7 +150,7 @@
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     background-color: white;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
index 18ae364743d..7d30bb51b05 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/open-on-hover/css-modules/index.module.css
@@ -8,7 +8,7 @@
   padding: 0 0.5rem 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
@@ -16,53 +16,53 @@
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -80,10 +80,10 @@
   position: relative;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
@@ -92,7 +92,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -121,7 +121,7 @@
     color: white;
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
@@ -131,7 +131,7 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -139,10 +139,10 @@
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 }
@@ -150,7 +150,7 @@
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     background-color: white;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
index ae3771eaf0f..1fb92579a60 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/radio-items/css-modules/index.module.css
@@ -8,7 +8,7 @@
   padding: 0 0.5rem 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
@@ -16,53 +16,53 @@
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -80,10 +80,10 @@
   position: relative;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
@@ -92,7 +92,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -124,7 +124,7 @@
     color: white;
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
@@ -134,7 +134,7 @@
     position: absolute;
     inset-block: 0;
     inset-inline: 0.25rem;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -142,10 +142,10 @@
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 }
@@ -161,7 +161,7 @@
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     background-color: white;
diff --git a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
index 5f74f7bb7ad..4d9c32fff7c 100644
--- a/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menu/demos/submenu/css-modules/index.module.css
@@ -8,7 +8,7 @@
   padding: 0 0.5rem 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
@@ -16,53 +16,53 @@
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -80,10 +80,10 @@
   position: relative;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
@@ -92,7 +92,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -127,7 +127,7 @@
     color: white;
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
@@ -141,15 +141,15 @@
   }
 
   &[data-popup-open]::before {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &[data-highlighted]::before {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -157,7 +157,7 @@
   }
 
   &[data-highlighted][data-popup-open]::before {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -165,10 +165,10 @@
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 }
@@ -183,7 +183,7 @@
 .Separator {
   margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     background-color: white;
diff --git a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
index e91b9a0a107..6151f21738c 100644
--- a/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/menubar/demos/hero/css-modules/index.module.css
@@ -10,7 +10,7 @@
   margin: 0;
   border: 0;
   background-color: transparent;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -23,46 +23,46 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-pressed],
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
     position: relative;
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
       outline-color: white;
     }
   }
@@ -76,9 +76,9 @@
   box-sizing: border-box;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
@@ -87,7 +87,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -130,7 +130,7 @@
     color: white;
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
@@ -144,15 +144,15 @@
   }
 
   &[data-popup-open]::before {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &[data-highlighted]::before {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -160,7 +160,7 @@
   }
 
   &[data-highlighted][data-popup-open]::before {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -175,7 +175,7 @@
 .MenuSeparator {
   margin: 0.25rem;
   height: 1px;
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     background-color: white;
diff --git a/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
index bb54980b5dd..374c9b33abd 100644
--- a/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/meter/demos/hero/css-modules/index.module.css
@@ -10,7 +10,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -20,7 +20,7 @@
 .Value {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   text-align: right;
 
   @media (prefers-color-scheme: dark) {
@@ -32,15 +32,15 @@
   grid-column: 1 / 3;
   overflow: hidden;
   height: 0.75rem;
-  background-color: var(--color-neutral-200);
+  background-color: oklch(92.2% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-800);
+    background-color: oklch(26.9% 0 0deg);
   }
 }
 
 .Indicator {
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
   transition: width 500ms;
 
   @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
index 1a75dc80548..9c36d343c8e 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/hero/css-modules/index.module.css
@@ -1,6 +1,6 @@
 .Root {
   box-sizing: border-box;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   min-width: max-content;
 
   @media (prefers-color-scheme: dark) {
@@ -33,7 +33,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
   text-decoration: none;
 
@@ -47,24 +47,24 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -138,9 +138,9 @@
   overflow: visible;
   box-sizing: border-box;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition-property: opacity, transform, width, height;
@@ -151,7 +151,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -250,25 +250,25 @@
   background-color: transparent;
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -288,10 +288,10 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -334,13 +334,13 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    border: 1px solid var(--color-neutral-950);
+    border: 1px solid oklch(14.5% 0 0deg);
     background-color: white;
     transform: translate(-50%, 50%) rotate(45deg);
 
     @media (prefers-color-scheme: dark) {
       border: 1px solid white;
-      background-color: var(--color-neutral-950);
+      background-color: oklch(14.5% 0 0deg);
     }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
index 126050b8953..ba4849fdd65 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested-inline/css-modules/index.module.css
@@ -1,6 +1,6 @@
 .Root {
   box-sizing: border-box;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   min-width: max-content;
 
   @media (prefers-color-scheme: dark) {
@@ -33,7 +33,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
   text-decoration: none;
 
@@ -47,24 +47,24 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -138,9 +138,9 @@
   overflow: visible;
   box-sizing: border-box;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition-property: opacity, transform, width, height;
@@ -151,7 +151,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -229,7 +229,7 @@
 }
 
 .SubmenuRoot {
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   overflow: hidden;
   overflow: clip;
 
@@ -268,7 +268,7 @@
     gap: 1px;
     overflow-x: visible;
     overflow-y: clip;
-    border-right: 1px solid var(--color-neutral-950);
+    border-right: 1px solid oklch(14.5% 0 0deg);
     height: var(--popup-height);
     transition: height var(--duration) var(--easing);
 
@@ -296,24 +296,24 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -326,7 +326,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1rem;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -336,10 +336,10 @@
 .SubmenuHint {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -347,7 +347,7 @@
   position: relative;
   overflow: hidden;
   min-height: 16.5rem;
-  border-top: 1px solid var(--color-neutral-950);
+  border-top: 1px solid oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     border-top: 1px solid white;
@@ -439,12 +439,12 @@
 
 .SubmenuDescription {
   margin: 0.25rem 0 0;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
   font-size: 0.875rem;
   line-height: 1.25rem;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -471,25 +471,25 @@
   background-color: transparent;
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -507,12 +507,12 @@
 
 .LinkDescription {
   margin: 0;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
   font-size: 0.875rem;
   line-height: 1.25rem;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -566,13 +566,13 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    border: 1px solid var(--color-neutral-950);
+    border: 1px solid oklch(14.5% 0 0deg);
     background-color: white;
     transform: translate(-50%, 50%) rotate(45deg);
 
     @media (prefers-color-scheme: dark) {
       border: 1px solid white;
-      background-color: var(--color-neutral-950);
+      background-color: oklch(14.5% 0 0deg);
     }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
index c7400498157..4036e9129bc 100644
--- a/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/navigation-menu/demos/nested/css-modules/index.module.css
@@ -1,6 +1,6 @@
 .Root {
   box-sizing: border-box;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   min-width: max-content;
 
   @media (prefers-color-scheme: dark) {
@@ -33,7 +33,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
   text-decoration: none;
 
@@ -47,24 +47,24 @@
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -138,9 +138,9 @@
   overflow: visible;
   box-sizing: border-box;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition-property: opacity, transform, width, height;
@@ -151,7 +151,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -251,25 +251,25 @@
   background-color: transparent;
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -289,10 +289,10 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -335,13 +335,13 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    border: 1px solid var(--color-neutral-950);
+    border: 1px solid oklch(14.5% 0 0deg);
     background-color: white;
     transform: translate(-50%, 50%) rotate(45deg);
 
     @media (prefers-color-scheme: dark) {
       border: 1px solid white;
-      background-color: var(--color-neutral-950);
+      background-color: oklch(14.5% 0 0deg);
     }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
index 4122798f18d..6106a7a4dba 100644
--- a/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/number-field/demos/hero/css-modules/index.module.css
@@ -20,7 +20,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -36,7 +36,7 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0 0.5rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   width: 7ch;
   height: 100%;
@@ -45,7 +45,7 @@
   line-height: 1.25rem;
   font-weight: 400;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   text-align: left;
   font-variant-numeric: tabular-nums;
@@ -57,13 +57,13 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &:focus {
     z-index: 1;
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -83,44 +83,44 @@
   margin: 0;
   outline: 0;
   padding: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   background-clip: padding-box;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
index ebc5f025cfd..6802ce91b91 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/alphanumeric/css-modules/index.module.css
@@ -11,7 +11,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -28,7 +28,7 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
@@ -38,16 +38,16 @@
   font-weight: 400;
   text-align: center;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -60,10 +60,10 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
index 08319c859a3..242f4599e9a 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/custom-sanitize/css-modules/index.module.css
@@ -11,7 +11,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -29,7 +29,7 @@
   margin: 0;
   padding: 0;
 
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
@@ -39,16 +39,16 @@
   font-weight: 400;
   text-align: center;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -58,43 +58,43 @@
 }
 
 .InputInvalidA {
-  border-color: var(--color-red-700);
-  outline: 2px solid var(--color-red-700);
+  border-color: oklch(50.5% 0.213 27.518deg);
+  outline: 2px solid oklch(50.5% 0.213 27.518deg);
   outline-offset: -1px;
   animation: otp-field-shake-a 180ms ease-in-out;
 
   @media (prefers-color-scheme: dark) {
-    border-color: var(--color-red-400);
-    outline: 2px solid var(--color-red-400);
+    border-color: oklch(70.4% 0.191 22.216deg);
+    outline: 2px solid oklch(70.4% 0.191 22.216deg);
   }
 
   &:focus {
-    outline: 2px solid var(--color-red-700);
+    outline: 2px solid oklch(50.5% 0.213 27.518deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
-      outline-color: var(--color-red-400);
+      outline-color: oklch(70.4% 0.191 22.216deg);
     }
   }
 }
 
 .InputInvalidB {
-  border-color: var(--color-red-700);
-  outline: 2px solid var(--color-red-700);
+  border-color: oklch(50.5% 0.213 27.518deg);
+  outline: 2px solid oklch(50.5% 0.213 27.518deg);
   outline-offset: -1px;
   animation: otp-field-shake-b 180ms ease-in-out;
 
   @media (prefers-color-scheme: dark) {
-    border-color: var(--color-red-400);
-    outline: 2px solid var(--color-red-400);
+    border-color: oklch(70.4% 0.191 22.216deg);
+    outline: 2px solid oklch(70.4% 0.191 22.216deg);
   }
 
   &:focus {
-    outline: 2px solid var(--color-red-700);
+    outline: 2px solid oklch(50.5% 0.213 27.518deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
-      outline-color: var(--color-red-400);
+      outline-color: oklch(70.4% 0.191 22.216deg);
     }
   }
 }
@@ -103,10 +103,10 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
index 11cd4b2d1c5..0a030141db5 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/focused-placeholder/css-modules/index.module.css
@@ -11,7 +11,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -29,7 +29,7 @@
   margin: 0;
   padding: 0;
 
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
@@ -39,24 +39,24 @@
   font-weight: 400;
   text-align: center;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &::placeholder {
-    color: var(--color-neutral-600);
+    color: oklch(43.9% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -73,9 +73,9 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
index 7f130b380b0..9c379ca953e 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/grouped/css-modules/index.module.css
@@ -11,7 +11,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -35,7 +35,7 @@
   margin: 0;
   padding: 0;
 
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
@@ -45,16 +45,16 @@
   font-weight: 400;
   text-align: center;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -67,7 +67,7 @@
   width: 1rem;
   height: 1px;
   background-color: currentColor;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
index 2ca26a1d365..58164428516 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/hero/css-modules/index.module.css
@@ -11,7 +11,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -29,7 +29,7 @@
   margin: 0;
   padding: 0;
 
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
@@ -39,16 +39,16 @@
   font-weight: 400;
   text-align: center;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -61,9 +61,9 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
diff --git a/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css b/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
index 7bb159f36e7..6e42eccfbe7 100644
--- a/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/otp-field/demos/password/css-modules/index.module.css
@@ -11,7 +11,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -29,7 +29,7 @@
   margin: 0;
   padding: 0;
 
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0;
@@ -39,16 +39,16 @@
   font-weight: 400;
   text-align: center;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &:focus {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -61,10 +61,10 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
diff --git a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
index ce211335663..ef9fb899a80 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
@@ -12,9 +12,9 @@
   gap: 0.25rem;
   padding: 0.75rem;
   outline: none;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
@@ -26,7 +26,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -75,11 +75,11 @@
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
     background-color: white;
-    border: 1px solid var(--color-neutral-950);
+    border: 1px solid oklch(14.5% 0 0deg);
     transform: translate(-50%, 50%) rotate(45deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-950);
+      background-color: oklch(14.5% 0 0deg);
       border: 1px solid white;
     }
   }
@@ -96,10 +96,10 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -119,61 +119,61 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled], :disabled) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled], :disabled) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-popup-open]:not([data-disabled], :disabled) {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &[data-disabled],
   &:disabled {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
index 026091b7e11..ebb8000ac59 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
@@ -20,8 +20,8 @@
   position: relative;
   outline: none;
   background-color: white;
-  color: var(--color-neutral-950);
-  border: 1px solid var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
+  border: 1px solid oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
 
@@ -37,7 +37,7 @@
   transition-duration: var(--animation-duration);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     border: 1px solid white;
     box-shadow: none;
@@ -138,11 +138,11 @@
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
     background-color: white;
-    border: 1px solid var(--color-neutral-950);
+    border: 1px solid oklch(14.5% 0 0deg);
     transform: translate(-50%, 50%) rotate(45deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-950);
+      background-color: oklch(14.5% 0 0deg);
       border: 1px solid white;
     }
   }
@@ -165,10 +165,10 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -193,10 +193,10 @@
     grid-row: 2;
     font-size: 0.875rem;
     line-height: 1.25rem;
-    color: var(--color-neutral-600);
+    color: oklch(43.9% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
     }
   }
 
@@ -210,8 +210,8 @@
     vertical-align: middle;
     user-select: none;
     font-weight: 700;
-    color: var(--color-neutral-950);
-    background-color: var(--color-neutral-200);
+    color: oklch(14.5% 0 0deg);
+    background-color: oklch(92.2% 0 0deg);
     font-size: 0.875rem;
     line-height: 1;
     white-space: nowrap;
@@ -221,7 +221,7 @@
 
     @media (prefers-color-scheme: dark) {
       color: white;
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
@@ -242,7 +242,7 @@
     line-height: 1.25rem;
 
     a {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
       text-decoration: underline;
       text-decoration-thickness: 1px;
       text-underline-offset: 0.16em;
@@ -258,7 +258,7 @@
       }
 
       &:focus-visible {
-        outline: 2px solid var(--color-neutral-950);
+        outline: 2px solid oklch(14.5% 0 0deg);
         outline-offset: 2px;
 
         @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
index e19ca133659..7f3ba1cffee 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/detached-triggers-full/css-modules/index.module.css
@@ -13,9 +13,9 @@
 
 .Popup {
   position: relative;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
 
@@ -30,7 +30,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -77,13 +77,13 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    border: 1px solid var(--color-neutral-950);
+    border: 1px solid oklch(14.5% 0 0deg);
     background-color: white;
     transform: translate(-50%, 50%) rotate(45deg);
 
     @media (prefers-color-scheme: dark) {
       border: 1px solid white;
-      background-color: var(--color-neutral-950);
+      background-color: oklch(14.5% 0 0deg);
     }
   }
 }
@@ -155,7 +155,7 @@
   margin: 0;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   text-wrap: balance;
 
   @media (prefers-color-scheme: dark) {
@@ -165,37 +165,37 @@
 
 .Link {
   outline: 0;
-  color: var(--color-blue-800);
+  color: oklch(42.4% 0.199 265.638deg);
   text-decoration-line: underline;
   text-decoration-thickness: 1px;
-  text-decoration-color: color-mix(in oklab, var(--color-blue-800), transparent 40%);
+  text-decoration-color: color-mix(in oklab, oklch(42.4% 0.199 265.638deg), transparent 40%);
   text-underline-offset: 2px;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-blue-500);
-    text-decoration-color: color-mix(in oklab, var(--color-blue-500), transparent 40%);
+    color: oklch(62.3% 0.214 259.815deg);
+    text-decoration-color: color-mix(in oklab, oklch(62.3% 0.214 259.815deg), transparent 40%);
   }
 
   @media (hover: hover) {
     &:hover {
-      text-decoration-color: var(--color-blue-800);
+      text-decoration-color: oklch(42.4% 0.199 265.638deg);
 
       @media (prefers-color-scheme: dark) {
-        text-decoration-color: var(--color-blue-500);
+        text-decoration-color: oklch(62.3% 0.214 259.815deg);
       }
     }
   }
 
   &[data-popup-open] {
-    text-decoration-color: var(--color-blue-800);
+    text-decoration-color: oklch(42.4% 0.199 265.638deg);
 
     @media (prefers-color-scheme: dark) {
-      text-decoration-color: var(--color-blue-500);
+      text-decoration-color: oklch(62.3% 0.214 259.815deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     text-decoration-line: none;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
index c0cd26917a6..c7468b139b7 100644
--- a/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/preview-card/demos/index.module.css
@@ -9,9 +9,9 @@
   position: relative;
   width: var(--popup-width, auto);
   height: var(--popup-height, auto);
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
@@ -20,7 +20,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -67,13 +67,13 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    border: 1px solid var(--color-neutral-950);
+    border: 1px solid oklch(14.5% 0 0deg);
     background-color: white;
     transform: translate(-50%, 50%) rotate(45deg);
 
     @media (prefers-color-scheme: dark) {
       border: 1px solid white;
-      background-color: var(--color-neutral-950);
+      background-color: oklch(14.5% 0 0deg);
     }
   }
 }
@@ -111,7 +111,7 @@
   margin: 0;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   text-wrap: balance;
 
   @media (prefers-color-scheme: dark) {
@@ -121,37 +121,37 @@
 
 .Link {
   outline: 0;
-  color: var(--color-blue-800);
+  color: oklch(42.4% 0.199 265.638deg);
   text-decoration-line: underline;
   text-decoration-thickness: 1px;
-  text-decoration-color: color-mix(in oklab, var(--color-blue-800), transparent 40%);
+  text-decoration-color: color-mix(in oklab, oklch(42.4% 0.199 265.638deg), transparent 40%);
   text-underline-offset: 2px;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-blue-500);
-    text-decoration-color: color-mix(in oklab, var(--color-blue-500), transparent 40%);
+    color: oklch(62.3% 0.214 259.815deg);
+    text-decoration-color: color-mix(in oklab, oklch(62.3% 0.214 259.815deg), transparent 40%);
   }
 
   @media (hover: hover) {
     &:hover {
-      text-decoration-color: var(--color-blue-800);
+      text-decoration-color: oklch(42.4% 0.199 265.638deg);
 
       @media (prefers-color-scheme: dark) {
-        text-decoration-color: var(--color-blue-500);
+        text-decoration-color: oklch(62.3% 0.214 259.815deg);
       }
     }
   }
 
   &[data-popup-open] {
-    text-decoration-color: var(--color-blue-800);
+    text-decoration-color: oklch(42.4% 0.199 265.638deg);
 
     @media (prefers-color-scheme: dark) {
-      text-decoration-color: var(--color-blue-500);
+      text-decoration-color: oklch(62.3% 0.214 259.815deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     text-decoration-line: none;
 
     @media (prefers-color-scheme: dark) {
@@ -176,42 +176,42 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css
index 08af7e04cdf..fa615f7c3bc 100644
--- a/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/progress/demos/hero/css-modules/index.module.css
@@ -10,7 +10,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -20,7 +20,7 @@
 .Value {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   text-align: right;
 
   @media (prefers-color-scheme: dark) {
@@ -32,15 +32,15 @@
   grid-column: 1 / 3;
   overflow: hidden;
   height: 0.25rem;
-  background-color: var(--color-neutral-200);
+  background-color: oklch(92.2% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-800);
+    background-color: oklch(26.9% 0 0deg);
   }
 }
 
 .Indicator {
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
   transition: width 500ms;
 
   @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
index 0d972bb009c..95cd10a1ec1 100644
--- a/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/radio/demos/hero/css-modules/index.module.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -33,7 +33,7 @@
   height: 1rem;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 100%;
   background-color: white;
   color: white;
@@ -42,22 +42,22 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
-    color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
+    color: oklch(14.5% 0 0deg);
   }
 
   &[data-checked] {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: 2px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
index e95378fb428..c6612c95c52 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/both/css-modules/index.module.css
@@ -8,14 +8,14 @@
 .Viewport {
   box-sizing: border-box;
   height: 100%;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -39,17 +39,17 @@
 }
 
 .Item {
-  background-color: var(--color-neutral-200);
+  background-color: oklch(92.2% 0 0deg);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.875rem;
   font-weight: 700;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-800);
-    color: var(--color-neutral-400);
+    background-color: oklch(26.9% 0 0deg);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -87,7 +87,7 @@
 
 .Thumb {
   width: 100%;
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     background-color: white;
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
index 2dd96b382d7..c691d7d28e1 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/hero/css-modules/index.module.css
@@ -6,21 +6,21 @@
   background-color: white;
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 }
 
 .Viewport {
   box-sizing: border-box;
   height: 100%;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -42,7 +42,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.375rem;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -76,7 +76,7 @@
 
 .Thumb {
   width: 100%;
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     background-color: white;
diff --git a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
index b1518c51675..162495f4a0e 100644
--- a/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/scroll-area/demos/scroll-fade/css-modules/index.module.css
@@ -3,14 +3,14 @@
   width: 24rem;
   height: 12rem;
   max-width: calc(100vw - 8rem);
-  background-color: var(--color-neutral-100);
+  background-color: oklch(97% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-800);
+    background-color: oklch(26.9% 0 0deg);
   }
 
   &:has(.Viewport:focus-visible) {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -21,7 +21,7 @@
 .Viewport {
   --fade-size: 40px;
   height: 100%;
-  background: var(--color-neutral-100);
+  background: oklch(97% 0 0deg);
   mask-image: linear-gradient(
     to bottom,
     transparent 0,
@@ -33,7 +33,7 @@
   outline: none;
 
   @media (prefers-color-scheme: dark) {
-    background: var(--color-neutral-800);
+    background: oklch(26.9% 0 0deg);
   }
 }
 
@@ -50,7 +50,7 @@
   margin: 0;
   font-size: 0.875rem;
   line-height: 1.375rem;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -84,7 +84,7 @@
 
 .Thumb {
   width: 100%;
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     background-color: white;
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index 81bd0054a6e..573b6504cff 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -9,7 +9,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   cursor: default;
 
   @media (prefers-color-scheme: dark) {
@@ -18,10 +18,10 @@
 }
 
 .Value[data-placeholder] {
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -36,61 +36,61 @@
   padding-right: 0.25rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1;
   white-space: nowrap;
   font-weight: 400;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
   min-width: 11rem;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -108,10 +108,10 @@
 .Popup {
   box-sizing: border-box;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   background-clip: padding-box;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
@@ -121,7 +121,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -167,10 +167,10 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   user-select: none;
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -190,12 +190,12 @@
   user-select: none;
 
   &[data-highlighted] {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 }
@@ -212,7 +212,7 @@
   height: 1px;
   margin-block: 0.25rem;
   margin-inline: 1rem;
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     background-color: white;
@@ -232,7 +232,7 @@
   justify-content: center;
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 
   &::before {
diff --git a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
index 99a8c88a5b0..28fc1a19661 100644
--- a/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/hero/css-modules/index.module.css
@@ -9,7 +9,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   cursor: default;
 
   @media (prefers-color-scheme: dark) {
@@ -18,10 +18,10 @@
 }
 
 .Value[data-placeholder] {
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -36,61 +36,61 @@
   padding-right: 0.25rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1;
   white-space: nowrap;
   font-weight: 400;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
   min-width: 10rem;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -108,10 +108,10 @@
 .Popup {
   box-sizing: border-box;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   background-clip: padding-box;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
@@ -121,7 +121,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -165,12 +165,12 @@
   user-select: none;
 
   &[data-highlighted] {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 }
@@ -196,7 +196,7 @@
   justify-content: center;
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 
   &::before {
diff --git a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
index d4f33be0502..52a96c444c7 100644
--- a/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/multiple/css-modules/index.module.css
@@ -9,7 +9,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   cursor: default;
 
   @media (prefers-color-scheme: dark) {
@@ -18,10 +18,10 @@
 }
 
 .Value[data-placeholder] {
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -36,61 +36,61 @@
   padding-right: 0.25rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1;
   white-space: nowrap;
   font-weight: 400;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
   min-width: 14rem;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -108,10 +108,10 @@
   box-sizing: border-box;
   outline: 0;
   padding-block: 0.25rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   background-clip: padding-box;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
@@ -123,7 +123,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -160,12 +160,12 @@
 
   @media (hover: hover) {
     &[data-highlighted] {
-      background-color: var(--color-neutral-950);
+      background-color: oklch(14.5% 0 0deg);
       color: white;
 
       @media (prefers-color-scheme: dark) {
         background-color: white;
-        color: var(--color-neutral-950);
+        color: oklch(14.5% 0 0deg);
       }
     }
   }
diff --git a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
index 90a4e151587..7abbc7d6ec7 100644
--- a/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/object-values/css-modules/index.module.css
@@ -9,7 +9,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   cursor: default;
 
   @media (prefers-color-scheme: dark) {
@@ -29,61 +29,61 @@
   padding-right: 0.25rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1;
   white-space: nowrap;
   font-weight: 400;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
   min-width: 16rem;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -107,10 +107,10 @@
 .ValueSecondary {
   font-size: 0.75rem;
   line-height: 1rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -123,10 +123,10 @@
 .Popup {
   box-sizing: border-box;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   background-clip: padding-box;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
@@ -136,7 +136,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -181,19 +181,19 @@
 
   @media (hover: hover) {
     &[data-highlighted] {
-      background-color: var(--color-neutral-950);
+      background-color: oklch(14.5% 0 0deg);
       color: white;
 
       @media (prefers-color-scheme: dark) {
         background-color: white;
-        color: var(--color-neutral-950);
+        color: oklch(14.5% 0 0deg);
       }
 
       .ItemDescription {
-        color: var(--color-neutral-400);
+        color: oklch(70.8% 0 0deg);
 
         @media (prefers-color-scheme: dark) {
-          color: var(--color-neutral-600);
+          color: oklch(43.9% 0 0deg);
         }
       }
     }
@@ -225,10 +225,10 @@
 .ItemDescription {
   font-size: 0.75rem;
   line-height: 1rem;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -245,7 +245,7 @@
   justify-content: center;
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 
   &::before {
diff --git a/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css
index 8601558e946..9847e66f20d 100644
--- a/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/separator/demos/hero/css-modules/index.module.css
@@ -6,25 +6,25 @@
 
 .Separator {
   width: 1px;
-  background-color: var(--color-neutral-300);
+  background-color: oklch(87% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-700);
+    background-color: oklch(37.1% 0 0deg);
   }
 }
 
 .Link {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-950);
-  text-decoration-color: var(--color-neutral-300);
+  color: oklch(14.5% 0 0deg);
+  text-decoration-color: oklch(87% 0 0deg);
   text-decoration-thickness: 1px;
   text-decoration-line: none;
   text-underline-offset: 2px;
 
   @media (prefers-color-scheme: dark) {
     color: white;
-    text-decoration-color: var(--color-neutral-700);
+    text-decoration-color: oklch(37.1% 0 0deg);
   }
 
   @media (hover: hover) {
@@ -34,7 +34,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: 2px;
     text-decoration-line: none;
 
diff --git a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css
index 01cd7b95299..034f08297a8 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/edge-alignment/css-modules/index.module.css
@@ -11,16 +11,16 @@
 .Track {
   width: 100%;
   height: 0.25rem;
-  background-color: var(--color-neutral-200);
+  background-color: oklch(92.2% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-800);
+    background-color: oklch(26.9% 0 0deg);
   }
 }
 
 .Indicator {
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
@@ -32,17 +32,17 @@
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: 2px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css
index 01cd7b95299..034f08297a8 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/hero/css-modules/index.module.css
@@ -11,16 +11,16 @@
 .Track {
   width: 100%;
   height: 0.25rem;
-  background-color: var(--color-neutral-200);
+  background-color: oklch(92.2% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-800);
+    background-color: oklch(26.9% 0 0deg);
   }
 }
 
 .Indicator {
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
@@ -32,17 +32,17 @@
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: 2px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css
index 01cd7b95299..034f08297a8 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/range-slider/css-modules/index.module.css
@@ -11,16 +11,16 @@
 .Track {
   width: 100%;
   height: 0.25rem;
-  background-color: var(--color-neutral-200);
+  background-color: oklch(92.2% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-800);
+    background-color: oklch(26.9% 0 0deg);
   }
 }
 
 .Indicator {
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
@@ -32,17 +32,17 @@
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: 2px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css b/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css
index 7ce185d20db..208b0c92ddc 100644
--- a/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/slider/demos/vertical/css-modules/index.module.css
@@ -11,11 +11,11 @@
 }
 
 .Track {
-  background-color: var(--color-neutral-200);
+  background-color: oklch(92.2% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-800);
+    background-color: oklch(26.9% 0 0deg);
   }
 
   &[data-orientation='vertical'] {
@@ -25,7 +25,7 @@
 }
 
 .Indicator {
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
@@ -37,17 +37,17 @@
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: 2px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
index ae202e2b783..1df0bb0ff8c 100644
--- a/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/switch/demos/hero/css-modules/index.module.css
@@ -5,7 +5,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -16,7 +16,7 @@
   box-sizing: border-box;
   display: flex;
   flex-shrink: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   padding: 0.125rem;
   width: 2.25rem;
   height: 1.25rem;
@@ -25,11 +25,11 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 
   &[data-checked] {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
@@ -37,7 +37,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: 2px;
 
     @media (prefers-color-scheme: dark) {
@@ -49,7 +49,7 @@
 .Thumb {
   width: 0.875rem;
   height: 0.875rem;
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
   transition:
     translate 150ms ease,
     background-color 150ms ease;
@@ -63,7 +63,7 @@
     background-color: white;
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-950);
+      background-color: oklch(14.5% 0 0deg);
     }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
index 521cc448af8..7ee61077b6a 100644
--- a/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tabs/demos/hero/css-modules/index.module.css
@@ -21,7 +21,7 @@
   margin: 0;
   outline: 0;
   background: none;
-  color: var(--color-neutral-600);
+  color: oklch(43.9% 0 0deg);
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -34,12 +34,12 @@
   height: calc(2rem + 1px);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-300);
+    color: oklch(87% 0 0deg);
   }
 
   @media (hover: hover) {
     &:hover {
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
         color: white;
@@ -48,7 +48,7 @@
   }
 
   &[data-active] {
-    color: var(--color-neutral-950);
+    color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       color: white;
@@ -56,7 +56,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -77,14 +77,14 @@
   transition-property: translate, width;
   transition-duration: 150ms;
   transition-timing-function: ease-in-out;
-  border-top: 1px solid var(--color-neutral-950);
-  border-inline: 1px solid var(--color-neutral-950);
+  border-top: 1px solid oklch(14.5% 0 0deg);
+  border-inline: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
 
   @media (prefers-color-scheme: dark) {
     border-top: 1px solid white;
     border-inline: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 }
 
@@ -94,8 +94,8 @@
   grid-template-columns: minmax(0, 1fr);
   width: 100%;
   min-height: 8rem;
-  border-inline: 1px solid var(--color-neutral-950);
-  border-block: 1px solid var(--color-neutral-950);
+  border-inline: 1px solid oklch(14.5% 0 0deg);
+  border-block: 1px solid oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     border-inline: 1px solid white;
@@ -116,16 +116,16 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   text-align: center;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   background-color: white;
 
   @media (prefers-color-scheme: dark) {
     color: white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
     z-index: 1;
 
diff --git a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
index ebf01c90392..a09ecfcd702 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/anchored/css-modules/index.module.css
@@ -15,9 +15,9 @@
   flex-direction: column;
   width: max-content;
   padding: 0.25rem 0.5rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
@@ -26,7 +26,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -42,7 +42,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -83,9 +83,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
@@ -110,7 +110,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -204,10 +204,10 @@
   gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -216,40 +216,40 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -266,9 +266,9 @@
   display: flex;
   flex-direction: column;
   padding: 0.25rem 0.5rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
@@ -277,7 +277,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -332,13 +332,13 @@
     box-sizing: border-box;
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
-    border: 1px solid var(--color-neutral-950);
+    border: 1px solid oklch(14.5% 0 0deg);
     background-color: white;
     transform: translate(-50%, 50%) rotate(45deg);
 
     @media (prefers-color-scheme: dark) {
       border: 1px solid white;
-      background-color: var(--color-neutral-950);
+      background-color: oklch(14.5% 0 0deg);
     }
   }
 }
@@ -358,7 +358,7 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
@@ -366,35 +366,35 @@
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -412,39 +412,39 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
index db135c31a2d..4f301bd6cfb 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/custom/css-modules/index.module.css
@@ -30,9 +30,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
@@ -57,7 +57,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -103,7 +103,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -160,10 +160,10 @@
   gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -172,40 +172,40 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -223,7 +223,7 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
@@ -231,35 +231,35 @@
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
index 9908b0583c1..71462167492 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/deduplicate/css-modules/index.module.css
@@ -30,9 +30,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
@@ -57,7 +57,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -106,7 +106,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -172,10 +172,10 @@
   gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -184,40 +184,40 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -235,7 +235,7 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
@@ -243,35 +243,35 @@
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
index db135c31a2d..4f301bd6cfb 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/hero/css-modules/index.module.css
@@ -30,9 +30,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
@@ -57,7 +57,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -103,7 +103,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -160,10 +160,10 @@
   gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -172,40 +172,40 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -223,7 +223,7 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
@@ -231,35 +231,35 @@
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
index bdf076f4a87..66d47848e4a 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/position/css-modules/index.module.css
@@ -23,9 +23,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: top center;
   top: 0;
@@ -52,7 +52,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -98,7 +98,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -155,10 +155,10 @@
   gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -167,40 +167,40 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -218,7 +218,7 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
@@ -226,35 +226,35 @@
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
index 29c3963e00c..98f8dd43ede 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/promise/css-modules/index.module.css
@@ -30,9 +30,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
@@ -57,7 +57,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -103,23 +103,23 @@
   }
 
   &[data-type='success'] .Text {
-    color: var(--color-green-700);
+    color: oklch(52.7% 0.154 150.069deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-green-400);
+      color: oklch(79.2% 0.209 151.711deg);
     }
   }
 
   &[data-type='error'] .Text {
-    color: var(--color-red-700);
+    color: oklch(50.5% 0.213 27.518deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-red-400);
+      color: oklch(70.4% 0.191 22.216deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -176,10 +176,10 @@
   gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -188,40 +188,40 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -239,7 +239,7 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
@@ -247,35 +247,35 @@
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
index 903b361a438..76f760be718 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/undo/css-modules/index.module.css
@@ -30,9 +30,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
@@ -57,7 +57,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -103,7 +103,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -166,10 +166,10 @@
   gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -178,40 +178,40 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -229,7 +229,7 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
@@ -237,35 +237,35 @@
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
index 1ace47b315b..0fc2f1a40d8 100644
--- a/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toast/demos/varying-heights/css-modules/index.module.css
@@ -30,9 +30,9 @@
   margin: 0 auto;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: bottom center;
   bottom: 0;
@@ -57,7 +57,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -103,7 +103,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -160,10 +160,10 @@
   gap: 0.5rem;
   height: 2rem;
   padding: 0 0.75rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
@@ -172,40 +172,40 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -223,7 +223,7 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
@@ -231,35 +231,35 @@
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
index b325fd4b662..fece20c8a3f 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/hero/css-modules/index.module.css
@@ -2,7 +2,7 @@
   display: flex;
   gap: 1px;
   padding: 1px;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
@@ -21,7 +21,7 @@
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
@@ -30,46 +30,46 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled], [data-pressed]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-pressed] {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
   @media (hover: hover) {
     &[data-pressed]:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-950);
+      background-color: oklch(14.5% 0 0deg);
       color: white;
 
       @media (prefers-color-scheme: dark) {
         background-color: white;
-        color: var(--color-neutral-950);
+        color: oklch(14.5% 0 0deg);
       }
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: 1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
index b325fd4b662..fece20c8a3f 100644
--- a/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle-group/demos/multiple/css-modules/index.module.css
@@ -2,7 +2,7 @@
   display: flex;
   gap: 1px;
   padding: 1px;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
@@ -21,7 +21,7 @@
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
@@ -30,46 +30,46 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled], [data-pressed]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-pressed] {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
   @media (hover: hover) {
     &[data-pressed]:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-950);
+      background-color: oklch(14.5% 0 0deg);
       color: white;
 
       @media (prefers-color-scheme: dark) {
         background-color: white;
-        color: var(--color-neutral-950);
+        color: oklch(14.5% 0 0deg);
       }
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: 1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
index 414ea116c3a..1cb61280328 100644
--- a/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toggle/demos/hero/css-modules/index.module.css
@@ -10,7 +10,7 @@
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
@@ -19,24 +19,24 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-pressed] {
-    color: var(--color-neutral-950);
+    color: oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       color: white;
@@ -44,7 +44,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
index fa27f66ad81..88c2dad443a 100644
--- a/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/toolbar/demos/hero/css-modules/index.module.css
@@ -3,14 +3,14 @@
   display: flex;
   align-items: center;
   gap: 1px;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   padding: 1px;
   width: 37.5rem;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 }
 
@@ -30,7 +30,7 @@
   margin: 0;
   border: 0;
   background-color: transparent;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
   font-family: inherit;
   font-size: 0.875rem;
@@ -44,19 +44,19 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled], [data-pressed]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
@@ -65,32 +65,32 @@
   }
 
   &[data-pressed] {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 
   @media (hover: hover) {
     &[data-pressed]:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-950);
+      background-color: oklch(14.5% 0 0deg);
       color: white;
 
       @media (prefers-color-scheme: dark) {
         background-color: white;
-        color: var(--color-neutral-950);
+        color: oklch(14.5% 0 0deg);
       }
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
@@ -101,7 +101,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -2px;
 
     @media (prefers-color-scheme: dark) {
@@ -114,7 +114,7 @@
   width: 1px;
   height: 16px;
   margin: 0.25rem;
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     background-color: white;
@@ -122,7 +122,7 @@
 }
 
 .Link {
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -132,21 +132,21 @@
   margin-inline: auto 0.875rem;
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 
   @media (hover: hover) {
     &:hover {
-      color: var(--color-blue-700);
+      color: oklch(48.8% 0.243 264.376deg);
 
       @media (prefers-color-scheme: dark) {
-        color: var(--color-blue-500);
+        color: oklch(62.3% 0.214 259.815deg);
       }
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -163,10 +163,10 @@
 .Popup {
   box-sizing: border-box;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   background-clip: padding-box;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
@@ -178,7 +178,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -217,12 +217,12 @@
   }
 
   &[data-highlighted] {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 }
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
index e5c3219f895..b9bca1882c0 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/detached-triggers-full/css-modules/index.module.css
@@ -15,40 +15,40 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
@@ -57,17 +57,17 @@
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
     position: relative;
 
@@ -99,9 +99,9 @@
   width: var(--popup-width, auto);
   max-width: 500px;
   transform-origin: var(--transform-origin);
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   font-size: 0.875rem;
@@ -114,7 +114,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -172,11 +172,11 @@
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
     background-color: white;
-    border: 1px solid var(--color-neutral-950);
+    border: 1px solid oklch(14.5% 0 0deg);
     transform: translate(-50%, 50%) rotate(45deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-950);
+      background-color: oklch(14.5% 0 0deg);
       border: 1px solid white;
     }
   }
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
index 13274717dfc..2413592f4c3 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/hero/css-modules/index.module.css
@@ -1,11 +1,11 @@
 .Panel {
   display: flex;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 }
 
@@ -20,7 +20,7 @@
   margin: 0;
   border: 0;
   background-color: transparent;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
@@ -28,34 +28,34 @@
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
     background-color: transparent;
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
       outline-color: white;
@@ -71,9 +71,9 @@
   flex-direction: column;
   padding: 0.25rem 0.5rem;
   position: relative;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
@@ -82,7 +82,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -135,11 +135,11 @@
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
     background-color: white;
-    border: 1px solid var(--color-neutral-950);
+    border: 1px solid oklch(14.5% 0 0deg);
     transform: translate(-50%, 50%) rotate(45deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-950);
+      background-color: oklch(14.5% 0 0deg);
       border: 1px solid white;
     }
   }
diff --git a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
index 5f8b0026f5d..45280d4ff29 100644
--- a/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
+++ b/docs/src/app/(docs)/react/components/tooltip/demos/index.module.css
@@ -18,40 +18,40 @@
   height: 2rem;
   padding: 0;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
@@ -60,17 +60,17 @@
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
     position: relative;
 
@@ -92,9 +92,9 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   padding: 0.25rem 0.5rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
   transform-origin: var(--transform-origin);
   transition:
@@ -103,7 +103,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -156,11 +156,11 @@
     width: calc(6px * sqrt(2));
     height: calc(6px * sqrt(2));
     background-color: white;
-    border: 1px solid var(--color-neutral-950);
+    border: 1px solid oklch(14.5% 0 0deg);
     transform: translate(-50%, 50%) rotate(45deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-950);
+      background-color: oklch(14.5% 0 0deg);
       border: 1px solid white;
     }
   }
@@ -175,52 +175,52 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-disabled] {
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-500);
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      color: var(--color-neutral-400);
-      border-color: var(--color-neutral-400);
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
     position: relative;
 
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css
index aa243b91838..d9b1a4b246f 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-false/css-modules/index.module.css
@@ -7,49 +7,49 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -67,9 +67,9 @@
 .Popup {
   box-sizing: border-box;
   padding: 0.75rem 1rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   font-size: 0.875rem;
   line-height: 1.25rem;
   transform-origin: var(--transform-origin);
@@ -82,7 +82,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css
index a3f60918ed4..e4905005f25 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-popover-motion-keep-mounted-true/css-modules/index.module.css
@@ -7,49 +7,49 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -67,9 +67,9 @@
 .Popup {
   box-sizing: border-box;
   padding: 0.75rem 1rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   font-size: 0.875rem;
   line-height: 1.25rem;
   transform-origin: var(--transform-origin);
@@ -81,7 +81,7 @@
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
diff --git a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
index 9ca803c4544..f7a1fb09792 100644
--- a/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/handbook/animation/demos/animated-select-motion/css-modules/index.module.css
@@ -9,50 +9,50 @@
   padding-right: 0.25rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
   min-width: 9rem;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &[data-popup-open] {
-    background-color: var(--color-neutral-100);
+    background-color: oklch(97% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-800);
+      background-color: oklch(26.9% 0 0deg);
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -62,10 +62,10 @@
 }
 
 .Value[data-placeholder] {
-  color: var(--color-neutral-500);
+  color: oklch(55.6% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
-    color: var(--color-neutral-400);
+    color: oklch(70.8% 0 0deg);
   }
 }
 
@@ -78,17 +78,17 @@
 .Popup {
   box-sizing: border-box;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   background-clip: padding-box;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   min-width: var(--anchor-width);
   transform-origin: var(--transform-origin);
   box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
     box-shadow: none;
   }
@@ -135,12 +135,12 @@
   fill: white;
 
   @media (prefers-color-scheme: dark) {
-    fill: var(--color-neutral-950);
+    fill: oklch(14.5% 0 0deg);
   }
 }
 
 .ArrowOuterStroke {
-  fill: var(--color-neutral-950);
+  fill: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     fill: white;
@@ -151,7 +151,7 @@
   fill: white;
 
   @media (prefers-color-scheme: dark) {
-    fill: var(--color-neutral-950);
+    fill: oklch(14.5% 0 0deg);
   }
 }
 
@@ -171,12 +171,12 @@
   user-select: none;
 
   &[data-highlighted] {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
 
     @media (prefers-color-scheme: dark) {
       background-color: white;
-      color: var(--color-neutral-950);
+      color: oklch(14.5% 0 0deg);
     }
   }
 }
@@ -202,7 +202,7 @@
   justify-content: center;
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 
   &::before {
diff --git a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css
index 01cd7b95299..034f08297a8 100644
--- a/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/direction-provider/demos/hero/css-modules/index.module.css
@@ -11,16 +11,16 @@
 .Track {
   width: 100%;
   height: 0.25rem;
-  background-color: var(--color-neutral-200);
+  background-color: oklch(92.2% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--color-neutral-800);
+    background-color: oklch(26.9% 0 0deg);
   }
 }
 
 .Indicator {
-  background-color: var(--color-neutral-950);
+  background-color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
@@ -32,17 +32,17 @@
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   background-color: white;
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
   }
 
   &:has(:focus-visible) {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: 2px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
index 8375c4f461d..0ff2c35a2e3 100644
--- a/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/merge-props/demos/prevent-base-ui-handler/css-modules/index.module.css
@@ -13,7 +13,7 @@
 .Label {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -32,7 +32,7 @@
   border: none;
   border-radius: 0;
   background-color: transparent;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
@@ -41,24 +41,24 @@
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active:not([data-disabled]) {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
@@ -75,7 +75,7 @@
   height: 2rem;
   padding: 0 0.75rem;
   margin: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
@@ -83,35 +83,35 @@
   font-weight: 400;
   line-height: 1;
   white-space: nowrap;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
index 05d8e55722e..41c83f06e11 100644
--- a/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/use-render/demos/render-callback/css-modules/index.module.css
@@ -8,42 +8,42 @@
   padding: 0 0.75rem;
   margin: 0;
   outline: 0;
-  border: 1px solid var(--color-neutral-950);
+  border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25rem;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
   user-select: none;
 
   @media (prefers-color-scheme: dark) {
     border: 1px solid white;
-    background-color: var(--color-neutral-950);
+    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: var(--color-neutral-100);
+      background-color: oklch(97% 0 0deg);
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--color-neutral-800);
+        background-color: oklch(26.9% 0 0deg);
       }
     }
   }
 
   &:active {
-    background-color: var(--color-neutral-200);
+    background-color: oklch(92.2% 0 0deg);
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-neutral-700);
+      background-color: oklch(37.1% 0 0deg);
     }
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-950);
+    outline: 2px solid oklch(14.5% 0 0deg);
     outline-offset: -1px;
 
     @media (prefers-color-scheme: dark) {
diff --git a/docs/src/app/(docs)/react/utils/use-render/demos/render/css-modules/index.module.css b/docs/src/app/(docs)/react/utils/use-render/demos/render/css-modules/index.module.css
index f450121bfad..6a72cdc0224 100644
--- a/docs/src/app/(docs)/react/utils/use-render/demos/render/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/utils/use-render/demos/render/css-modules/index.module.css
@@ -1,7 +1,7 @@
 .Text {
   font-size: 0.875rem;
   line-height: 1rem;
-  color: var(--color-neutral-950);
+  color: oklch(14.5% 0 0deg);
 
   @media (prefers-color-scheme: dark) {
     color: white;

From 21dcd93541b37c924eb9b24d463084753e0d438d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 19:26:19 +0200
Subject: [PATCH 256/257] Revert "Fix regression test box-sizing setup?"

This reverts commit c52eb9d919ed3e21a1fc8f97eb19ff91b4a51071.
---
 test/regressions/TestViewer.tsx | 36 ++++++++++++++-------------------
 1 file changed, 15 insertions(+), 21 deletions(-)

diff --git a/test/regressions/TestViewer.tsx b/test/regressions/TestViewer.tsx
index db7c3a75543..18d9309065b 100644
--- a/test/regressions/TestViewer.tsx
+++ b/test/regressions/TestViewer.tsx
@@ -35,30 +35,24 @@ function TestViewer(props: { children: React.ReactNode }) {
     };
   }, []);
 
-  // Wrapped in @layer all so Tailwind's preflight (in @layer base) wins for
-  // box-sizing, while unlayered demo styles still win over both. !important
-  // rules still apply everywhere because the !important cascade is inverted
-  // across layers.
   const globalStyles = `
-    @layer all {
-      html {
-        --webkit-font-smoothing: antialiased;
-        --moz-osx-font-smoothing: grayscale;
-        /* Do the opposite of the docs in order to help catching issues. */
-        box-sizing: content-box;
-      }
+    html {
+      --webkit-font-smoothing: antialiased;
+      --moz-osx-font-smoothing: grayscale;
+      /* Do the opposite of the docs in order to help catching issues. */
+      box-sizing: content-box;
+    }
 
-      *, *::before, *::after {
-        box-sizing: inherit;
-        /* Disable transitions to avoid flaky screenshots */
-        transition: none !important;
-        animation: none !important;
-      }
+    *, *::before, *::after {
+      box-sizing: inherit;
+      /* Disable transitions to avoid flaky screenshots */
+      transition: none !important;
+      animation: none !important;
+    }
 
-      body {
-        margin: 0;
-        overflow-x: hidden;
-      }
+    body {
+      margin: 0;
+      overflow-x: hidden;
     }
   `;
 

From 6f41f59ab16b32688e4616be9d2076304001ac16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 15 May 2026 19:44:40 +0200
Subject: [PATCH 257/257] Fix box-sizing on Tailwind regression tests

---
 test/regressions/TestViewer.tsx | 24 +++++++++++++++++++-----
 test/regressions/fixtures.ts    |  3 +++
 test/regressions/main.tsx       | 16 ++++++++++++----
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/test/regressions/TestViewer.tsx b/test/regressions/TestViewer.tsx
index 18d9309065b..afe784ae4ca 100644
--- a/test/regressions/TestViewer.tsx
+++ b/test/regressions/TestViewer.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
-function TestViewer(props: { children: React.ReactNode }) {
-  const { children } = props;
+function TestViewer(props: { children: React.ReactNode; isTailwind: boolean }) {
+  const { children, isTailwind } = props;
 
   // We're simulating `act(() => ReactDOM.render(children))`
   // In the end children passive effects should've been flushed.
@@ -35,16 +35,30 @@ function TestViewer(props: { children: React.ReactNode }) {
     };
   }, []);
 
+  // Tailwind demos rely on preflight's `box-sizing: border-box` for `*`, so we
+  // skip the content-box flip there — otherwise the demos render with wrong
+  // dimensions and don't represent what users actually see.
+  const boxSizingFlip = isTailwind
+    ? ''
+    : `
+    html {
+      box-sizing: content-box;
+    }
+
+    *, *::before, *::after {
+      box-sizing: inherit;
+    }
+  `;
+
   const globalStyles = `
     html {
       --webkit-font-smoothing: antialiased;
       --moz-osx-font-smoothing: grayscale;
-      /* Do the opposite of the docs in order to help catching issues. */
-      box-sizing: content-box;
     }
 
+    ${boxSizingFlip}
+
     *, *::before, *::after {
-      box-sizing: inherit;
       /* Disable transitions to avoid flaky screenshots */
       transition: none !important;
       animation: none !important;
diff --git a/test/regressions/fixtures.ts b/test/regressions/fixtures.ts
index ce57fe241fa..d6d32e81440 100644
--- a/test/regressions/fixtures.ts
+++ b/test/regressions/fixtures.ts
@@ -5,6 +5,7 @@ export interface Fixture {
   name: string;
   path: string;
   suite: string;
+  isTailwind: boolean;
 }
 
 // Get all the fixtures specifically written for preventing visual regressions.
@@ -27,6 +28,7 @@ for (const path in globbedRegressionFixtures) {
     suite: `regression-${suite}`,
     name,
     Component: globbedRegressionFixtures[path].default,
+    isTailwind: false,
   });
 }
 
@@ -93,6 +95,7 @@ for (const path in globbedDemos) {
       suite,
       name,
       Component: globbedDemos[path].default,
+      isTailwind: path.includes('/tailwind/'),
     });
   }
 }
diff --git a/test/regressions/main.tsx b/test/regressions/main.tsx
index aed485709c9..4b5c25508a6 100644
--- a/test/regressions/main.tsx
+++ b/test/regressions/main.tsx
@@ -7,13 +7,19 @@ import 'docs/src/css/index.css';
 
 const viewerRoot = document.getElementById('test-viewer');
 
-function FixtureRenderer({ component: FixtureComponent }: { component: React.ElementType }) {
+function FixtureRenderer({
+  component: FixtureComponent,
+  isTailwind,
+}: {
+  component: React.ElementType;
+  isTailwind: boolean;
+}) {
   const viewerReactRoot = React.useRef<ReactDOMClient.Root | null>(null);
 
   React.useLayoutEffect(() => {
     const renderTimeout = setTimeout(() => {
       const children = (
-        <TestViewer>
+        <TestViewer isTailwind={isTailwind}>
           <FixtureComponent />
         </TestViewer>
       );
@@ -32,7 +38,7 @@ function FixtureRenderer({ component: FixtureComponent }: { component: React.Ele
         viewerReactRoot.current = null;
       });
     };
-  }, [FixtureComponent]);
+  }, [FixtureComponent, isTailwind]);
 
   return null;
 }
@@ -78,7 +84,9 @@ function App() {
             <Route
               key={path}
               path={path}
-              element={<FixtureRenderer component={FixtureComponent} />}
+              element={
+                <FixtureRenderer component={FixtureComponent} isTailwind={fixture.isTailwind} />
+              }
             />
           );
         })}